Coolite(六):常用控件Accordion、ToolBar、ToolTip

weixin_30911451

于 2019-07-06 05:04:06 发布

阅读量244

点赞数

原文链接：http://www.cnblogs.com/hendy/archive/2010/04/13/1710922.html

版权

一、Accordion控件
   Accordion的功能非常适用，使用很简单，轻轻松松的就可以构建一个可折叠的界面展示应用效果。相信大多数做ASP.NET开发的朋友都使用过 ASP.NET AJAX Control Toolkit，它里面也提供有Accordion控件，详细可以查看其在线示例。Colite Toolkit所提供的Accordion控件的使用和ASP.NET AJAX Control Toolkit里提供的Accordion差别不大，不同的是 Coolite Toolkit的控件必须放置在一个容器控件里（比如： Panel）。
< ext:Panel ID ="Panel1" runat ="server" Height ="300" Title ="系统菜单" Width ="200" >
< Body >
< ext:Accordion ID ="Accordion1" runat ="server" Animate ="true" >
< ext:Panel ID ="basePanel" runat ="server" Border ="false" Title ="基础设置" >
< Body >
</ Body >
</ ext:Panel >
< ext:Panel ID ="accountPanel" runat ="server" Border ="false" Collapsed ="true" Title ="帐套管理" >
< Body >
< div style ="margin-left:50px;" >
< ul style ="float:left;" >
< li > 新增帐套 </ li >
< li > 维护帐套 </ li >
< li > 帐套备份 </ li >
< li > 帐套恢复 </ li >
</ ul >
</ div >
</ Body >
</ ext:Panel >
< ext:Panel ID ="userPanel" runat ="server" Border ="false" Collapsed ="true" Title ="用户管理" >
< Body >
</ Body >
</ ext:Panel >
</ ext:Accordion >
</ Body >
</ ext:Panel >

   得到的效果如下，这个界面相比ASP.NET AJAX Control Toolkit的Accordion要好看得多。

全部自己去定义里面的菜单项好象很麻烦，这里可以利用上一篇文章中介绍的 MenuPanel来实现，个人感觉效果更好，更方便快速。

< ext:Accordion ID ="Accordion1" runat ="server" Animate ="true" >

< ext:MenuPanel ID ="MenuPanel1" runat ="server" Title ="帐套管理" >

< Menu ID ="Menu2" runat ="server" >

< Items >

< ext:MenuItem Text ="新增帐套" Href ="#" Icon =Add />

< ext:MenuItem Text ="维护帐套" Href ="#" Icon ="Cmy" />

< ext:MenuItem Text ="帐套备份" Href ="#" Icon =DatabaseSave />

< ext:MenuItem Text ="帐套恢复" Href ="#" Icon ="DatabaseGo" />

</ Items >

</ Menu >

</ ext:MenuPanel >

< ext:Panel ID ="accountPanel" runat ="server" Border ="false" Collapsed ="true" Title ="帐套管理" >

< Body >

< div style ="margin-left:50px;" >

< ul style ="float:left;" >

< li > 新增帐套 </ li >

< li > 维护帐套 </ li >

< li > 帐套备份 </ li >

< li > 帐套恢复 </ li >

</ ul >

</ div >

</ Body >

</ ext:Panel >

< ext:Panel ID ="userPanel" runat ="server" Border ="false" Collapsed ="true" Title ="用户管理" >

< Body >

</ Body >

</ ext:Panel >

</ ext:Accordion >

   关于怎么获取所点项的相关参数请查看本系列笔记第四篇。

二、ToolBar和ToolTip控件
   工具栏到处可见，在我们的项目开发中同样也需要工具栏(ToolBar)以及动态提示(ToolTip)，以方便用户操作。
< ext:Toolbar ID ="Toolbar1" runat ="server" Width ="300" >
< Items >
< ext:ToolbarButton ID ="btnAdd" Text ="新增" Icon ="UserAdd" >
< ToolTips >
< ext:ToolTip ID ="ToolTip1" Html ="新增用户" runat ="server" />
</ ToolTips >
</ ext:ToolbarButton >
< ext:ToolbarButton ID ="btnEdit" Text ="编辑" Icon ="UserEdit" Enabled ="false" />
< ext:ToolbarButton ID ="btnDelete" Text ="删除" Icon ="UserDelete" Enabled ="false" />
< ext:ToolbarSeparator runat ="server" />
< ext:ToolbarButton ID ="btnRefresh" Text ="刷新" Icon ="Reload" Enabled ="false" />
< ext:ToolbarSeparator runat ="server" />
< ext:ToolbarButton ID ="tbSave" Text ="保存" Icon ="Accept" />
< ext:ToolbarButton ID ="tbCancel" Text ="取消" Icon ="Cancel" />
</ Items >
</ ext:Toolbar >