Simple, Easy, diversity menu solution

Simplified Chinese document

Docs, Demo, Guide

Explorer on

If you think the project is also good, please add a Star to the project to support the work of the author, Thank you

Key Features

  • a jQuery plugin
  • simple style interface, can adapt to most UI environments
  • quick search item by input autocomplete
  • multiple group data used tabs form to show
  • use keybord to quick navigate and selection
  • multiple select item in advanced menu mode
  • used static data type or dynamic data to be menu data source
  • used mouse right button click to called menu
  • i18n support
  • rich setting parameters
  • brower supper IE8+,chrome,firefox

How

Usage

As you can see in the Demo Page, you will need to include:

  • JQuery Library (1.6.0+), untest on jQuery 2.x & 3.x
  • The JavaScript file selectmenu.js (or its minified version selectmenu.min.js)
  • The css file selectmenu.css

Including files

<! -- 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>Copy the code

HTML element set

<! --
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>Copy the code

Javascript init plugin

//defined data source
//The data format: Array ({Object}, {...})
var data = [
    {id:1 ,name:'Chicago Bulls',desc:'Chicago Bulls'},
    {id:2 ,name:'Cleveland Cavaliers',desc:'Cleveland Cavaliers'},
    {id:3 ,name:'Detroit Pistons',desc:'Detroit Pistons'},
    {id:4 ,name:'Indiana Pacers',desc:'Indiana Pacers'}];//initialize selectmenu
$('#btnDemo').selectMenu({
    showField : 'desc',
    keyField : 'id',
    data : data
});Copy the code