前言

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

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

源码

  1. /**
  2. * jQuery EasyUI 1.3.2
  3. *
  4. *翻译:qq 1364386878
  5. */
  6. (function ($) {
  7.  
  8. //初始化搜索框
  9. function initSearchbox(jq) {
  10. $(jq).hide();
  11. var sb = $("<span class=\"searchbox\"></span>").insertAfter(jq);
  12. var textBox = $("<input type=\"text\" class=\"searchbox-text\">").appendTo(sb);
  13. $("<span><span class=\"searchbox-button\"></span></span>").appendTo(sb);
  14. var name = $(jq).attr("name");
  15. if (name) {
  16. textBox.attr("name", name);
  17. $(jq).removeAttr("name").attr("searchboxName", name);
  18. }
  19. return sb;
  20. };
  21. //重设组件的宽度
  22. function _resize(jq, width) {
  23. var opts = $.data(jq, "searchbox").options;
  24. var sb = $.data(jq, "searchbox").searchbox;
  25. if (width) {
  26. opts.width = width;
  27. }
  28. sb.appendTo("body");
  29. if (isNaN(opts.width)) {
  30. opts.width = sb._outerWidth();
  31. }
  32. var btn = sb.find("span.searchbox-button");
  33. var menu = sb.find("a.searchbox-menu");
  34. var textbox = sb.find("input.searchbox-text");
  35. sb._outerWidth(opts.width)._outerHeight(opts.height);
  36. textbox._outerWidth(sb.width() - menu._outerWidth() - btn._outerWidth());
  37. textbox.css({ height: sb.height() + "px", lineHeight: sb.height() + "px" });
  38. menu._outerHeight(sb.height());
  39. btn._outerHeight(sb.height());
  40. var leftbtn = menu.find("span.l-btn-left");
  41. leftbtn._outerHeight(sb.height());
  42. leftbtn.find("span.l-btn-text,span.m-btn-downarrow").css({ height: leftbtn.height() + "px", lineHeight: leftbtn.height() + "px" });
  43. sb.insertAfter(jq);
  44. };
  45. //初始化菜单项
  46. function initMenu(jq) {
  47. var sb = $.data(jq, "searchbox");
  48. var opts = sb.options;
  49. if (opts.menu) {
  50. sb.menu = $(opts.menu).menu({
  51. onClick: function (item) {
  52. _clickMenu(item);
  53. }
  54. });
  55. ////设置默认选中
  56. var selecteds = sb.menu.children("div.menu-item:first");
  57. sb.menu.children("div.menu-item").each(function () {
  58. var _15 = $.extend({}, $.parser.parseOptions(this), { selected: ($(this).attr("selected") ? true : undefined) });
  59. if (_15.selected) {
  60. selecteds = $(this);
  61. return false;
  62. }
  63. });
  64. selecteds.triggerHandler("click");
  65. } else {
  66. sb.searchbox.find("a.searchbox-menu").remove();
  67. sb.menu = null;
  68. }
  69. //点击菜单按钮的事件处理方法
  70. function _clickMenu(item) {
  71. sb.searchbox.find("a.searchbox-menu").remove();
  72. var mb = $("<a class=\"searchbox-menu\" href=\"javascript:void(0)\"></a>").html(item.text);
  73. mb.prependTo(sb.searchbox).menubutton({ menu: sb.menu, iconCls: item.iconCls });
  74. sb.searchbox.find("input.searchbox-text").attr("name", $(item.target).attr("name") || item.text);
  75. _resize(jq);
  76. };
  77. };
  78. //绑定事件
  79. function bindEvent(jq) {
  80. var sb = $.data(jq, "searchbox");
  81. var opts = sb.options;
  82. var textBox = sb.searchbox.find("input.searchbox-text");
  83. var btn = sb.searchbox.find(".searchbox-button");
  84. textBox.unbind(".searchbox").bind("blur.searchbox", function (e) {//文本框绑定离开事件
  85. opts.value = $(this).val();
  86. if (opts.value == "") {
  87. $(this).val(opts.prompt);
  88. $(this).addClass("searchbox-prompt");
  89. } else {
  90. $(this).removeClass("searchbox-prompt");
  91. }
  92. }).bind("focus.searchbox", function (e) {//绑定焦点事件
  93. if ($(this).val() != opts.value) {
  94. $(this).val(opts.value);
  95. }
  96. $(this).removeClass("searchbox-prompt");
  97. }).bind("keydown.searchbox", function (e) {//绑定按键事件
  98. if (e.keyCode == 13) {
  99. e.preventDefault();
  100. var _1d = $.fn.prop ? textBox.prop("name") : textBox.attr("name");
  101. opts.value = $(this).val();
  102. opts.searcher.call(jq, opts.value, _1d);
  103. return false;
  104. }
  105. });
  106. btn.unbind(".searchbox").bind("click.searchbox", function () {//按钮绑定点击事件
  107. var name = $.fn.prop ? textBox.prop("name") : textBox.attr("name");
  108. opts.searcher.call(jq, opts.value, name);
  109. }).bind("mouseenter.searchbox", function () {
  110. $(this).addClass("searchbox-button-hover");
  111. }).bind("mouseleave.searchbox", function () {
  112. $(this).removeClass("searchbox-button-hover");
  113. });
  114. };
  115. //初始化组件文本框
  116. function initTextBox(jq) {
  117. var sb = $.data(jq, "searchbox");
  118. var opts = sb.options;
  119. var textBox = sb.searchbox.find("input.searchbox-text");
  120. if (opts.value == "") {
  121. textBox.val(opts.prompt);
  122. textBox.addClass("searchbox-prompt");
  123. } else {
  124. textBox.val(opts.value);
  125. textBox.removeClass("searchbox-prompt");
  126. }
  127. };
  128. //实例化
  129. $.fn.searchbox = function (options, param) {
  130. if (typeof options == "string") {
  131. return $.fn.searchbox.methods[options](this, param);
  132. }
  133. options = options || {};
  134. return this.each(function () {
  135. var searchbox = $.data(this, "searchbox");
  136. if (searchbox) {
  137. $.extend(searchbox.options, options);
  138. } else {
  139. searchbox = $.data(this, "searchbox", { options: $.extend({}, $.fn.searchbox.defaults, $.fn.searchbox.parseOptions(this), options), searchbox: initSearchbox(this) });
  140. }
  141. initMenu(this);
  142. initTextBox(this);
  143. bindEvent(this);
  144. _resize(this);
  145. });
  146. };
  147. //默认方法
  148. $.fn.searchbox.methods = {
  149. //返回属性对象
  150. options: function (jq) {
  151. return $.data(jq[0], "searchbox").options;
  152. },
  153. //返回搜索类型菜单对象。下面的例子显示了更改菜单项图标
  154. menu: function (jq) {
  155. return $.data(jq[0], "searchbox").menu;
  156. },
  157. //返回文本框对象
  158. textbox: function (jq) {
  159. return $.data(jq[0], "searchbox").searchbox.find("input.searchbox-text");
  160. },
  161. //返回当前搜索值
  162. getValue: function (jq) {
  163. return $.data(jq[0], "searchbox").options.value;
  164. },
  165. //设置一个新的搜索值
  166. setValue: function (jq, value) {
  167. return jq.each(function () {
  168. $(this).searchbox("options").value = value;
  169. $(this).searchbox("textbox").val(value);
  170. $(this).searchbox("textbox").blur();
  171. });
  172. },
  173. //返回当前搜索类型名
  174. getName: function (jq) {
  175. return $.data(jq[0], "searchbox").searchbox.find("input.searchbox-text").attr("name");
  176. },
  177. //选择当前搜索类型名
  178. selectName: function (jq, name) {
  179. return jq.each(function () {
  180. var menu = $.data(this, "searchbox").menu;
  181. if (menu) {
  182. menu.children("div.menu-item[name=\"" + name + "\"]").triggerHandler("click");
  183. }
  184. });
  185. },
  186. //销毁该控件
  187. destroy: function (jq) {
  188. return jq.each(function () {
  189. var menu = $(this).searchbox("menu");
  190. if (menu) {
  191. menu.menu("destroy");
  192. }
  193. $.data(this, "searchbox").searchbox.remove();
  194. $(this).remove();
  195. });
  196. },
  197. //重置组件宽度
  198. resize: function (jq, width) {
  199. return jq.each(function () {
  200. _resize(this, width);
  201. });
  202. }
  203. };
  204. //解析器配置
  205. $.fn.searchbox.parseOptions = function (target) {
  206. var t = $(target);
  207. return $.extend({}, $.parser.parseOptions(target, ["width", "height", "prompt", "menu"]),
  208. { value: t.val(), searcher: (t.attr("searcher") ? eval(t.attr("searcher")) : undefined) });
  209. };
  210. //搜索框默认属性 事件
  211. $.fn.searchbox.defaults = {
  212. //组件宽度
  213. width: "auto",
  214. //组件高度
  215. height: 22,
  216. //在输入框中显示提示消息
  217. prompt: "",
  218. //输入的值
  219. value: "",
  220. //搜索类型菜单。每个菜单项都具备一下属性:
  221. //name:搜索类型名称。
  222. //selected:自定义默认选中的搜索类型名称
  223. menu: null,
  224. //在用户按下搜索按钮或回车键的时候调用searcher函数
  225. searcher: function (value, name) {
  226. }
  227. };
  228. })(jQuery);

示例代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Basic SearchBox - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../demo.css">
  9. <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
  10. <script src="../../plugins2/jquery.parser.js"></script>
  11. <script src="../../plugins2/jquery.menu.js"></script>
  12. <script src="../../plugins2/jquery.linkbutton.js"></script>
  13. <script src="../../plugins2/jquery.menubutton.js"></script>
  14. <script src="../../plugins2/jquery.searchbox.js"></script>
  15. </head>
  16. <body>
  17. <h2>Basic SearchBox</h2>
  18. <div class="demo-info">
  19. <div class="demo-tip icon-tip"></div>
  20. <div>Click search button or press enter key in input box to do searching.</div>
  21. </div>
  22. <div style="margin:10px 0;"></div>
  23. <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px"></input>
  24. <script>
  25. function doSearch(value){
  26. alert('You input: ' + value);
  27. }
  28. </script>
  29. </body>
  30. </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. java web和asp.net哪个做网站好

    asp.net上手容易但是精通困难,因为微软把控件都封装好,你只管用就行了,但是想学习它的原理很困难,asp.net一般适合快速开发一个项目.java web上手困难但比较容易学的深入,因为所有的东西 ...

  2. C# 3.0 LINQ to XML

    高级转换: static IEnumerable<XElement> ExpandPaths (IEnumerable<string> paths) { var brokenU ...

  3. Acitivity间数据的传递

    使用startActivityForResult方法进行数据传递.    MainActivity.java: public class MainActivity extends Activity { ...

  4. 不关闭seLinux解决vsftpd服务本地用户不能登录问题(500 OOPS: cannot change directory:/home/***

    这里不讲vsftpd的基本配置,网上教程已经太多了.这里只说seLinux的问题. 日前在CentOS6.5中安装了vsftpd,按照网上搜索的教程,配置好/etc/vsftpd/vsftpd.con ...

  5. 深入理解java的抽象类和接口(转载)

    原文链接:http://www.cnblogs.com/dolphin0520/p/3811437.html 对于面向对象编程来说,抽象是它的一大特征之一.在Java中,可以通过两种形式来体现OOP的 ...

  6. leetcode之Rectangle Area

    Find the total area covered by two rectilinear rectangles in a 2D plane. Each rectangle is defined b ...

  7. Bootstrap使用心得

    久闻Twitter的Bootstrap框架强大且易用,近日为改版小丸工具箱的官网特地花了一周实践. 这篇文章总结我在使用Bootstarp中的一些关键点. 1.布局 Bootstrap框架的布局采用了 ...

  8. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  9. tomcat错误信息解决方案【严重:StandardServer.await: create[8005]

    1.独立运行的tomcat.exe没有关闭,关闭tomcat图标并结束掉tomcat进程.(我是这个原因,在开始菜单里找到tomcat,然后stop它) 2.安装了其他的软件占用了8080端口,tom ...

  10. C++实用数据结构:二叉索引树

    看下面这个问题(动态连续和查询): 有一个数组A(长度为n),要求进行两种操作: add(i,x):让Ai增大x: query(a,b):询问Aa+Aa+1+...+Ab的和: 若进行模拟,则每次qu ...