DropdownDropdown是面向PC端的基于jQuery開發(fā)的輕量級(jí)下拉框插件，支持key/value搜索，有token和select兩種模式。 Version1.1.1
SupportInternet Explorer 8+ Chrome for PC Safari for PC Firefox for PC
BasedjQuery 1.4+ Log a) 多選 select模式下增加一個(gè) 全部刪除 按鈕 b) 新增 changeStatus 方法，提供readonly,disabled功能 c) 新增 destroy,bindEvent,unbindEvent 方法 FeaturePrinciple程序設(shè)計(jì)原理如下圖所示：
在一些前端渲染的場(chǎng)景，JSON數(shù)據(jù)是通過AJAX請(qǐng)求的，如果再拼成<option value="yyy">xxx</option> 就有點(diǎn)多余了。 在這種情況下，建議直接將JSON數(shù)據(jù)轉(zhuǎn)為以下這種格式：
- [
- {
- "id": 1, // value值
- "disabled": false, // 是否禁選
- "groupName": "分組名",
- "groupId": 3,//分組ID
- "selected": false, // 是否選中
- "name": "Betty Deborah Jackson" // 名稱
- },
- {
- "id": 2,
- "disabled": false,
- "groupName": "分組名",
- "groupId": 2,
- "selected": false,
- "name": "Jason Barbara Clark"
- }
- // more ...
- ]
Options| 名稱 | 描述 | 類型 | 默認(rèn) | | readOnly | 是否只讀 | Boolean | false | | limitCount | 選擇上限 | Number | Infinity | | input | 搜索框模板 | HTML | <input type="text" maxLength="20" placeholder="搜索關(guān)鍵詞或ID"> | | data | 數(shù)據(jù)源 | Array | [] | | searchable | 是否可開啟搜索 | Boolean | true | | searchNoData | 無數(shù)據(jù)模板 | HTML | <li style="color:#ddd">查無數(shù)據(jù)，換個(gè)詞兒試試 /(ㄒoㄒ)/~~</li> | | choice | 選擇后回調(diào)函數(shù) | Function | function(){} |
MethodschangeStatus(status)
| 參數(shù) | 類型 | 描述 | | status | String | 支持readonly或disabled，不傳則取消readonly/disabled | | return | undefined | |
- var dropdown = $('selector').dropdown(options).data('dropdown');
- dropdown.changeStatus('readonly') // readonly
- dropdown.changeStatus('disabled') // disabled
- dropdown.changeStatus() // cancel
destroy()
| 參數(shù) | 類型 | 描述 | | status | String | 支持readonly或disabled，不傳則取消readonly/disabled | | return | undefined | |
- var dropdown = $('selector').dropdown(options).data('dropdown');
- dropdown.destroy();
Usage引入 - <script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
- <link rel="stylesheet" type="text/css" href="./jquery.dropdown.css">
- <script src="./jquery.dropdown.js"></script>
HTML 部分 - <div class="dropdown-mul-1">
- <!-- PS: select標(biāo)簽需手動(dòng)設(shè)置隱藏 -->
- <select style="display:none" name="" id="" multiple placeholder="請(qǐng)選擇">
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- <option value="5">5</option>
- <option value="6">6</option>
- <option value="7">7</option>
- <option value="8">8</option>
- <option value="9">9</option>
- <option value="10">10</option>
- <option value="11">11</option>
- <option value="12">12</option>
- </select>
- </div>
JavaScript 部分 - $('.dropdown-mul-1').dropdown({
- limitCount: 40,
- multipleMode: 'label',
- choice: function () {
- console.log(arguments,this);
- }
- });
|
收藏
點(diǎn)贊
反對(duì)
