无遮挡亚洲一区,欧美性猛交xxxx乱大交3,国产国语刺激对白av不卡,在线播放亚洲激情

素材8網-專注前端素材！

jQuery下拉菜單選中搜索框插件代碼

  • 1930
  • 0
  • 0
jQuery下拉菜單選中搜索框插件代碼- 素材8

Dropdown

Dropdown是面向PC端的基于jQuery開發的輕量級下拉框插件，支持key/value搜索，有token和select兩種模式。

Version

1.1.1

Support
  • Internet Explorer 8+
  • Chrome for PC
  • Safari for PC
  • Firefox for PC

Based

jQuery 1.4+

Log
  • 2017-06-24 version 1.1.0

            a)  多選 select模式下增加一個 全部刪除 按鈕

            b)  新增 changeStatus 方法，提供readonly,disabled功能

            c)  新增 destroy,bindEvent,unbindEvent 方法

  • 2017-06-21 version 1.0.0 上線

Feature
  • 支持 select 和 token 兩種模式
  • 支持 optgroup 分組
  • 保留原生 select 的鍵盤操作
  • 數據源可以直接通過接口 data 注入，也可以直接渲染 select>option ，由插件自動轉換。
  • 插件同步 select 和 ul>li 標簽，便于表單字段提交及前端校驗，

Principle

程序設計原理如下圖所示：

jQuery下拉菜單選中搜索框插件代碼- 素材8



在一些前端渲染的場景，JSON數據是通過AJAX請求的，如果再拼成<option value="yyy">xxx</option> 就有點多余了。 在這種情況下，建議直接將JSON數據轉為以下這種格式：
  1. [
  2.     {
  3.       "id": 1, // value值
  4.       "disabled": false, // 是否禁選
  5.       "groupName": "分組名",  
  6.       "groupId": 3,//分組ID
  7.       "selected": false, // 是否選中
  8.       "name": "Betty Deborah Jackson" // 名稱
  9.     },
  10.     {
  11.       "id": 2,
  12.       "disabled": false,
  13.       "groupName": "分組名",
  14.       "groupId": 2,
  15.       "selected": false,
  16.       "name": "Jason Barbara Clark"
  17.     }
  18.     // more ...
  19.     ]
復制代碼
Dropdown 會根據這個JSON來渲染 select > option
Options
名稱 描述 類型 默認
readOnly 是否只讀 Boolean false   
limitCount 選擇上限 Number Infinity   
input 搜索框模板 HTML <input type="text" maxLength="20" placeholder="搜索關鍵詞或ID">  
data 數據源 Array []   
searchable 是否可開啟搜索 Boolean true   
searchNoData 無數據模板 HTML <li style="color:#ddd">查無數據，換個詞兒試試 /(ㄒoㄒ)/~~</li>
choice 選擇后回調函數 Function function(){}   

Methods

changeStatus(status)


參數 類型 描述
status String 支持readonly或disabled，不傳則取消readonly/disabled   
return undefined
  1. var dropdown = $('selector').dropdown(options).data('dropdown');
  2. dropdown.changeStatus('readonly') // readonly
  3. dropdown.changeStatus('disabled') // disabled
  4. dropdown.changeStatus() // cancel
復制代碼


destroy()
參數 類型 描述
status String 支持readonly或disabled，不傳則取消readonly/disabled
return undefined
  1. var dropdown = $('selector').dropdown(options).data('dropdown');
  2. dropdown.destroy();
復制代碼

Usage

引入

  1. <script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
  2. <link rel="stylesheet" type="text/css" href="./jquery.dropdown.css">
  3. <script src="./jquery.dropdown.js"></script>
復制代碼

HTML 部分

  1. <div class="dropdown-mul-1">
  2.    <!-- PS: select標簽需手動設置隱藏 -->
  3. <select style="display:none"  name="" id="" multiple placeholder="請選擇">
  4.     <option value="1">1</option>
  5.     <option value="2">2</option>
  6.     <option value="3">3</option>
  7.     <option value="4">4</option>
  8.     <option value="5">5</option>
  9.     <option value="6">6</option>
  10.     <option value="7">7</option>
  11.     <option value="8">8</option>
  12.     <option value="9">9</option>
  13.     <option value="10">10</option>
  14.     <option value="11">11</option>
  15.     <option value="12">12</option>
  16. </select>
  17. </div>
復制代碼

JavaScript 部分

  1. $('.dropdown-mul-1').dropdown({
  2.   limitCount: 40,
  3.   multipleMode: 'label',
  4.   choice: function () {
  5.     console.log(arguments,this);
  6.   }
  7. });
復制代碼
jQuery下拉菜單選中搜索框插件代碼
  • 山不在高 剛剛下載了一個素材
  • 劍膽琴心 剛剛下載了一個素材
  • Kent 剛剛下載了一個素材
  • Cassius 剛剛下載了一個素材
  • 金維 剛剛下載了一個素材
  • qqHpVD 剛剛下載了一個素材
  • 超哥來疼你 剛剛下載了一個素材
  • 傳聞中的張先生Y 剛剛下載了一個素材
  • qq皮皮皮rPZ 剛剛下載了一個素材
  • 向陽生長 剛剛下載了一個素材
  • KONLI 剛剛下載了一個素材
  • 冠王創客 剛剛下載了一個素材
  • whisper1 剛剛下載了一個素材
  • 無言微笑 剛剛下載了一個素材
  • Am4862 剛剛下載了一個素材
分享者：
分享者頭像
小編
熱門素材推薦
HTML素材網，HTML5模板，網頁特效 微信公眾賬號二維碼 淘寶店鋪地址二維碼
Copyright©2024  素材8  Powered by 智伙伴科技
   魯ICP備14029286號-5 魯公網安備37060202001967號
返回頂部返回頂部
發布主題
主站蜘蛛池模板： 林甸县| 措美县| 宜阳县| 旬邑县| 宁化县| 湟源县| 河南省| 长岭县| 乐平市| 克拉玛依市| 门源| 桃源县| 藁城市| 鄂州市| 阿巴嘎旗| 阿图什市| 库尔勒市| 遵化市| 临漳县| 曲阳县| 永年县| 华池县| 中宁县| 贺兰县| 柳江县| 四平市| 遵义市| 平和县| 芜湖市| 乌鲁木齐县| 吉隆县| 平陆县| 洛宁县| 民乐县| 五河县| 太仓市| 苏州市| 阳西县| 莲花县| 全州县| 建平县|