Jquery Easyui自定義下拉框組件使用詳解（21）

更新時(shí)間：2020年12月31日 10:06:26 作者：Jsakura

這篇文章主要為大家詳細(xì)介紹了Jquery Easyui自定義下拉框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Jquery Easyui自定義下拉框組件的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

加載方式

JS調(diào)用加載

自定義下拉框不能通過標(biāo)簽的方式進(jìn)行創(chuàng)建。

 <input id="box" />

 <script>
  $(function () {
   //JS 加載調(diào)用
   $('#box').combo({
    required : true,
    multiple : true,
   });
  });
</script>

屬性列表

<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>

事件列表

 <script>
  $('#box').combo({
   required : true,
   multiple : true,
   onShowPanel : function () {
    alert('下拉的時(shí)候觸發(fā)！');
   },
   onHidePanel : function () {
    alert('下拉面板隱藏的時(shí)候觸發(fā)！');
   },
   onChange : function () {
    alert('字段值改變的時(shí)候觸發(fā)！');
   },
  });
 </script>

方法列表

//返回屬性對象
  console.log($('#box').combo('options'));
  //返回下拉面板對象
  console.log($('#box').combo('panel'));
  //返回文本框?qū)ο?
  console.log($('#box').combo('textbox'));
  //銷毀組件
  $('#box').combo('destroy');
  //禁用和啟用
  $('#box').combo('disable');
  $('#box').combo('enable');
  //調(diào)整到默認(rèn)寬度
  $(document).click(function () {
   $('#box').combo('resize', 'width');
  });
  //顯示下拉面板
  $(document).click(function () {
   $('#box').combo('showPanel');
  });
  //隱藏下拉面板
  $('#box').combo('hidePanel');
  //啟用禁用，true 可不填，false 則為不啟用
  $('#box').combo('readonly',true);
  //驗(yàn)證文本框內(nèi)的值是否合法
  $(document).click(function () {
   console.log($('#box').combo('isValid'));
  });
  //清空文本框內(nèi)容
  $(document).dblclick(function () {
   $('#box').combo('clear');
  });
  //重置文本框到初始狀態(tài)
  $(document).dblclick(function () {
   $('#box').combo('reset');
  });
  //得到文本框字符串
  $(document).click(function () {
   console.log($('#box').combo('getText'));
  });
  //設(shè)置文本框字符串
  $(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 重寫默認(rèn)值對象。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: