[b]Button:按钮[/b]
[img]http://www.miniui.com/docs/api/images/buttons.gif[/img]
参考示例: [url=http://www.miniui.com/demo/button/button.html]按钮[/url] [url=http://www.miniui.com/demo/button/menubutton.html]菜单按钮 [/url] [url=http://www.miniui.com/demo/button/radiobutton.html]按钮组[/url] [url=http://www.miniui.com/demo/toolbar/toolbar.html]工具栏[/url]
[b]创建按钮[/b]
<h4>Only Text</h4>
<a class="mini-button" onclick="onClick" enabled="false" >增加</a>
<a class="mini-button" onclick="onClick" >修改</a>
<h4>Text and Icon</h4>
<a class="mini-button" iconCls="icon-add" onclick="onClick" >增加</a>
<a class="mini-button mini-button-iconRight" iconCls="icon-edit" onclick="onClick" >修改</a>
<h4>Only Icon</h4>
<a class="mini-button" iconCls="icon-add" onclick="onClick"></a>
<a class="mini-button" iconCls="icon-edit" onclick="onClick"></a>
<h4>Plain</h4>
<a class="mini-button" plain="true" iconCls="icon-add" onclick="onClick">增加</a>
<a class="mini-button" plain="true" iconCls="icon-edit" onclick="onClick">修改</a>
<a class="mini-button" plain="true" iconCls="icon-remove" onclick="onClick">删除</a>
<h4>Icon Position</h4>
<a class="mini-button mini-button-iconTop" iconCls="icon-add" onclick="onClick" >增加</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" >修改</a>
<h4>A Link</h4>
<a class="mini-button" href="http://www.google.com">Google</a>
<a class="mini-button" href="http://www.baidu.com">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" onclick="onItemClick">新建</li>
<li class="separator"></li>
<li iconCls="icon-add" onclick="onItemClick">增加</li>
<li iconCls="icon-edit" onclick="onItemClick">修改</li>
<li iconCls="icon-remove" onclick="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>
[img]http://www.miniui.com/docs/api/images/buttons.gif[/img]
参考示例: [url=http://www.miniui.com/demo/button/button.html]按钮[/url] [url=http://www.miniui.com/demo/button/menubutton.html]菜单按钮 [/url] [url=http://www.miniui.com/demo/button/radiobutton.html]按钮组[/url] [url=http://www.miniui.com/demo/toolbar/toolbar.html]工具栏[/url]
[b]创建按钮[/b]
<h4>Only Text</h4>
<a class="mini-button" onclick="onClick" enabled="false" >增加</a>
<a class="mini-button" onclick="onClick" >修改</a>
<h4>Text and Icon</h4>
<a class="mini-button" iconCls="icon-add" onclick="onClick" >增加</a>
<a class="mini-button mini-button-iconRight" iconCls="icon-edit" onclick="onClick" >修改</a>
<h4>Only Icon</h4>
<a class="mini-button" iconCls="icon-add" onclick="onClick"></a>
<a class="mini-button" iconCls="icon-edit" onclick="onClick"></a>
<h4>Plain</h4>
<a class="mini-button" plain="true" iconCls="icon-add" onclick="onClick">增加</a>
<a class="mini-button" plain="true" iconCls="icon-edit" onclick="onClick">修改</a>
<a class="mini-button" plain="true" iconCls="icon-remove" onclick="onClick">删除</a>
<h4>Icon Position</h4>
<a class="mini-button mini-button-iconTop" iconCls="icon-add" onclick="onClick" >增加</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" >修改</a>
<h4>A Link</h4>
<a class="mini-button" href="http://www.google.com">Google</a>
<a class="mini-button" href="http://www.baidu.com">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" onclick="onItemClick">新建</li>
<li class="separator"></li>
<li iconCls="icon-add" onclick="onItemClick">增加</li>
<li iconCls="icon-edit" onclick="onItemClick">修改</li>
<li iconCls="icon-remove" onclick="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库中的按钮控件,包括普通按钮、菜单按钮、按钮组和工具栏的创建与使用。通过实例展示了不同类型的按钮,如只包含文本、文本与图标、仅图标、平铺按钮以及图标位置等,并提供了菜单按钮的使用方法和工具栏的配置示例。
2万+

被折叠的 条评论
为什么被折叠?



