前言

使用$.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>

插件效果

easyui源码翻译1.32--SearchBox(搜索框)的更多相关文章

  1. easyui源码翻译1.32+API翻译全篇导航 (提供下载源码)

    前言 EasyUI每个组件都会有 属性.方法.事件 属性 所有的属性都定义在jQuery.fn.{plugin}.defaults里面.例如,对话框属性定义在jQuery.fn.dialog.defa ...

  2. easyui源码翻译1.32--ValidateBox(验证框)

    前言 使用$.fn.validatebox.defaults重写默认值对象.下载该插件翻译源码 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将 ...

  3. easyui源码翻译1.32--datagrid(数据表格)

    前言 此前网上有easyui1.25的源码  应该算是比较老的版本  之后又经历了1.26 . 1.3. 1.31. 1.32 .1.33.1.34  1.33开始支持css3 算是又一个转折  但是 ...

  4. easyui源码翻译1.32--EasyLoader(简单加载)

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...

  5. easyui源码翻译1.32--Combo(自定义下拉框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...

  6. easyui源码翻译1.32--Draggable(拖动)

    前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...

  7. easyui源码翻译1.32--Droppable(放置)

    前言 使用$.fn.droppable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:lbq --放置 拉伸 */ (fun ...

  8. easyui源码翻译1.32--Resizable(调整大小)

    前言 使用$.fn.resizable.defaults重写默认值对象 下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 Resiz ...

  9. easyui源码翻译1.32--Pagination(分页)

    前言 使用$.fn.pagination.defaults重写默认值对象下载该插件翻译源码 该分页控件允许用户导航页面的数据.它支持页面导航和页面长度选择的选项设置.用户可以在分页控件上添加自定义按钮 ...

随机推荐

  1. JAXB - XML Schema Types, Binary Data

    Data that has no "natural" representation with printable characters must, for inclusion in ...

  2. 关于SAP4.7的几个架构图

    http://blog.itpub.net/92530/viewspace-154881/ 1.SAP基本架构图 2.SAP的应用层的工作进程架构图 3.SAP的内存类型图 4.SAP数据访问架构图 ...

  3. CORS 跨域

    跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性——CORS(Cross-Origin Resource Sh ...

  4. PowerDesigner使用教程 —— 概念数据模型 (转)

    一.概念数据模型概述    概念数据模型也称信息模型,它以实体-联系(Entity-RelationShip,简称E-R)理论为基础,并对这一理论进行了扩充.它从用户的观点出发对信息进行建模,主要用于 ...

  5. 【重叠I/O之系列三】I/O完成端口

    一   串行模式和并行模式 一般一个服务应用程序采用以下两个架构模型之一: 串行模式  一个线程等待一个客户发出的请求,当请求到达的时候,线程会被换醒来处理客户的请求. 并发模式.一个线程等待一个客户 ...

  6. [转]Windows Shell 编程 第四章 【来源 http://blog.csdn.net/wangqiulin123456/article/details/7987933】

    第四章 文件的本质 以前,所有文件和目录都有一个确定的属性集:时间,日期,尺寸,以及表示‘只读的’,‘隐藏的,‘存档的’,或‘系统的’状态标志.然而,Windos95(及后来的WindowsNT4.0 ...

  7. ASP.NET 5 初识

    ASP.NET 5 是一个跨平台的全新框架,不再依赖IIS.下面介绍一下简单的Hello World 例子. 1. 安装kvm 用管理员权限打开cmd .如下图: 执行如下的脚本: @powershe ...

  8. 每天一个linux命令(1):more命令

    more命令,功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 b 键就会 ...

  9. jQuery 1.4.4 中 function( window, undefined ) 写法原因

    读 jQuery 1.4.4 版本代码的时候,发现下面的写法: (function( window, undefined ) { ... // code goes here })(window); w ...

  10. scroll

    var fScrollTopHeight = function(){ return document.documentElement&&document.documentElement ...