DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery扁平化風格下拉框美化插件FancySelect使用指南
jQuery扁平化風格下拉框美化插件FancySelect使用指南
編輯:JQuery特效代碼     

FancySelect是一款小巧實用的jQuery下拉框美化插件。該下拉框美化插件采用扁平化設計風格,是追求時尚的開發者的首選下拉框美化插件之一。

使用方法

HTML結構

FancySelect實用十分簡單,它可以和jQuery或Zepto結合使用。在頁面中放置一些 <select> 下拉框組件,然後就可以通過 .fancySelect() 方法來調用該下拉框插件。如果下拉框中有某個選項沒有值,該插件會使用某種占位文字來代替它。

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

FancySelect 也可以通過 <select> 元素的 data-class 屬性來指定樣式,你可以通過這個方法來指定不同樣式的select下拉框。

代碼如下:
<select class="basic">
  <option value="">Select something…</option>
  <option>Lorem</option>
  <option>Ipsum</option>
  <option>Dolor</option>
  <option>Sit</option>
  <option>Amet</option>
</select>

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 方法來修改它們。

代碼如下:
<select class="my-select" disabled>
    <option>First Option</option>
    <option>Second Option</option>
</select>
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字符串:

代碼如下:
<select class="bulbs">
    <option data-icon="old">Incandescent</option>
    <option data-icon="curly">CFL</option>
    <option data-icon="work">Halogen</option>
</select>
$('.bulbs').fancySelect({
    optionTemplate: function(optionEl) {
        return optionEl.text() + '
'; } })

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

代碼如下:
<select class="my-select" disabled>
    <option>First Option</option>
    <option>Second Option</option>
</select>
var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // trigger the DOM's change event when changing FancySelect

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved