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);

 

示例代码

<!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>

 

插件效果