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

View Code

 

示例代码

 

<!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="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 data-options="iconCls:'icon-ok'">Ok</div>

        <div data-options="iconCls:'icon-cancel'">Cancel</div>

    </div>

    <div id="mm3" style="width: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="width: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>

View Code

 

插件效果