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日