SelectMenu簡潔，多樣的菜單解決方案

簡潔、易用、多樣的菜單解決方案

入門指南、DEMO、文檔

插件官方首頁（入門指南、DEMO、文檔）：

中文官網(wǎng)

英文官網(wǎng)

項(xiàng)目GitHub地址：

https://github.com/TerryZ/SelectMenu

插件運(yùn)行效果預(yù)覽

常規(guī)菜單模式

高級菜單模式

高級菜單多分組數(shù)據(jù)模式

功能特點(diǎn)

• 基于 jQuery1.x 開發(fā), jQuery2和3的版本未經(jīng)測試

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

• Autocomplete輸入自動(dòng)查找功能

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

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

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

• 高級模式下支持多項(xiàng)目被選中

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

• i18n國際化支持

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

瀏覽器兼容：IE8+、Chrome、Firefox等

插件基于jQuery開發(fā)，可即插即用于多數(shù)UI環(huán)境

怎么使用SelectMenu

在 Github 或 碼云 上下載最新版本，解壓后并放入需要使用的項(xiàng)目中

或使用 npm 指令進(jìn)行安裝

npm install selectmenu

引用文件

< !-- 基礎(chǔ)環(huán)境引用說明 -- >
< !-- 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內(nèi)容

< !-- 設(shè)置觸發(fā)菜單打開對象，在此僅為最常用的按鈕為例 -- >
< button type="button" id="btnDemo" >Select Menu< /button >

javascript初始化

//定義數(shù)據(jù)源
//數(shù)據(jù)格式：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
});