easyui源码翻译1.32--SearchBox（搜索框）

前言

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

搜索框提示用户需要输入搜索的值。它可以结合一个菜单，允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。

源码

/**
 * jQuery EasyUI 1.3.2
 *
 *翻译：qq 1364386878
 */
(function ($) {
 
    //初始化搜索框
    function initSearchbox(jq) {
        $(jq).hide();
        var sb = $("<span class=\"searchbox\"></span>").insertAfter(jq);
        var textBox = $("<input type=\"text\" class=\"searchbox-text\">").appendTo(sb);
        $("<span><span class=\"searchbox-button\"></span></span>").appendTo(sb);
        var name = $(jq).attr("name");
        if (name) {
            textBox.attr("name", name);
            $(jq).removeAttr("name").attr("searchboxName", name);
        }
        return sb;
    };
    //重设组件的宽度
    function _resize(jq, width) {
        var opts = $.data(jq, "searchbox").options;
        var sb = $.data(jq, "searchbox").searchbox;
        if (width) {
            opts.width = width;
        }
        sb.appendTo("body");
        if (isNaN(opts.width)) {
            opts.width = sb._outerWidth();
        }
        var btn = sb.find("span.searchbox-button");
        var menu = sb.find("a.searchbox-menu");
        var textbox = sb.find("input.searchbox-text");
        sb._outerWidth(opts.width)._outerHeight(opts.height);
        textbox._outerWidth(sb.width() - menu._outerWidth() - btn._outerWidth());
        textbox.css({ height: sb.height() + "px", lineHeight: sb.height() + "px" });
        menu._outerHeight(sb.height());
        btn._outerHeight(sb.height());
        var leftbtn = menu.find("span.l-btn-left");
        leftbtn._outerHeight(sb.height());
        leftbtn.find("span.l-btn-text,span.m-btn-downarrow").css({ height: leftbtn.height() + "px", lineHeight: leftbtn.height() + "px" });
        sb.insertAfter(jq);
    };
    //初始化菜单项
    function initMenu(jq) {
        var sb = $.data(jq, "searchbox");
        var opts = sb.options;
        if (opts.menu) {
            sb.menu = $(opts.menu).menu({
                onClick: function (item) {
                    _clickMenu(item);
                }
            });
            ////设置默认选中
            var selecteds = sb.menu.children("div.menu-item:first");
            sb.menu.children("div.menu-item").each(function () {
                var _15 = $.extend({}, $.parser.parseOptions(this), { selected: ($(this).attr("selected") ? true : undefined) });
                if (_15.selected) {
                    selecteds = $(this);
                    return false;
                }
            });
            selecteds.triggerHandler("click");
        } else {
            sb.searchbox.find("a.searchbox-menu").remove();
            sb.menu = null;
        }
        //点击菜单按钮的事件处理方法
        function _clickMenu(item) {
            sb.searchbox.find("a.searchbox-menu").remove();
            var mb = $("<a class=\"searchbox-menu\" href=\"javascript:void(0)\"></a>").html(item.text);
            mb.prependTo(sb.searchbox).menubutton({ menu: sb.menu, iconCls: item.iconCls });
            sb.searchbox.find("input.searchbox-text").attr("name", $(item.target).attr("name") || item.text);
            _resize(jq);
        };
    };
    //绑定事件
    function bindEvent(jq) {
        var sb = $.data(jq, "searchbox");
        var opts = sb.options;
        var textBox = sb.searchbox.find("input.searchbox-text");
        var btn = sb.searchbox.find(".searchbox-button");
        textBox.unbind(".searchbox").bind("blur.searchbox", function (e) {//文本框绑定离开事件
            opts.value = $(this).val();
            if (opts.value == "") {
                $(this).val(opts.prompt);
                $(this).addClass("searchbox-prompt");
            } else {
                $(this).removeClass("searchbox-prompt");
            }
        }).bind("focus.searchbox", function (e) {//绑定焦点事件
            if ($(this).val() != opts.value) {
                $(this).val(opts.value);
            }
            $(this).removeClass("searchbox-prompt");
        }).bind("keydown.searchbox", function (e) {//绑定按键事件
            if (e.keyCode == 13) {
                e.preventDefault();
                var _1d = $.fn.prop ? textBox.prop("name") : textBox.attr("name");
                opts.value = $(this).val();
                opts.searcher.call(jq, opts.value, _1d);
                return false;
            }
        });
        btn.unbind(".searchbox").bind("click.searchbox", function () {//按钮绑定点击事件
            var name = $.fn.prop ? textBox.prop("name") : textBox.attr("name");
            opts.searcher.call(jq, opts.value, name);
        }).bind("mouseenter.searchbox", function () {
            $(this).addClass("searchbox-button-hover");
        }).bind("mouseleave.searchbox", function () {
            $(this).removeClass("searchbox-button-hover");
        });
    };
    //初始化组件文本框
    function initTextBox(jq) {
        var sb = $.data(jq, "searchbox");
        var opts = sb.options;
        var textBox = sb.searchbox.find("input.searchbox-text");
        if (opts.value == "") {
            textBox.val(opts.prompt);
            textBox.addClass("searchbox-prompt");
        } else {
            textBox.val(opts.value);
            textBox.removeClass("searchbox-prompt");
        }
    };
    //实例化
    $.fn.searchbox = function (options, param) {
        if (typeof options == "string") {
            return $.fn.searchbox.methods[options](this, param);
        }
        options = options || {};
        return this.each(function () {
            var searchbox = $.data(this, "searchbox");
            if (searchbox) {
                $.extend(searchbox.options, options);
            } else {
                searchbox = $.data(this, "searchbox", { options: $.extend({}, $.fn.searchbox.defaults, $.fn.searchbox.parseOptions(this), options), searchbox: initSearchbox(this) });
            }
            initMenu(this);
            initTextBox(this);
            bindEvent(this);
            _resize(this);
        });
    };
    //默认方法
    $.fn.searchbox.methods = {
        //返回属性对象
        options: function (jq) {
            return $.data(jq[0], "searchbox").options;
        },
        //返回搜索类型菜单对象。下面的例子显示了更改菜单项图标
        menu: function (jq) {
            return $.data(jq[0], "searchbox").menu;
        },
        //返回文本框对象
        textbox: function (jq) {
            return $.data(jq[0], "searchbox").searchbox.find("input.searchbox-text");
        },
        //返回当前搜索值
        getValue: function (jq) {
            return $.data(jq[0], "searchbox").options.value;
        },
        //设置一个新的搜索值
        setValue: function (jq, value) {
            return jq.each(function () {
                $(this).searchbox("options").value = value;
                $(this).searchbox("textbox").val(value);
                $(this).searchbox("textbox").blur();
            });
        },
        //返回当前搜索类型名
        getName: function (jq) {
            return $.data(jq[0], "searchbox").searchbox.find("input.searchbox-text").attr("name");
        },
        //选择当前搜索类型名
        selectName: function (jq, name) {
            return jq.each(function () {
                var menu = $.data(this, "searchbox").menu;
                if (menu) {
                    menu.children("div.menu-item[name=\"" + name + "\"]").triggerHandler("click");
                }
            });
        },
        //销毁该控件
        destroy: function (jq) {
            return jq.each(function () {
                var menu = $(this).searchbox("menu");
                if (menu) {
                    menu.menu("destroy");
                }
                $.data(this, "searchbox").searchbox.remove();
                $(this).remove();
            });
        },
        //重置组件宽度
        resize: function (jq, width) {
            return jq.each(function () {
                _resize(this, width);
            });
        }
    };
    //解析器配置
    $.fn.searchbox.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target, ["width", "height", "prompt", "menu"]),
            { value: t.val(), searcher: (t.attr("searcher") ? eval(t.attr("searcher")) : undefined) });
    };
    //搜索框默认属性 事件
    $.fn.searchbox.defaults = {
        //组件宽度
        width: "auto",
        //组件高度
        height: 22,
        //在输入框中显示提示消息
        prompt: "",
        //输入的值
        value: "",
        //搜索类型菜单。每个菜单项都具备一下属性：
        //name：搜索类型名称。
        //selected：自定义默认选中的搜索类型名称
        menu: null,
        //在用户按下搜索按钮或回车键的时候调用searcher函数
        searcher: function (value, name) {
        }
    };
})(jQuery);

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic SearchBox - 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.menubutton.js"></script>
    <script src="../../plugins2/jquery.searchbox.js"></script>
</head>
<body>
    <h2>Basic SearchBox</h2>
    <div class="demo-info">
        <div class="demo-tip icon-tip"></div>
        <div>Click search button or press enter key in input box to do searching.</div>
    </div>
    <div style="margin:10px 0;"></div>
    <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input>
    <script>
        function doSearch(value){
            alert('You input: ' + value);
        }
    </script>
</body>
</html>

插件效果