Coolite官方例子学习笔记三：按钮的花哨
按钮的花哨（前台简单属性设置）
一、给按钮加图片
<ext:Button runat="server" Text="Text" Icon="Add" />
二、给按钮加样式
<style type="text/css"> .custom-icon1 {background-image: url(arrow-down.gif) !important;
}</style>
<ext:Button runat="server" Text="Text" IconCls="custom-icon1" />
三、给按钮加提示
<ext:Button runat="server" Text="Text">
<ToolTips>
<ext:ToolTip runat="server" Title="提示标题" Html="提示内容描述" />
</ToolTips>
</ext:Button>
四、切换按钮
效果图：
点击后有被Pressed的效果<ext:Button runat="server" Text="Button1" EnableToggle="true" ToggleGroup="Group1" Pressed="true" />
<ext:Button runat="server" Text="Button2" EnableToggle="true" ToggleGroup="Group1" />
<ext:Button runat="server" Text="Button3" EnableToggle="true" ToggleGroup="Group1" />
五、菜单按钮
效果图：
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Item 1" Icon="GroupAdd" />
<ext:MenuItem runat="server" Text="Item 2" Icon="GroupDelete" />
<ext:MenuItem runat="server" Text="Item 3" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
六、拆分按钮带菜单
效果图：
<ext:SplitButton ID="SplitButton1" runat="server" Text="拆分按钮">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="添加" Icon="GroupAdd" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="删除" Icon="GroupDelete" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="编辑" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton >
七、循环按钮
效果图：
<ext:CycleButton runat="server" ShowText="true" PrependText="前面显示文本">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:CheckMenuItem runat="server" Text="Text" Icon="Note" />
<ext:CheckMenuItem runat="server" Text="Html" Icon="Html" Checked="true" />
</Items>
</ext:Menu>
</Menu>
</ext:CycleButton>
八、无框平底按钮
效果图：
<ext:Button runat="server" Text="FlatButton" Icon="Accept" Flat="true" />
八、ImageButton
ImageButton使用得也比较多，通过设置按扭的图片让按扭呈现出不同的风格，不过Coolite Toolkit的ImageButton控件和微软的有些不一样，微软的只能设置一张显示图片，如果要做动态交互效果只能通过样式或脚本程序去控制，Coolite Toolkit却直接提供了对外属性，只需要简单设置就可以完成一个丰富的界面交互效果的按扭，其功能点和ext:Button是一样的，如下所示：
<ext:ImageButton ID="ImageButton1"
runat="server"
ImageUrl="button/button.gif"
OverImageUrl="button/overButton.gif"
DisabledImageUrl="button/disabled.gif"
PressedImageUrl="button/pressed.gif">
<AjaxEvents>
<Click OnEvent="Button1_Click" />
</AjaxEvents>
</ext:ImageButton>
2009年11月20日
