iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
1
Modern Web

30天學習30套前端技術(2018年)系列 第 6

[十分鐘學習] Chosen - 下拉式選單全面進化

example1

Chosen是一套jQuery的套件,目的是讓又長又笨重的下拉式選單變得更友善

GitHub Star: 21,000
Javascripting Overall: 91%
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- Chosen v1.8.2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>
    
  • npm

    $ npm install chosen-js
    
  • Bower

    $ bower install chosen
    

《範例》

  • 可搜尋下拉選單

    <select class="example" />
    	<option>Tom</option>
    	...
    </select>
    <script>
    	$( ".example" ).chosen();
    </script>
    
  • 多選式下拉選單

    example2

    <select class="example" multiple style="width: 300px" >
    	<option value="Tom">Tom</option>
    	...
    </select>
    <script>
    	$( ".example" ).chosen();
    </script>
    

《延伸》

  1. Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
  2. harvesthq/chosen: Chosen is a library for making long, unwieldy select boxes more friendly.

上一篇
[十分鐘學習] pickadate.js - 日期/時間選擇器
下一篇
[十分鐘學習] typeahead.js - 文字欄位顯示建議列表
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言