簡潔、易用、多樣的菜單解決方案
插件官方首頁(入門指南、DEMO、文檔):
項目GitHub地址:
https://github.com/TerryZ/SelectMenu
常規菜單模式
高級菜單模式
高級菜單多分組數據模式
基於 jQuery1.x 開發, jQuery2和3的版本未經測試
簡潔清爽的界面,可適應大多數UI環境
Autocomplete輸入自動查找功能
結果列表多分組(Tabs)展示
允許使用靜態數據或動態獲取數據的數據源
使用鍵盤快速導航、選擇等操作
高級模式下支持多項目被選中
支持滑鼠右鍵呼出菜單模式
i18n國際化支持
豐富的參數設置及功能API調用
瀏覽器兼容:IE8+、Chrome、Firefox等
插件基於jQuery開發,可即插即用於多數UI環境
在 Github 或 碼雲 上下載最新版本,解壓后並放入需要使用的項目中
或使用 npm 指令進行安裝
npm install selectmenu
引用文件
< !-- 基礎環境引用說明 -- >< !-- jQuery功能庫引用 -- >< script type="text/javascript" src="jquery.min.js" >< /script> < !-- SelectMenu插件樣式引用 -->< link rel="stylesheet" href="selectmenu.css" type="text/css" > < !-- SelectMenu插件核心腳本 -->< script type="text/javascript" src="selectmenu.js" >< /script>
HTML內容
< !-- 設置觸髮菜單打開對象,在此僅為最常用的按鈕為例 -- >< button type="button" id="btnDemo" >Select Menu< /button >
javascript初始化
//定義數據源//數據格式:Array[{Object},{...}]var data = [ {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'}, {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫蘭騎士'}, {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'}, {id:4 ,name:'Indiana Pacers',desc:'印第安納步行者'} ];//初始化插件$('#btnDemo').selectMenu({ showField : 'desc', keyField : 'id', data : data });
[admin ] 簡潔,多樣的菜單解決方案 SelectMenu已經有401次圍觀