【jQuery进阶】子菜单插件Slight Submenu

插件特点:

非常容易使用,只有几KB大小,完全控制每一个环节

几乎没有CSS

多级嵌套的子菜单,每个嵌套本身(完全控制,再次)

内联CSS选项允许css来进行内联

自定义场景,深层嵌套(松散,结构甚至凹凸不平,没有双关语意)

兼容所有浏览器(记住,jQuery的2 *及以上不支持<IE9,如果您使用的是,对于那些旧的浏览器不支持)

插件选项和用法:

要使用你需要> = 1.8的jQuery和插件本身的插件:

1 2

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="js/jquery.slight-submenu.min.js"></script>

如果你不使用内联CSS(插件选项),有一些强制性的CSS,你可能想要从包括或复制的内容:

1

<link rel="stylesheet" href="css/slight-submenu.css" />

之后,你可以简单地套用插件元素

1

$('selector').slightSubmenu(options);

选项:

您可以修改每一个选项

$('#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看起来像这样:

$.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

};

没有测试,请大家测试使用!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券