收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

Jquery Easyui搜索框组件SearchBox使用详解(19)

本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下

加载方式

Class加载

 <input id="ss" class="easyui-searchbox" style="width:300px"
   data-options="prompt:'Please Input Value',menu:'#box'">

 </input>
 <div id="box" style="width:120px">
  <div data-options="name:'all',iconCls:'icon-ok'">所有新闻</div>
  <div data-options="name:'sports'">?鱼新闻</div>
 </div>

JS调用加载

 <input id="ss" />
 </input>
 <div id="box" style="width:120px">
  <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
  <div data-options="name:'sports'">Sports News</div>
 </div>

 <script>
  $(function () {
   $('#ss').searchbox({
    // 组件宽度
    width : 500,
    // 组件高度
    height: 30,
    // 输入的值
    value : 'spord',
    // 在用户按下搜索按钮或回车键的时候调用 searcher 函数
    searcher : function (value, name) {
     alert(value + ',' + name);
    },
    // 搜索类型菜单
    menu : '#box',
    // 在输入框中显示提示消息。
    prompt : '请输入内容',
    // 是否禁用搜索框
    disabled: false
   });
  });
 </script>

属性列表

查看图片

方法列表

查看图片

   //返回属性对象
   console.log($('#ss').searchbox('options'));
   //返回文本框对象
   console.log($('#ss').searchbox('textbox'));
   //返回当前索引值
   console.log($('#ss').searchbox('getValue'));
   //改变当前索引值
   $('#ss').searchbox('setValue','改变值')
   //选择指定的搜索类型
   $('#ss').searchbox('selectName', 'sports');
   //返回当前索引类型值
   console.log($('#ss').searchbox('getName'));
   //重置搜索框宽度
   $('#ss').searchbox('resize', 200);
   //销毁搜索框
   $('#ss').searchbox('destroy');
   //禁用和启用
   $('#ss').searchbox('disable');
   $('#ss').searchbox('enable');
   //清理搜索框内容
   $('#ss').searchbox('clear');
   //重置搜索框内容
   $(document).dblclick(function () {
    $('#ss').searchbox('reset');
   });
   //返回类型名对象
   var m = $('#ss').searchbox('menu');
   var item = m.menu('findItem', '体育');
   m.menu('setIcon', {
    target: item.target,
    iconCls: 'icon-save'
   });
   //可以使用$.fn.searchbox.defaults 重写默认值对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

教你一步步用jQyery实现轮播器
实现原理如图,试想一下,若是将ul的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用li包着并且设置了左浮动。那么当我们向

Jquery Easyui日历组件Calender使用详解(23)
本文实例为大家分享了JqueryEasyui日历组件的实现代码,供大家参考,具体内容如下加载方式Class加载divid="box"class="easyui-calendar"style="width:200px;height:200px;"/d

Jquery Easyui自定义下拉框组件使用详解(21)
本文实例为大家分享了JqueryEasyui自定义下拉框组件的实现代码,供大家参考,具体内容如下加载方式JS调用加载自定义下拉框不能通过标签的方式进行创

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号