插件描述：Slight Submenu 是 jQuery 插件，用来管理子菜单的行为，高度可配置和可扩展,支持多层嵌套。
插件特点：
非常容易使用，只有几KB大小，完全控制每一个环节
几乎没有CSS
多级嵌套的子菜单，每个嵌套本身（完全控制，再次）
内联CSS选项允许css来进行内联
自定义场景,深层嵌套（松散，结构甚至凹凸不平，没有双关语意）
兼容所有浏览器（记住，jQuery的2 *及以上不支持<IE9，如果您使用的是，对于那些旧的浏览器不支持）
插件选项和用法：
要使用你需要> = 1.8的jQuery和插件本身的插件：
1 2 | <script src="js/jquery.slight-submenu.min.js"></script> |
如果你不使用内联CSS（插件选项），有一些强制性的CSS，你可能想要从包括或复制的内容：
1 | <link rel="stylesheet" href="css/slight-submenu.css" /> |
之后，你可以简单地套用插件元素
1 | $('selector').slightSubmenu(options); |
选项：
您可以修改每一个选项
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | $('#master-menu').slightSubmenu({ buttonActivateEvents: 'click mouseenter', // Space separated events string (just as you would use in a plain jQuery .on('events-string', ...) ) that activate the expand/collapse buttons buttonCloseNotSubmenuEvents: 'mouseenter', // the events that should collapse a submenu are the same as the ones that open it - this option lets you specify those that should not be able to close it multipleSubmenusOpenedAllowed: true, // pretty straighforward - if set to false, only a single submenu at a time can stay expanded prependButtons: false, // this is where to put the buttons inside the parent LI - in the beginning (true) or just before the submenu UL (false) applyInlineCss: false, // more control with javascript topUlClass: 'slight-submenu-master-ul', // class for the top most ul, holding the LIs with submenu ULs topLiClass: '', // class for the top UL LIs topLiWithUlClass: 'li-with-ul', // class for the LIs that hold an UL buttonClass: 'slight-submenu-button', // class for the expand/collapse buttons buttonSubmenuOpenedClass: 'opened', // class for the button when its corresponding submenu is visible submenuUlClass: 'slight-submenu-ul', // class for the directLiInlineCss: $.fn.slightSubmenu.defDirectLiInlineCss, // *InlineCss options hold js objects with css definitions (those options correspond to the elements we can attach classes to) submenuUlInlineCss: $.fn.slightSubmenu.defSubmenuUlInlineCss, topContainerInlineCss: $.fn.slightSubmenu.defTopContainerInlineCss, buttonInlineCss: $.fn.slightSubmenu.defButtonInlineCss, buttonActiveInlineCss: $.fn.slightSubmenu.defButtonActiveInlineCss, // callbacks that control the way the currently processed submenu is managed handlerButtonIn: $.fn.slightSubmenu.handlerButtonIn, // receives a jQuery object (the $submenuUl) as an argument; makes the menu visible handlerForceClose: $.fn.slightSubmenu.handlerForceClose // receives a jQuery object (the $submenuUl) as an argument; hides the menu handlerGenerateButtonMarkup: $.fn.slightSubmenu.handlerGenerateButtonMarkup // allows for custom submenu button markup }); |
引用$.fn.slightSubmenu.* objects/functions看起来像这样：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $.fn.slightSubmenu.handlerButtonIn = function($submenuUl) { $submenuUl.show(1000);};$.fn.slightSubmenu.handlerForceClose = function($submenuUl) { $submenuUl.hide(1000);};// the passed argument, by default is settings.buttonClass$.fn.slightSubmenu.handlerGenerateButtonMarkup = function(buttonClass) { return '<span class="' + buttonClass + '"></span>';};$.fn.slightSubmenu.defTopContainerInlineCss = { position: 'relative' };$.fn.slightSubmenu.defDirectLiInlineCss = {}; $.fn.slightSubmenu.defSubmenuUlInlineCss = {};$.fn.slightSubmenu.defButtonActiveInlineCss = {};$.fn.slightSubmenu.defButtonInlineCss = { background: '#ccc', display: 'inline', marginLeft: '8px', width: '10px', height: '18px', position: 'absolute', cursor: 'pointer' // this might be the difference // between the 'click' working on iOS and not}; |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery自动完成插件autocompleter
- 下一个特效： 滑块插件Powerange