Jquery Easyui自定义下拉框组件使用详解(21)


Posted in Javascript onDecember 31, 2020

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

加载方式

JS调用加载

自定义下拉框不能通过标签的方式进行创建。

<input id="box" />

 <script>
  $(function () {
   //JS 加载调用
   $('#box').combo({
    required : true,
    multiple : true,
   });
  });
</script>

属性列表

Jquery Easyui自定义下拉框组件使用详解(21)

<script>
  $('#box').combo({
   width : 300,
   height : 50,
   panelWidth : 300,
   panelHeight : 200,
   disabled : false,
   hasDownArrow : false,
   delay : 50,
   editable : true,
   readonly : false,
   required : true,
   multiple : true,
  });
 </script>

事件列表

Jquery Easyui自定义下拉框组件使用详解(21)

<script>
  $('#box').combo({
   required : true,
   multiple : true,
   onShowPanel : function () {
    alert('下拉的时候触发!');
   },
   onHidePanel : function () {
    alert('下拉面板隐藏的时候触发!');
   },
   onChange : function () {
    alert('字段值改变的时候触发!');
   },
  });
 </script>

方法列表

Jquery Easyui自定义下拉框组件使用详解(21)

//返回属性对象
  console.log($('#box').combo('options'));
  //返回下拉面板对象
  console.log($('#box').combo('panel'));
  //返回文本框对象
  console.log($('#box').combo('textbox'));
  //销毁组件
  $('#box').combo('destroy');
  //禁用和启用
  $('#box').combo('disable');
  $('#box').combo('enable');
  //调整到默认宽度
  $(document).click(function () {
   $('#box').combo('resize', 'width');
  });
  //显示下拉面板
  $(document).click(function () {
   $('#box').combo('showPanel');
  });
  //隐藏下拉面板
  $('#box').combo('hidePanel');
  //启用禁用,true 可不填,false 则为不启用
  $('#box').combo('readonly',true);
  //验证文本框内的值是否合法
  $(document).click(function () {
   console.log($('#box').combo('isValid'));
  });
  //清空文本框内容
  $(document).dblclick(function () {
   $('#box').combo('clear');
  });
  //重置文本框到初始状态
  $(document).dblclick(function () {
   $('#box').combo('reset');
  });
  //得到文本框字符串
  $(document).click(function () {
   console.log($('#box').combo('getText'));
  });
  //设置文本框字符串
  $(document).click(function () {
   console.log($('#box').combo('getText'));
  });
  //获取组件的 Value 值
  $(document).click(function () {
   console.log($('#box').combo('getValue'));
   console.log($('#box').combo('getValues'));
  });
  //可以使用$.fn.combo.defaults 重写默认值对象。

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

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 #Javascript
前端js弹出框组件使用方法
Aug 24 #Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 #Javascript
教你一步步用jQyery实现轮播器
Dec 18 #Javascript
Angular.js实现注册系统的实例详解
Dec 18 #Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 #Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 #Javascript
You might like
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
composer.lock文件的作用
2016/02/03 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python如何从文件读取数据及解析
2019/09/19 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
Python实现EM算法实例代码
2020/10/04 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
2014年林业工作总结
2014/12/05 职场文书
城管年度个人总结
2015/02/28 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Tomcat配置访问日志和线程数
2022/05/06 Servers