Dropdown.js

琅琊丶發表於2017-06-21
JS

前言

在SPA(Single Page Application)盛行的時代，jQuery外掛的輪子正在減少，由於我廠有需求而開發了這個外掛。
如果覺得本文對您有幫助，請給個贊,以表對我的鼓勵和支援。(๑•ᴗ•๑)
如果覺得有什麼問題，可以到 Github 提Issue，歡迎大家提意見~

介紹

Dropdown是面向PC端的基於jQuery開發的輕量級下拉框外掛，支援key/value搜尋，有token和select兩種模式。

Github

github.com/Janking/dro…

版本

  • 1.0.0

支援

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

依賴於

  • jQuery 1.4+

特性

  1. 支援 select 和 token 兩種模式
  2. 支援 optgroup 分組
  3. 保留原生 select 的鍵盤操作
  4. 資料來源可以直接通過介面 data 注入，也可以直接渲染 select > option ，由外掛自動轉換。
  5. 外掛同步 select 和 ul>li 標籤，便於表單欄位提交及前端校驗，

原理

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

Dropdown.js

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(){}

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標籤需手動設定隱藏 -->
    <select style="display:none"  name="" id="" multiple placeholder="請選擇">
        <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);
  }
});複製程式碼

Example

janking.github.io/dropdown/