這篇文章主要介紹了jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南,需要的朋友可以參考下

FancySelect是一款小巧實(shí)用的jQuery下拉框美化插件。該下拉框美化插件采用扁平化設(shè)計(jì)風(fēng)格，是追求時(shí)尚的開(kāi)發(fā)者的首選下拉框美化插件之一。

使用方法

HTML結(jié)構(gòu)

FancySelect實(shí)用十分簡(jiǎn)單，它可以和jQuery或Zepto結(jié)合使用。在頁(yè)面中放置一些 <select> 下拉框組件，然后就可以通過(guò) .fancySelect() 方法來(lái)調(diào)用該下拉框插件。如果下拉框中有某個(gè)選項(xiàng)沒(méi)有值，該插件會(huì)使用某種占位文字來(lái)代替它。

默認(rèn)情況下，F(xiàn)ancySelect 在 iOS 設(shè)備上僅使用原生的下拉框和樣式。如果你想覆蓋它，在下拉框插件初始化的時(shí)候設(shè)置 forceiOS 為 true 即可。

FancySelect 也可以通過(guò) <select> 元素的 data-class 屬性來(lái)指定樣式，你可以通過(guò)這個(gè)方法來(lái)指定不同樣式的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 在插件初始化后被修改了，你可以通過(guò)在下拉框上觸發(fā) update.fs 方法來(lái)告訴插件更新options列表。

代碼如下:

var mySelect = $('.my-select');

mySelect.fancySelect();

mySelect.append('');

mySelect.trigger('update.fs');

啟用/禁用下拉框

FancySelect 下拉框插件會(huì)在初始化后自動(dòng)將下拉框設(shè)置為 disabled 禁用狀態(tài)。如果你需要重新設(shè)置下拉框的狀態(tài)，可以在 select 元素上使用 enable.fs 或 disable.fs 方法來(lái)修改它們。

代碼如下:

<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

如果你需要制作一些個(gè)性效果，可以使用 triggerTemplate 和 triggerTemplate 方法，它們都是通過(guò) option 選項(xiàng)來(lái)返回一個(gè)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> 下拉框框選項(xiàng)改變的時(shí)候監(jiān)聽(tīng) 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

更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄