欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 工具下载 > 网页插件 > 简洁,多样的菜单解决方案 SelectMenu

简洁,多样的菜单解决方案 SelectMenu

2018-06-05 423 收藏 0 赞一个 0 真差劲 0 去评论 去下载

入门指南、DEMO、文档

插件官方首页(入门指南、DEMO、文档):

中文官网

英文官网


项目GitHub地址:

https://github.com/TerryZ/SelectMenu


插件运行效果预览

常规菜单模式

09113321_Hq5s.png

高级菜单模式

09113321_4aeF.png

高级菜单多分组数据模式

09113321_ndSS.png


功能特点

    基于 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
});


一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

下载地址
文件大小:37.02KB 价格: 免费 如何获得积分? 成为VIP会员可免积分下载【成为VIP】 【报错】
大家评论