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(搜索框)组件的更多相关文章

  1. 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  2. SearchBox( 搜索框) 组件

    一. 加载方式//class 加载方式<input id="ss" class="easyui-searchbox" style="width: ...

  3. EasyUI - SearchBox 搜索框

    效果: html代码: <input id="ss"/> <div id="mm"> <div data-options=&quo ...

  4. 第二百一十六节,jQuery EasyUI,Spinner(微调)组件

    jQuery EasyUI,Spinner(微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个 ...

  5. 第二百一十四节,jQuery EasyUI,Calendar(日历)组件

    jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法 ...

  6. 第二百二十六节,jQuery EasyUI,Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...

  7. 第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件

    jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...

  8. 第二百零九节,jQuery EasyUI,Pagination(分页)组件

    jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使 ...

  9. 第二百零六节,jQuery EasyUI,Menu(菜单)组件

    jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法, ...

随机推荐

  1. JBPM5流程设计器jbpm-designer-2.4.0.Final-tomcat.war的部署没法访问的问题

    转自:http://blog.csdn.net/steveguoshao/article/details/8840607 在http://sourceforge.net/projects/jbpm/f ...

  2. RESTful最佳实践

    哲学 不要为了RESTful而RESTful 在能表达清楚的情况下,简单就是美 接口路径设计 接口设计原则 URI指向的是唯一的资源对象 示例: 指向ID为yanbo.ai的Account对象 GET ...

  3. Hibernate关系映射(三) 多对多

    一.使用用户User和Role实现多对多的示例 User.java,实现对Role的引用 package com.lxit.entity; import java.util.HashSet; impo ...

  4. linux下Oracle11g RAC搭建(二)

    linux下Oracle11g RAC搭建(二) 一.安装前配置 网络的配置 IP占用測试 进入windows下.运行cmd,使用ping命令验证网段是否被占用. 注:用哪个网段都行,一定保证不要被其 ...

  5. 【Linux】Ctentos下载

    百度输入:Download Centos 在百度搜索Download Centos然后进入Centos下载官网 点击上述标记的Download Centos,则会出现如下界面,并且点击"Mo ...

  6. c++对象模型介绍

    http://www.cnblogs.com/skynet/p/3343726.html

  7. HTML-HTML5+CSS3权威指南阅读(三、CSS选择器)

    1.伪元素选择器 first-line, first-letter, before, after 2.属性选择器 [attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, ...

  8. <转>得到其它进程的命令行

    #include <windows.h> #include <stdio.h> #define ProcessBasicInformation 0 typedef struct ...

  9. mac 使用apache开启https功能,实现ios局域网内测(一)

    笔者尝试了网上各种办法最后还是找到了方法解决了一系列局域网内测的问题,随手做个笔记记录下,亲测可行. 一.先生成证书 1.进入apache web 的根目录处理证书命令 cd /Library/Web ...

  10. 【转】可在广域网部署运行的即时通讯系统 -- GGTalk总览(附源码下载)

    原文地址:http://www.cnblogs.com/justnow/p/3382160.html (最新版本:V6.0,2017.12.11 .即将推出Xamarin移动端版本,包括 Androi ...