第二百零七节，jQuery EasyUI，MenuButton(菜单按钮)组件

jQuery EasyUI，MenuButton(菜单按钮)组件

学习要点：

　　1.加载方式

　　2.属性列表

　　3.方法列表

本节课重点了解 EasyUI 中 MenuButton(菜单按钮)组件的使用方法，这个组件依赖于 Menu(菜单)组件和 LinkButton(按钮)组件。

一．加载方式

class 加载方式

<a href="javascript:void(0)" id="edit" class="easyui-menubutton"

   data-options="menu:'#box',iconCls:'icon-edit'">编辑</a>

<div id="box" style="width:150px;">

    <div data-options="iconCls:'icon-undo'">撤销</div>

    <div data-options="iconCls:'icon-redo'">恢复</div>

    <div class="menu-sep"></div>

    <div>剪切</div>

    <div>复制</div>

    <div>粘贴</div>

    <div class="menu-sep"></div>

    <div data-options="iconCls:'icon-remove'">删除</div>

    <div>全选</div>

</div>

menubutton()方法，将一个符合规则的元素执行菜单按钮方法

html代码

<a id="bt" href="javascript:void(0)">编辑</a>

<div id="box">

    <div id="i1">撤销</div>

    <div id="i2">恢复</div>

    <div id="i3">剪切</div>

    <div id="i4">复制</div>

    <div id="i5">粘贴</div>

    <div class="menu-sep"></div>

    <div id="i6">删除</div>

    <div id="i7">全选</div>

</div>

js代码

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false          //按钮不扁平化，显示按钮轮廓

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

        onClick:function (item) {

            alert('在菜单项被点击的时候触发');

            alert(item); //接收点击的对象

        }

    });

    //菜单项部分

    $('#box').menu('setIcon', {

        target: '#i1',

        iconCls: 'icon-add'

    });

        $('#box').menu('setIcon', {

        target: '#i2',

        iconCls: 'icon-add'

    });

        $('#box').menu('setIcon', {

        target: '#i3',

        iconCls: 'icon-add'

    });

        $('#box').menu('setIcon', {

        target: '#i4',

        iconCls: 'icon-add'

    });

        $('#box').menu('setIcon', {

        target: '#i5',

        iconCls: 'icon-add'

    });

        $('#box').menu('setIcon', {

        target: '#i6',

        iconCls: 'icon-add'

    });

        $('#box').menu('setIcon', {

        target: '#i7',

        iconCls: 'icon-add'

    });

});

注意：菜单按钮，是按钮和菜单的组合，所以菜单的属性，方法，事件等参照上一节，菜单来使用即可

二．菜单按钮属性列表

plain boolean 为 true 时显示简易效果。默认为 true。

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false          //按钮不扁平化，显示按钮轮廓

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

    });

});

menu string 用来创建一个对应菜单的选择器。

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false          //按钮不扁平化，显示按钮轮廓

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

    });

});

duration number 定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。默认为100。

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false,          //按钮不扁平化，显示按钮轮廓

        duration:50         //定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。默认为100。

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

    });

});

属性列表，其他属性，参考依赖组件 LinkButton

三．菜单按钮方法

options none 返回属性对象。

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false,          //按钮不扁平化，显示按钮轮廓

        duration:50         //定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。默认为100。

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

    });

    alert($('#bt').menubutton('options'));   //返回属性对象

});

disable none 禁用菜单按钮。

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false,          //按钮不扁平化，显示按钮轮廓

        duration:50         //定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。默认为100。

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

    });

    $('#bt').menubutton('disable');   //禁用菜单按钮

});

enable none 启用菜单按钮。

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false,          //按钮不扁平化，显示按钮轮廓

        duration:50         //定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。默认为100。

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

    });

    $('#bt').menubutton('enable');   //启用菜单按钮

});

destroy none 销毁菜单按钮。

$(function () {

    //按钮部分

    $('#bt').menubutton({

        menu:'#box',         //在按钮里指向菜单元素

        iconCls:'icon-edit', //设置按钮图标

        plain:false,          //按钮不扁平化，显示按钮轮廓

        duration:50         //定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。默认为100。

    });

    //菜单部分

    $('#box').menu({

        zIndex:100,   //设置菜单的层级关系

    });

    $('#bt').menubutton('destroy');   //销毁菜单按钮。

});

重写默认值

扩展自$.fn.linkbutton.defaults。使用$.fn.menubutton.defaults 重写默认值对象。

巴特西

第二百零七节，jQuery EasyUI，MenuButton(菜单按钮)组件

最新文章

热门文章