jquery下拉菜單SelectMenu.js特點是什么

本篇內(nèi)容介紹了“jquery下拉菜單SelectMenu.js特點是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　SelectMenu.js是一款簡潔、易用、多樣的jquery下拉菜單插件。SelectMenu下拉菜單插件功能強(qiáng)大，支持下拉，分頁，鍵盤操作等功能。

　　jquery下拉菜單SelectMenu.js特點：

　　基于jQuery開發(fā)

　　簡潔清爽的界面，可適應(yīng)大多數(shù)UI環(huán)境

　　Autocomplete輸入自動查找功能

　　結(jié)果列表多分組（Tabs）展示

　　允許使用靜態(tài)數(shù)據(jù)或動態(tài)獲取數(shù)據(jù)的數(shù)據(jù)源

　　使用鍵盤快速導(dǎo)航、選擇等操作

　　高級模式下支持多項目被選中

　　支持鼠標(biāo)右鍵呼出菜單模式

　　i18n國際化支持

　　豐富的參數(shù)設(shè)置及功能API調(diào)用

　　jquery下拉菜單使用方法

　　在頁面中引入jquery和selectmenu相關(guān)文件。

　　<!--基礎(chǔ)環(huán)境引用說明-->

　　<!--jQuery功能庫引用-->

　　<scripttype="text/javascript"src="jquery.min.js"></script>

　　<!--SelectMenu插件樣式引用-->

　　<linkrel="stylesheet"href="selectmenu.css"type="text/css">

　　<!--SelectMenu插件核心腳本-->

　　<scripttype="text/javascript"src="selectmenu.js"></script>

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

　　設(shè)置觸發(fā)菜單打開對象，這里以最常用的按鈕為例，HTML結(jié)構(gòu)如下：

　　<!--設(shè)置觸發(fā)菜單打開對象，在此僅為最常用的按鈕為例-->

　　<buttontype="button"id="btnDemo">SelectMenu</button>

　　JavaScript

　　然后通過下面的js碼來定義數(shù)據(jù)源和初始化插件。

　　//定義數(shù)據(jù)源

　　//數(shù)據(jù)格式：Array[{Object},{...}]

　　vardata=[

　　{id:1,name:'ChicagoBulls',desc:'芝加哥公牛'},

　　{id:2,name:'ClevelandCavaliers',desc:'克里夫蘭騎士'},

　　{id:3,name:'DetroitPistons',desc:'底特律活塞'},

　　{id:4,name:'IndianaPacers',desc:'印第安納步行者'}

　　];

　　//初始化插件

　　$('#btnDemo').selectMenu({

　　showField:'desc',

　　keyField:'id',

　　data:data

　　});

“jquery下拉菜單SelectMenu.js特點是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！