easyui源码翻译1.32--MenuButton（菜单按钮）

前言

扩展自$.fn.linkbutton.defaults。使用$.fn.menubutton.defaults重写默认值对象。。下载该插件翻译源码

菜单按钮是下拉菜单的一部分。它伴随着linkbutton和menu组件。在用户点击linkbutton之前菜单是隐藏的，当用户用鼠标点击或移动到linkbutton上面的时候菜单才会显示。

源码

 

/**

 * jQuery EasyUI 1.3.2

 * 

 *翻译 qq  1364386878 菜单按钮

 */

(function ($) {

    //初始化方法

    function init(jq) {

        var options = $.data(jq, "menubutton").options;

        var btn = $(jq);

        btn.removeClass("m-btn-active m-btn-plain-active").addClass("m-btn");

        btn.linkbutton($.extend({}, options, { text: options.text + "<span class=\"m-btn-downarrow\">&nbsp;</span>" }));

        if (options.menu) {

            $(options.menu).menu({

                onShow: function () {

                    btn.addClass((options.plain == true) ? "m-btn-plain-active" : "m-btn-active");

                }, onHide: function () {

                    btn.removeClass((options.plain == true) ? "m-btn-plain-active" : "m-btn-active");

                }

            });

        }

        _enable(jq, options.disabled);

    };

    //启用菜单按钮

    function _enable(jq, disabled) {

        var options = $.data(jq, "menubutton").options;

        options.disabled = disabled;

        var menubutton = $(jq);

        if (disabled) {

            menubutton.linkbutton("disable");

            menubutton.unbind(".menubutton");

        } else {

            menubutton.linkbutton("enable");

            menubutton.unbind(".menubutton");

            menubutton.bind("click.menubutton", function () {

                showMenu();

                return false;

            });

            var timer = null;

            menubutton.bind("mouseenter.menubutton", function () {

                timer = setTimeout(function () {

                    showMenu();

                }, options.duration);

                return false;

            }).bind("mouseleave.menubutton", function () {

                if (timer) {

                    clearTimeout(timer);

                }

            });

        }

        function showMenu() {

            if (!options.menu) {

                return;

            }

            $("body>div.menu-top").menu("hide");

            $(options.menu).menu("show", { alignTo: menubutton });

            menubutton.blur();

        };

    };



    //实例化组件

    $.fn.menubutton = function (target, parm) {

        if (typeof target == "string") {

            return $.fn.menubutton.methods[target](this, parm);

        }

        target = target || {};

        return this.each(function () {

            var menubutton = $.data(this, "menubutton");

            if (menubutton) {

                $.extend(menubutton.options, target);

            } else {

                $.data(this, "menubutton", {

                    options: $.extend({},

                        $.fn.menubutton.defaults,

                        $.fn.menubutton.parseOptions(this),

                        target)

                });

                $(this).removeAttr("disabled");

            }

            init(this);

        });

    };

    //默认方法

    $.fn.menubutton.methods = {

        //返回属性对象

        options: function (jq) {

            return $.data(jq[0], "menubutton").options;

        },

        //启用菜单按钮

        enable: function (jq) {

            return jq.each(function () {

                _enable(this, false);

            });

        },

        //禁用菜单按钮

        disable: function (jq) {

            return jq.each(function () {

                _enable(this, true);

            });

        },

        //销毁菜单按钮

        destroy: function (jq) {

            return jq.each(function () {

                var options = $(this).menubutton("options");

                if (options.menu) {

                    $(options.menu).menu("destroy");

                }

                $(this).remove();

            });

        }

    };

    //解析器

    $.fn.menubutton.parseOptions = function (target) {

        var t = $(target);

        return $.extend({},

            $.fn.linkbutton.parseOptions(target),

            $.parser.parseOptions(target, ["menu", { plain: "boolean", duration: "number" }]));

    };

    //默认属性  继承了linkbutton

    $.fn.menubutton.defaults = $.extend({},

        $.fn.linkbutton.defaults, {

            plain: true,//为true时显示简易效果

            menu: null,//用来创建一个对应菜单的选择器

            duration: 100//用来创建一个对应菜单的选择器

        });

})(jQuery);

View Code

 

示例代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic MenuButton - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">

    <link rel="stylesheet" type="text/css" href="../demo.css">

    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>

    <script src="../../plugins2/jquery.parser.js"></script>

    <script src="../../plugins2/jquery.linkbutton.js"></script>

    <script src="../../plugins2/jquery.menu.js"></script>

    <script src="../../plugins2/jquery.menubutton.js"></script>

</head>

<body>

    <h2>Basic MenuButton</h2>

    <div class="demo-info">

        <div class="demo-tip icon-tip"></div>

        <div>Move mouse over the button to drop down menu.</div>

    </div>

    <div style="margin:10px 0;"></div>

    <div style="padding:5px;border:1px solid #ddd">

        <a href="#" class="easyui-linkbutton" data-options="plain:true">Home</a>

        <a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>

        <a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>

        <a href="#" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>

    </div>

    <div id="mm1" 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>

            <span>Toolbar</span>

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

                <div>Address</div>

                <div>Link</div>

                <div>Navigation Toolbar</div>

                <div>Bookmark Toolbar</div>

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

                <div>New Toolbar...</div>

            </div>

        </div>

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

        <div>Select All</div>

    </div>

    <div id="mm2" style="width:100px;">

        <div>Help</div>

        <div>Update</div>

        <div>About</div>

    </div>

    <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left">

        <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px">

        <p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modem, interactive, javascript applications.</p>

    </div>

</body>

</html>

View Code

 

插件效果