![]()
SelectPageLogo
SelectPageLogo
簡潔辽幌、易用增淹、多樣的菜單解決方案
入門指南、實例乌企、文檔
更多實例虑润、文檔請訪問：
項目 GitHub 地址：SelectMenu
插件效果預(yù)覽：
常規(guī)菜單模式
SelectMenu1
高級菜單模式
SelectMenu2
高級菜單模式 (多分組數(shù)據(jù))
SelectMenu3
安裝 / 下載
download SelectMenu plugin zip file by last release, or click me to download SelectMenu
or use NPM
npm install selectmenu
使用手冊
插件文件引用
<!-- Basic environment reference -->
<!-- jQuery library include -->
<script type="text/javascript" src="jquery.min.js" >< /script>
<!-- SelectMenu style sheet -->
<link rel="stylesheet" href="selectmenu.css" type="text/css">
<!-- SelectMenu plugin js file include -->
<script type="text/javascript" src="selectmenu.js" >< /script>
HTML元素設(shè)置
<!--
Set the trigger menu to open the object, where
only the most commonly used button as an example
-->
<button type="button" id="btnDemo">Select Menu</button>
Javascript初始化
//defined data source
//data format：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:'印第安納步行者'}
];
//initialize selectmenu
$('#btnDemo').selectMenu({
showField : 'desc',
keyField : 'id',
data : data
});
