easyui源码翻译1.32--SplitButton（分割按钮）

前言

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

类似菜单按钮，分割按钮也与linkbutton和菜单有关系。menubutton和splitbutton之间的区别是,splitbutton分为两部分。它只会在鼠标移动到splitbutton按钮右边的时候才会显示出“分割线”。

源码

/**
 * jQuery EasyUI 1.3.2
 * 
 *翻译 qq 1364386878 分割按钮
 */
(function ($) {
    //初始化组件
    function init(jq) {
        var options = $.data(jq, "splitbutton").options;
        var splitbutton = $(jq);
        splitbutton.removeClass("s-btn-active s-btn-plain-active").addClass("s-btn");
        splitbutton.linkbutton($.extend({}, options, {
            text: options.text
                + "<span class="s-btn-downarrow">&nbsp;</span>"
        }));
        if (options.menu) {
            $(options.menu).menu({
                onShow: function () {
                    splitbutton.addClass((options.plain == true) ? "s-btn-plain-active" : "s-btn-active");
                }, onHide: function () {
                    splitbutton.removeClass((options.plain == true) ? "s-btn-plain-active" : "s-btn-active");
                }
            });
        }
        _setdisable(jq, options.disabled);
    };
    //禁用或启用组件
    function _setdisable(jq, flag) {
        var options = $.data(jq, "splitbutton").options;
        options.disabled = flag;
        var splitbutton = $(jq);
        //下拉箭头
        var downarrow = splitbutton.find(".s-btn-downarrow");
        if (flag) {
            splitbutton.linkbutton("disable");
            downarrow.unbind(".splitbutton");
        } else {
            splitbutton.linkbutton("enable");
            downarrow.unbind(".splitbutton");
            downarrow.bind("click.splitbutton", function () {
                initMenu();
                return false;
            });
            var timeOutId = null;
            downarrow.bind("mouseenter.splitbutton", function () {
                timeOutId = setTimeout(function () {
                    initMenu();
                }, options.duration);
                return false;
            }).bind("mouseleave.splitbutton", function () {
                if (timeOutId) {
                    clearTimeout(timeOutId);
                }
            });
        }
        // 初始化组件下拉菜单
        function initMenu() {
            if (!options.menu) {
                return;
            }
            $("body>div.menu-top").menu("hide");
            $(options.menu).menu("show", { alignTo: splitbutton });
            splitbutton.blur();
        };
    };
    //初始化组件
    $.fn.splitbutton = function (target, parm) {
        if (typeof target == "string") {
            return $.fn.splitbutton.methods[target](this, parm);
        }
        target = target || {};
        return this.each(function () {
            var splitbutton = $.data(this, "splitbutton");
            if (splitbutton) {
                $.extend(splitbutton.options, target);
            } else {
                $.data(this, "splitbutton", {
                    options: $.extend({},
                        $.fn.splitbutton.defaults,
                        $.fn.splitbutton.parseOptions(this),
                        target)
                });
                $(this).removeAttr("disabled");
            }
            init(this);
        });
    };
    //默认方法
    $.fn.splitbutton.methods = {
        //返回属性对象
        options: function (jq) {
            return $.data(jq[0], "splitbutton").options;
        },
        //返回属性对象
        enable: function (jq) {
            return jq.each(function () {
                _setdisable(this, false);
            });
        },
        //启用分割按钮
        disable: function (jq) {
            return jq.each(function () {
                _setdisable(this, true);
            });
        },
        //销毁分割按钮
        destroy: function (jq) {
            return jq.each(function () {
                var options = $(this).splitbutton("options");
                if (options.menu) {
                    $(options.menu).menu("destroy");
                }
                $(this).remove();
            });
        }
    };
    //解析器
    $.fn.splitbutton.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.fn.linkbutton.parseOptions(target),
            $.parser.parseOptions(target, ["menu",
                {
                    plain: "boolean",
                    duration: "number"
                }]));
    };
    //默认属性和事件  继承linkbutton
    $.fn.splitbutton.defaults = $.extend({}, $.fn.linkbutton.defaults,
        {
            plain: true,//设置为true将显示简洁效果
            menu: null,//用来创建一个对应菜单的选择器
            duration: 100//定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒
        });
})(jQuery);

示例代码

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic SplitButton - 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.menu.js"></script>
    <script src="../../plugins2/jquery.linkbutton.js"></script>
    <script src="../../plugins2/jquery.splitbutton.js"></script>
</head>
<body>
    <h2>Basic SplitButton</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Move mouse over the arrow area of 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-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm2',iconCls:'icon-ok'">Ok</a>
        <a href="#" class="easyui-menubutton" data-options="menu:'#mm3',iconCls:'icon-help'">Help</a>
    </div>
    <div id="mm1" style="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="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="100px;">
        <div data-options="iconCls:'icon-ok'">Ok</div>
        <div data-options="iconCls:'icon-cancel'">Cancel</div>
    </div>
    <div id="mm3" style="150px;">
        <div>Help</div>
        <div>Update</div>
        <div>
            <span>About</span>
            <div class="menu-content" style="padding:10px;text-align:left">
                <img src="http://www.jeasyui.com/images/logo1.png" style="150px;height:50px">
                <p style="font-size:14px;color:#444">Try jQuery EasyUI to build your modem, interactive, javascript applications.</p>
            </div>
        </div>
    </div>

</body>
</html>

插件效果