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中变量相关的细节分析
Aug 13 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
flexible.js实现移动端rem适配方案
Apr 07 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 CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
return false;和e.preventDefault();的区别
2010/07/11 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Keras设置以及获取权重的实现
2020/06/19 Python
python与idea的集成的实现
2020/11/20 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
资料员岗位职责
2013/11/17 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
采购部部门职责
2013/12/15 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
营销总监岗位职责
2014/09/16 职场文书
小学重阳节活动总结
2015/03/24 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
大学生就业意向书
2015/05/11 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
聊一聊python常用的编程模块
2021/05/14 Python