Jquery Easyui搜索框组件SearchBox使用详解（19）

2024-10-27 18:03:55

本文实例为大家分享了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 重写默认值对象。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Jquery Easyui菜单组件Menu使用详解（15）

本文实例为大家分享了Jquery Easyui菜单组件的实现代码,供大家参考,具体内容如下加载方式菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件.然后,再通过 JS 事件部分再响应. <div id="box" class="easyui-menu"> <div>新建</div> <div> <span>打开</span> <!--二次菜单--&
JQuery EasyUI的一些常用组件

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <
Jquery Easyui自定义下拉框组件使用详解（21）

本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下加载方式 JS调用加载自定义下拉框不能通过标签的方式进行创建. <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> 属性列表 <script>
jQuery EasyUI基础教程之EasyUI常用组件(推荐)

本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础).Layout(布局).菜单和按钮.表单.窗口.表格和树等的使用.要求完全掌握这些内容,学会查阅文档,了解开发基本思想.如果想进一步深入学习,可以直接去官网进行学习,查阅文档等http://www.jeasyui.com/. 一.简介 EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库. 主要可以用于web的后台前端.jQuery EasyUI 提供易
Jquery组件easyUi实现手风琴(折叠面板)示例

本文是为大家分享了Jquery easyUi手风琴效果,供大家参考,具体内容如下效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Accordion - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css&qu
Jquery Easyui选项卡组件Tab使用详解（10）

本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 <div class="easyui-tabs" style="width: 400px;height: 250px"> <div title="Tab1" data-options="closable:true"> tab1 </div> <div title=&q
Jquery Easyui进度条组件Progress使用详解（8）

本文实例为大家分享了Jquery Easyui进度条组件的实现代码,供大家参考,具体内容如下加载方式 Class加载 <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> JS调用加载 <div id="box" style="width: 400px;">
Jquery下EasyUI组件中的DataGrid结果集清空方法

我们有一个模块如下图,要求选择"地区"及"代维公司"后,刷新第一个DataGrid框体并以第一个结果集中的行为数据条件点击完成下一个框体的检索现在我们已完成相应功能,并在选择"地区"及"代维公司"并保证这两个选项同时有值后,自动刷新第一个DataGrid(DG1)结果集但是在DG1刷新完毕后,后面两个紧跟的DG2及DG3还是保有之前的结果我试图更改DG2及DG3的查询条件,手动传一个空的ID值给query()方法,但是
jQuery EasyUI框架中的Datagrid数据表格组件结构详解

基础DOM结构什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- da
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="b
Jquery Easyui表单组件Form使用详解（30）

本文实例为大家分享了Jquery Easyui表单组件的实现代码,供大家参考,具体内容如下加载方式表单组件只能在 JS 区域设置,首先定义一张表单. <form id="box" method="post"> <div> <label for="name">Name:</label> <input class="easyui-validatebox" type=&quo
Jquery Easyui分割按钮组件SplitButton使用详解（17）

SpliButton组件依赖于Menu(菜单)组件和 LinkButton(按钮)组件加载方式 Class加载 <a href="javascript:void(0)" id="edit" class="easyui-splitbutton" data-options="menu:'#box',iconCls:'icon-edit'">编辑</a> <div id="box"
Android顶部(toolbar)搜索框实现的实例详解

Android顶部(toolbar)搜索框实现的实例详解本文介绍两种SearchView的使用情况,一种是输入框和搜索结果不在一个activity中,另一种是在一个activity中. 首先编写toolbar的布局文件 toolbar中图标在menu文件下定义一个布局文件实现示例代码: <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.
微信小程序使用uni-app实现首页搜索框导航栏功能详解

目录前言一.兼容APP与H5的方式二.兼容小程序三.实现同时兼容前言首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 App.H5效果小程序效果一.兼容APP与H5的方式在常见titleNView配置代码示例中可以看到基本样式的代码如下 { "pages": [{ "path": "pages/index/index", //首页 "style"
jQuery Chart图表制作组件Highcharts用法详解

本文实例讲述了jQuery Chart图表制作组件Highcharts用法.分享给大家供大家参考,具体如下: Highcharts是一个制作图表的纯Javascript类库,主要特性如下: ① 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: ② 对个人用户完全免费: ③ 纯JS,无BS: ④ 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: ⑤ 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highchar
微信小程序下拉框组件使用方法详解

本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me
jquery实现搜索框功能实例详解

搜索框实现搜索一个ul列表中的指定关键词的li. html代码: <ul class="todo-content"> <li class="todo-ltem"> <div class="todo-tip"> <p>fhasjfas</p> </div> <div class="todo-btnlist"> <button class=&
jQuery EasyUI Panel面板组件使用详解

panel面板组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <scr

Jquery Easyui搜索框组件SearchBox使用详解（19）

相关推荐

随机推荐