第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件
jQuery EasyUI，SearchBox(搜索框)组件
学习要点：
1.加载方式
2.属性列表
3.方法列表
本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法，这个组件依赖于 MenuButton(按钮)组件。
一．加载方式
class 加载方式
<!--搜索框-->
<input id="ss" class="easyui-searchbox" style="width:300px" data-options="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>
searchbox()将符合规则的元素执行搜索框方法
js加载
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
searcher: function (value, name) {
alert(value + ',' + name);
},
menu: '#box',
prompt: '请输入内容',
});
});
二．属性列表
width number 组件宽度。默认为 auto。
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box',
prompt: '请输入内容'
});
});
height number 组件高度。默认为22。
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box',
prompt: '请输入内容'
});
});
prompt string 在输入框中显示提示消息。
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box',
prompt: '请输入内容'
});
});
value string 输入的值。默认value值
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box',
// prompt: '请输入内容',
value:55555
});
});
menu selector搜索类型菜单。每个菜单项都具备一下属性：绑定频道id
name：搜索类型名称。
selected：自定义默认选中的搜索类型
名称。 默认值为 null。
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
});
});
searcher Function(value,name)在用户按下搜索按钮或回车键的时候调用 searcher 函数。默认值为 null。
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
});
disabled boolean 是否禁用搜索框。默认为 false。
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
disabled:true,
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
});
三．方法列表
options none 返回属性对象。
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
//设置图标和name
<div data-options="name:'all',iconCls:'icon-ok'">体育</div>
//设置图标和name
<div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
disabled:true,
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
alert($('#ss').searchbox('options')); //返回属性对象
});
menu none 返回搜索类型菜单对象。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
disabled:true,
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
alert($('#ss').searchbox('menu')); //返回属性对象
});
设置频道图标
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
var m = $('#ss').searchbox('menu');
m.menu('setIcon', {
target : m.menu('findItem', '建材').target,
iconCls : 'icon-save'
});
});
textbox none 返回文本框对象。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
disabled:true,
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
alert($('#ss').searchbox('textbox')); //返回文本框对象
});
getValue none 返回当前搜索值。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
alert($('#ss').searchbox('getValue')); //返回当前搜索值
});
setValue value 设置一个新的搜索值。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
alert($('#ss').searchbox('setValue','88888')); //设置一个新的搜索值。
});
getName none 返回当前搜索类型名。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
alert($('#ss').searchbox('getName')); //返回当前搜索类型名。
});
selectName name 选择当前搜索类型名。指定搜素类型，值为name
/**
<!--搜索框-->
<input id="ss">
<!--频道按钮-->
<div id="box">
<div name="all" data-options="iconCls:'icon-ok'">体育</div>
<div name="ghj" data-options="iconCls:'icon-ok'">建材</div>
</div>
**/ $(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
$('#ss').searchbox('selectName','ghj'); //指定搜素类型，值为name
});
destroy none 销毁该控件。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
$('#ss').searchbox('destroy'); //销毁该控件
});
resize width 重置组件宽度。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
$('#ss').searchbox('resize',200); //重置组件宽度
});
disable none 禁用组件。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
$('#ss').searchbox('disable'); //禁用组件
});
enable none 启用组件。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
$('#ss').searchbox('enable'); //启用组件
});
clear none 清理搜索框内容。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
$('#ss').searchbox('clear'); //清理搜索框内容
});
reset none 重置搜索框内容。
$(function () {
$('#ss').searchbox({
width:800,
height:40,
menu: '#box', //绑定频道id
prompt: '请输入内容',
searcher:function (value,name) {
alert('用户按下搜索按钮或回车键的时候触发');
alert('接收当前值：' + value + '|' + '接收当前频道：' + name);
}
});
$('#ss').searchbox('reset'); //重置搜索框内容
});
我们可以使用$.fn.searchbox.defaults 重写默认值对象。见前面章节
第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件的更多相关文章
- 第二百一十二节，jQuery EasyUI，Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
- SearchBox( 搜索框) 组件
一． 加载方式//class 加载方式<input id="ss" class="easyui-searchbox" style="width: ...
- EasyUI - SearchBox 搜索框
效果: html代码: <input id="ss"/> <div id="mm"> <div data-options=&quo ...
- 第二百一十六节，jQuery EasyUI，Spinner(微调)组件
jQuery EasyUI,Spinner(微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个 ...
- 第二百一十四节，jQuery EasyUI，Calendar(日历)组件
jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法 ...
- 第二百二十六节，jQuery EasyUI，Tree(树)组件
jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...
- 第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...
- 第二百零九节，jQuery EasyUI，Pagination(分页)组件
jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...
- 第二百零六节，jQuery EasyUI，Menu(菜单)组件
jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...
随机推荐
- SQL多表连接查询（具体实例）
本文主要列举两张和三张表来讲述多表连接查询. 新建两张表: 表1:student 截图例如以下: 表2:course 截图例如以下: (此时这样建表仅仅是为了演示连接SQL语句.当然实际开发中我们 ...
- python读取文件特定的行数
from itertools import islice f=open("pyhpd.txt") for a in islice(f,2,6): print(a)
- JMeter 六：Listener
参考:http://jmeter.apache.org/usermanual/listeners.html Listener是用来展示Sampler结果的元件. 结果可以被展示在树.表格.图表或者简单 ...
- Hibernate关系映射（二） 基于外键的双向一对一
基于外键的双向一对一关联映射 需要在一端添加<one-to-one>标签,用property-ref来指定反向属性引用. 还是通过刚才用户和地址来演示双向一对一关联. 代码演示 一.实体类 ...
- jQuery实现滚动栏一直处于最底部
相信大家有时候在展示一些实时数据展示并且数据量非常大的时候,由于无法在同一页面看到最有效的数据,所以我们须要将滚动栏至于底部.以便我们看到最须要的数据和信息.这里非常明显的样例那拿windows的pi ...
- 使用xml-rpc调试openerp模块中的函数
运行openerp模块中的函数 有很多方式, 可以在视图中加个按钮然后点击它, 也可以在集成开发环境中强制执行它. 不过, 用python写个小脚本,xml-rpc调用直接执行它, 无疑是最简便的方法 ...
- [Exception IOS 4] - could not build module 'foundation'
出现这个问题首先百度找到的是:http://www.cocoachina.com/bbs/read.php?tid=188086 然后在blog中能找到链接:http://stackoverflow. ...
- oracle事务块示例
begin Insert into T_SYS_PAGEOPER (FOPERID,FPAGEID) values (152,22); Insert into T_SYS_PAGEOPER (FOPE ...
- python 去掉字符串的 "
list_name = ["hello", "岚", "许言午", "公司", "赵六", &quo ...
- Vue 中的生命周期和钩子函数
生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...