jQuery扁平化風格下拉框美化插件FancySelect使用指南_jquery

FancySelect是一款小巧實用的jQuery下拉框美化插件。此下拉框美化外掛程式採用扁平化設計風格，是追求時尚的開發者的首選下拉框美化外掛程式之一。

使用方法

HTML結構

FancySelect實用十分簡單，它可以和jQuery或Zepto結合使用。在頁面中放置一些 下拉方塊元件，然後就可以透過 .fancySelect() 方法來呼叫該下拉方塊插件。如果下拉框中有某個選項沒有值，該外掛程式會使用某種佔位文字來取代它。

預設情況下，FancySelect 在 iOS 裝置上僅使用原生的下拉方塊和樣式。如果你想覆蓋它，在下拉框插件初始化的時候設定 forceiOS 為 true 即可。

FancySelect 也可以透過 元素的 data-class 屬性來指定樣式，你可以透過這個方法來指定不同樣式的select下拉方塊。

複製程式碼 程式碼如下:

  Select something…
  Lorem
  Ipsum
  Dolor
  Sit
  Amet

JAVASCRIPT

複製程式碼 程式碼如下:

$('.basic').fancySelect();

更新options

如果你的下拉框的 options 在插件初始化後被修改了，你可以透過在下拉框上觸發 update.fs 方法來告訴插件更新options列表。

複製程式碼 程式碼如下:

var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');

啟用/停用下拉框

FancySelect 下拉方塊外掛程式會在初始化後自動將下拉方塊設為 disabled 停用狀態。如果你需要重新設定下拉方塊的狀態，可以在 select 元素上使用 enable.fs 或 disable.fs 方法來修改它們。

複製程式碼 程式碼如下:

    First Option
    Second Option

var mySelect = $('.my-select');
mySelect.fancySelect(); // currently disabled because of html property
// later…
mySelect.trigger('enable.fs'); // now enabled
// even later…
mySelect.trigger('disable.fs'); // now disabled again

如果你需要製作一些個性效果，可以使用 triggerTemplate 和 triggerTemplate 方法，它們都是透過 option 選項來傳回一個HTML字串：

複製程式碼 程式碼如下:

    Incandescent
    CFL
    Halogen

$('.bulbs').fancySelect({
    optionTemplate: function(optionEl) {
        return optionEl.text() '
'; } })

你可以在 下拉框選項改變的時候監聽 change.fs 事件：

複製程式碼 程式碼如下:

    第一個選項選項>
    第二個選項選項>
選擇>
var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // 當改變 FancySelect
時觸發 DOM 的 Change 事件