一。菜单-menu
1. 使用HTML标签创建菜单必须对<div>标签引用'easyui-menu'类,每个菜单项都将使用<div>标签创建。
为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。
*menu是默认隐藏的,可以使用脚本让其显示,添加点击动作等
2. 链接按钮 - LinkButton
使用编程的方式创建:
* 仍然可以给a添加onclick事件,使其执行需要的js函数
3. 菜单按钮 - MenuButton
菜单按钮的是下拉菜单的一部分,由一个链接按钮和菜单组成。这个链接菜单默认将隐藏显示在菜单内。
当用户单击或鼠标移动到链接按钮,菜单将显示允许点击它。
* MenuButton 是依赖与menu的,只是点击它是出来menu,也可以不必在a中指定,使用js创建:
4. 分隔按钮 - SplitButton
* 跟menu很像,不同的是连接按钮上有个竖分割线,鼠标必须放在分割线右侧的小三角上才会出现下拉菜单
* 同样可以用js动态创建:
1. 使用HTML标签创建菜单必须对<div>标签引用'easyui-menu'类,每个菜单项都将使用<div>标签创建。
为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。
<body οnlοad="showMenu();">
<div id="mm" class="easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
*menu是默认隐藏的,可以使用脚本让其显示,添加点击动作等
function showMenu() {
$('#mm').menu({
onClick: function(item) {
alert("ok");
}
});
$('#mm').menu('show', {
left: 200,
top: 100
});
2. 链接按钮 - LinkButton
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
使用编程的方式创建:
<a id="btn2" href="#">easyui</a>
<script>
$('#btn2').linkbutton({
iconCls: 'icon-save'
});
<span style="font-family: Arial, Helvetica, sans-serif;"></script></span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
* 链接按钮用于创建超链接按钮。它是表示正常的<a>标记。它可以显示图标和文字,或只图标或文字。该按钮的宽度可以动态收缩/展开,以适应其文本标签。
* 仍然可以给a添加onclick事件,使其执行需要的js函数
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" οnclick="javascript:alert('easyui')">easyui</a>
* 或者使用js动态绑定onclick事件:
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>
<script>
$(function(){
$('#btn').bind('click', function(){
alert('easyui');
});
});
</script>
3. 菜单按钮 - MenuButton
菜单按钮的是下拉菜单的一部分,由一个链接按钮和菜单组成。这个链接菜单默认将隐藏显示在菜单内。
当用户单击或鼠标移动到链接按钮,菜单将显示允许点击它。
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:'icon-undo'">Undo</div>
<div data-options="iconCls:'icon-redo'">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-remove'">Delete</div>
<div>Select All</div>
</div>
* MenuButton 是依赖与menu的,只是点击它是出来menu,也可以不必在a中指定,使用js创建:
<script>
function createMenuButton(){
$('#mb').menubutton({
iconCls: 'icon-edit',
menu: '#mm'
});
}
</script>
4. 分隔按钮 - SplitButton
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
data-options="menu:'#mm',iconCls:'icon-ok'" οnclick="javascript:alert('ok')">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:'icon-ok'">Ok</div>
<div data-options="iconCls:'icon-cancel'">Cancel</div>
</div>
* 跟menu很像,不同的是连接按钮上有个竖分割线,鼠标必须放在分割线右侧的小三角上才会出现下拉菜单
* 同样可以用js动态创建:
<script>
$('#mb').menubutton({
iconCls: 'icon-edit',
menu: '#mm'
});
</script>