当前位置： 首页 > news >正文

第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件

news 来源：原创 2024/5/10 6:39:34

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 重写默认值对象。见前面章节

 

转载于:https://www.cnblogs.com/adc8868/p/6662904.html

相关文章：

  • UVa 10917 林中漫步
  • Ruby 写文件
  • Python学习日记之读取中文目录
  • STL List::sort() 解析
  • 饥饿鲨鱼进化-破解篇
  • 内存操作函数memcpy和memmove详解
  • 【原】STM32的USART与SPI是可以直接通讯
  • django自定义signal的发送和接收样例
  • MVC开发中的常见错误-07-“System.IO.DirectoryNotFoundException”类型的未经处理的异常在 mscorlib.dll 中发生...
  • 你必须要了解的几种排序方法
  • 补交 作业二：个人博客作业内容：需求分析
  • poj-1741 (点分治模板)
  • 分库分表中间件特性分析
  • 百科知识 scm文件如何打开
  • PHP之旅3 php数组以及遍历数组 以及each() list() foreach()
  • Android Studio：GIT提交项目到远程仓库
  • CSS 三角实现
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • JavaScript标准库系列——Math对象和Date对象（二）
  • Java知识点总结（JDBC-连接步骤及CRUD）
  • JDK 6和JDK 7中的substring（）方法
  • js中forEach回调同异步问题
  • k8s如何管理Pod
  • leetcode98. Validate Binary Search Tree
  • uva 10370 Above Average
  • vue总结
  • Webpack4 学习笔记 - 01：webpack的安装和简单配置
  • Windows Containers 大冒险: 容器网络
  • 阿里云Kubernetes容器服务上体验Knative
  • 从零开始的webpack生活-0x009：FilesLoader装载文件
  • 七牛云 DV OV EV SSL 证书上线，限时折扣低至 6.75 折！
  • 浅谈web中前端模板引擎的使用
  • 区块链技术特点之去中心化特性
  • 如何设计一个比特币钱包服务
  • 如何抓住下一波零售风口？看RPA玩转零售自动化
  • 突破自己的技术思维
  • 想使用 MongoDB ，你应该了解这8个方面！
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • ​虚拟化系列介绍（十）
  • # 计算机视觉入门
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • （14）学习笔记：动手深度学习（Pytorch神经网络基础）
  • （介绍与使用）物联网NodeMCUESP8266（ESP-12F）连接新版onenet mqtt协议实现上传数据（温湿度）和下发指令（控制LED灯）
  • (循环依赖问题)学习spring的第九天
  • （转）Unity3DUnity3D在android下调试
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**
  • .[hudsonL@cock.li].mkp勒索病毒数据怎么处理|数据解密恢复
  • .equals()到底是什么意思？
  • .naturalWidth 和naturalHeight属性，
  • .net 4.0 A potentially dangerous Request.Form value was detected from the client 的解决方案
  • .Net Winform开发笔记（一）
  • .net 后台导出excel ,word
  • .net 托管代码与非托管代码
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .NET关于 跳过SSL中遇到的问题