Coolite Toolkit学习笔记六：常用控件Accordion、ToolBar、ToolTip-白红宇

一、Accordion控件

Accordion的功能非常适用，使用很简单，轻轻松松的就可以构建一个可折叠的界面展示应用效果。相信大多数做ASP.NET开发的朋友都使用过

，它里面也提供有Accordion控件，详细可以查看其

。Colite Toolkit所提供的Accordion控件的使用和ASP.NET AJAX Control Toolkit里提供的Accordion差别不大，不同的是Coolite Toolkit的控件必须放置在一个容器控件里（比如：Panel）。

ext:Panel

="Panel1"

runat

="server"

Height

="300"

Title

="系统菜单"

Width

="200"

Body

ext:Accordion

="Accordion1"

runat

="server"

Animate

="true"

ext:Panel

="basePanel"

runat

="server"

Border

="false"

Title

="基础设置"

Body

ext:Panel

="accountPanel"

runat

="server"

Border

="false"

Collapsed

="true"

Title

="帐套管理"

Body

div

style

="margin-left:50px;"

style

="float:left;"

新增帐套

维护帐套

帐套备份

帐套恢复

div

Body

ext:Panel

="userPanel"

runat

="server"

Border

="false"

Collapsed

="true"

Title

="用户管理"

Body

ext:Panel

ext:Accordion

Body

ext:Panel

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

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

Code

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

二、ToolBar和ToolTip控件

工具栏到处可见，在我们的项目开发中同样也需要工具栏(ToolBar)以及动态提示(ToolTip)，以方便用户操作。

ext:Toolbar

="Toolbar1"

runat

="server"

Width

="300"

Items

ext:ToolbarButton

="btnAdd"

Text

="新增"

Icon

="UserAdd"

ToolTips

ext:ToolTip

="ToolTip1"

Html

="新增用户"

runat

="server"

ToolTips

ext:ToolbarButton

="btnEdit"

Text

="编辑"

Icon

="UserEdit"

Enabled

="false"

ext:ToolbarButton

="btnDelete"

Text

="删除"

Icon

="UserDelete"

Enabled

="false"

ext:ToolbarSeparator

runat

="server"

ext:ToolbarButton

="btnRefresh"

Text

="刷新"

Icon

="Reload"

Enabled

="false"

ext:ToolbarSeparator

runat

="server"

ext:ToolbarButton

="tbSave"

Text

="保存"

Icon

="Accept"

ext:ToolbarButton

="tbCancel"

Text

="取消"

Icon

="Cancel"

Items

ext:Toolbar

Coolite Toolkit的ToolBar控件功能非常强大，除了实现上面这种最基本的工具栏外，还可以设计出功能更加强大的。准确的说Coolite Toolkit为很多控件都提供了许多的功能扩展功能，这类控件主要是Tree、Menu 等等之类的控件。

Code

本文转自 beniao 51CTO博客，原文链接：http://blog.51cto.com/beniao/240072，如需转载请自行联系原作者