jQuery MiniUI 开发教程 表单控件 Button：按钮（六）

[b]Button：按钮[/b]

[img]/docs/api/images/buttons.gif[/img]

参考示例： [url=/demo/button/button.html]按钮[/url] [url=/demo/button/menubutton.html]菜单按钮 [/url] [url=/demo/button/radiobutton.html]按钮组[/url] [url=/demo/toolbar/toolbar.html]工具栏[/url]

[b]创建按钮[/b]

<h4>Only Text</h4>

<a class="mini-button" οnclick="onClick" enabled="false" >增加</a>

<a class="mini-button" οnclick="onClick" >修改</a>

<h4>Text and Icon</h4>

<a class="mini-button" iconCls="icon-add" οnclick="onClick" >增加</a>

<a class="mini-button mini-button-iconRight" iconCls="icon-edit" οnclick="onClick" >修改</a>

<h4>Only Icon</h4>

<a class="mini-button" iconCls="icon-add" οnclick="onClick"></a>

<a class="mini-button" iconCls="icon-edit" οnclick="onClick"></a>

<h4>Plain</h4>

<a class="mini-button" plain="true" iconCls="icon-add" οnclick="onClick">增加</a>

<a class="mini-button" plain="true" iconCls="icon-edit" οnclick="onClick">修改</a>

<a class="mini-button" plain="true" iconCls="icon-remove" οnclick="onClick">删除</a>

<h4>Icon Position</h4>

<a class="mini-button mini-button-iconTop" iconCls="icon-add" οnclick="onClick" >增加</a>

<a class="mini-button mini-button-iconTop" iconCls="icon-edit" οnclick="onClick" >修改</a>

<h4>A Link</h4>

<a class="mini-button" href="">Google</a>

<a class="mini-button" href="">Baidu</a>

[b]菜单按钮[/b]

<a class="mini-menubutton" menu="#popupMenu" >选择...</a>

<ul id="popupMenu" class="mini-menu" style="display:none;">

<li>

<span >操作</span>

<li iconCls="icon-new" οnclick="onItemClick">新建</li>

<li class="separator"></li>

<li iconCls="icon-add" οnclick="onItemClick">增加</li>

<li iconCls="icon-edit" οnclick="onItemClick">修改</li>

<li iconCls="icon-remove" οnclick="onItemClick">删除</li>

</li>

<li class="separator"></li>

<li iconCls="icon-open" >打开</li>

<li iconCls="icon-remove" >关闭</li>

</ul>

[b]工具栏[/b]

<div class="mini-toolbar">

<a class="mini-button" iconCls="icon-add">增加</a>

<a class="mini-button" iconCls="icon-edit">修改</a>

<a class="mini-button" iconCls="icon-remove">删除</a>

<span class="separator"></span>

<a class="mini-button" plain="true">增加</a>

<a class="mini-button" plain="true">修改</a>

<a class="mini-button" plain="true">删除</a>

<span class="separator"></span>

<input class="mini-textbox" />

<a class="mini-button" plain="true">查询</a>

</div>

如果觉得《jQuery MiniUI 开发教程 表单控件 Button：按钮（六）》对你有帮助，请点赞、收藏，并留下你的观点哦！