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

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

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

　　jquery下拉菜單SelectMenu.js特點：

　　基于jQuery開發

　　簡潔清爽的界面，可適應大多數UI環境

　　Autocomplete輸入自動查找功能

　　結果列表多分組（Tabs）展示

　　允許使用靜態數據或動態獲取數據的數據源

　　使用鍵盤快速導航、選擇等操作

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

　　支持鼠標右鍵呼出菜單模式

　　i18n國際化支持

　　豐富的參數設置及功能API調用

　　jquery下拉菜單使用方法

　　在頁面中引入jquery和selectmenu相關文件。

　　<!--基礎環境引用說明-->

　　<!--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結構

　　設置觸發菜單打開對象，這里以最常用的按鈕為例，HTML結構如下：

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

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

　　JavaScript

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

　　//定義數據源

　　//數據格式：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特點是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！