easyui源码翻译1.32--LinkButton（按钮）

前言

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

按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。

源码

 

/**
 * jQuery EasyUI 1.3.2
 * 
 * 翻译：lbq
 *
 *g=this p=g.options
 */
(function ($) {
    //初始化函数
    function _init(target) {
        var p = $.data(target, "linkbutton").options;
        $(target).empty();
        $(target).addClass("l-btn");
        if (p.id) {
            $(target).attr("id", p.id);
        } else {
            $(target).attr("id", "");
        }
        if (p.plain) {
            $(target).addClass("l-btn-plain");
        } else {
            $(target).removeClass("l-btn-plain");
        }
        if (p.text) {
            $(target).html(p.text).wrapInner("<span class="l-btn-left">"
                + "<span class="l-btn-text">"
                + "</span>" + "</span>");
            if (p.iconCls) {
                $(target).find(".l-btn-text").addClass(p.iconCls).addClass(p.iconAlign == "left" ? "l-btn-icon-left" : "l-btn-icon-right");
            }
        } else {
            $(target).html("&nbsp;").wrapInner("<span class="l-btn-left">"
                + "<span class="l-btn-text">"
                + "<span class="l-btn-empty"></span>"
                + "</span>" + "</span>");
            if (p.iconCls) {
                $(target).find(".l-btn-empty").addClass(p.iconCls);
            }
        }
        $(target).unbind(".linkbutton").bind("focus.linkbutton", function () {
            if (!p.disabled) {
                $(this).find("span.l-btn-text").addClass("l-btn-focus");
            }
        }).bind("blur.linkbutton", function () {
            $(this).find("span.l-btn-text").removeClass("l-btn-focus");
        });
        setDisabled(target, p.disabled);
    };
    //设置禁用
    function setDisabled(target, disabled) {
        var g = $.data(target, "linkbutton");
        if (disabled) {
            g.options.disabled = true;
            var href = $(target).attr("href");
            if (href) {
                g.href = href;
                $(target).attr("href", "javascript:void(0)");
            }
            if (target.onclick) {
                g.onclick = target.onclick;
                target.onclick = null;
            }
            $(target).addClass("l-btn-disabled");
        } else {
            g.options.disabled = false;
            if (g.href) {
                $(target).attr("href", g.href);
            }
            if (g.onclick) {
                target.onclick = g.onclick;
            }
            $(target).removeClass("l-btn-disabled");
        }
    };
    //实例化按钮
    $.fn.linkbutton = function (options, parm) {
        if (typeof options == "string") {
            return $.fn.linkbutton.methods[options](this, parm);
        }
        options = options || {};
        return this.each(function () {
            var g = $.data(this, "linkbutton");
            if (g) {
                $.extend(g.options, options);
            } else {
                $.data(this, "linkbutton", {
                    options: $.extend({},
                        $.fn.linkbutton.defaults,
                        $.fn.linkbutton.parseOptions(this), options)
                });
                $(this).removeAttr("disabled");
            }
            _init(this);
        });
    };
    //方法定义(3)
    $.fn.linkbutton.methods = {
        //返回属性对象
        options: function (jq) {
            return $.data(jq[0], "linkbutton").options;
        },
        //启用按钮
        enable: function (jq) {
            return jq.each(function () {
                setDisabled(this, false);
            });
        },
        //禁用按钮
        disable: function (jq) {
            return jq.each(function () {
                setDisabled(this, true);
            });
        }
    };
    //解析器配置
    $.fn.linkbutton.parseOptions = function (target) {
        var t = $(target);
        return $.extend({},
            $.parser.parseOptions(target,
            ["id", "iconCls", "iconAlign", { plain: "boolean" }]),
            {
                disabled: (t.attr("disabled") ? true : undefined),
                text: $.trim(t.html()),
                iconCls: (t.attr("icon") || t.attr("iconCls"))
            });
    };
    //默认值对象(6)
    $.fn.linkbutton.defaults = {
        id: null,//组件的ID属性
        disabled: false,//为true时禁用按钮
        plain: false,//为true时显示简洁效果
        text: "",//按钮文字
        iconCls: null,//显示在按钮文字左侧的图标(16x16)的CSS类ID
        iconAlign: "left"//按钮图标位置。可用值有：'left','right'
    };
})(jQuery);

示例代码

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic LinkButton - 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>
</head>
<body>
    <h2>Basic LinkButton</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Buttons can be created from &lt;a/&gt; link.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <div style="padding:5px;">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true">Cut</a>
        <a href="#" class="easyui-linkbutton">Text Button</a>
    </div>
    
</body>
</html>

插件效果