terryz / selectmenu Goto Github PK

View Code? Open in Web Editor NEW

298.0 18.0 48.0 96 KB

Simple, easily and diversity menu solution

Home Page: https://terryz.github.io/selectmenu

License: MIT License

CSS 43.47% JavaScript 56.53%

jquery-plugin menu-generator menu autocomplete right-click popup tabs embedded select-multiple selector

selectmenu's Introduction

Simple, easily and diversity menu solution

Examples and Documentation

Explorer on

简体中文文档

The Vuejs version: v-selectmenu

Plugin Preview

Regular menu mode

Advanced menu mode

Advanced menu mode (multiple group data)

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

License

MIT

Installation

Download SelectMenu plugin zip file by last release, or click me to download SelectMenu

or use NPM

npm i selectmenu

Usage

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

jQuery library (1.6.0+), untest on jquery2.x & 3.x
The JavaScript file selectmenu.js (or its minified version selectmenu.min.js)
The css file selectmenu.css

Including files

<!-- jQuery library include -->
<script type="text/javascript" src="jquery.min.js" >< /script>

<link rel="stylesheet" href="selectmenu.css" type="text/css">
<script type="text/javascript" src="selectmenu.js" >< /script>

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>

Javascript init plugin

//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
})

selectmenu's People

Contributors

Stargazers

Watchers

selectmenu's Issues

data数据更新后问题

传入selectmenu后，再关闭selectmenu弹出层,更新data的数据,然后再次打开selectmenu弹出层,发现依旧是第一次打开的数据,DeBug的跟踪,data内的数据确定是有更新的，不知道如何解决！

使用SelectMenu嵌入方式的问题

在使用嵌入方式时弹出菜单不显示，查看网页元素发现弹出菜单在绑定的div的上方，后来去除了embed : true选项，就能够正常显示，但是单击选项提示错误

一些小建议

非常感谢您提供的诸多非常好用的插件，SelectPage目前已经成为我们ERP后台的标配，我相信SelectMenu也一样是我们所喜爱。就目前的功能提一个小建议：

SelectMenu位置自动调整，根据边缘可视区调整。

最后非常感谢您提供这么好的插件。

When apply the multiple function, it doesn't work. I found the reason is the jquery version that 3.0 version is not compatible with the plugin and 2.0 version is good. hopefully update the patch.Thanks

多分组数据下拉菜单初始化问题

初始化只能针对没有分组的列表初始化，多组的就无法初始化了，想要下次访问页面时能保存上次选中的值

SelectMenu问题

i find some questions about this, so hope you can see it. when you click the options you can use you keyboard up or down , but the up is disabled and the javascript has some error, my english is poor , i hope you can understand me.