歡迎您光臨本站 註冊首頁

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

←手機掃碼閱讀     admin @ 2019-07-09 , reply:0

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

狀態

  

入門指南、DEMO、文檔

插件官方首頁(入門指南、DEMO、文檔):

中文官網

英文官網

項目GitHub地址:

https://github.com/TerryZ/SelectMenu

插件運行效果預覽

常規菜單模式

高級菜單模式

高級菜單多分組數據模式

功能特點

  • 基於 jQuery1.x 開發, jQuery2和3的版本未經測試


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


  • Autocomplete輸入自動查找功能


  • 結果列表多分組(Tabs)展示


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


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


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


  • 支持滑鼠右鍵呼出菜單模式


  • i18n國際化支持


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


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

插件基於jQuery開發,可即插即用於多數UI環境

怎麼使用SelectMenu

在 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次圍觀

http://coctec.com/open/jquery/show-post-209383.html