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

2018-02-27 11:24:12来源:oschina作者:卯金刀GG人点击

分享
插件特点:

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


几乎没有CSS


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


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


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


兼容所有浏览器(记住,jQuery的2 *及以上不支持 插件选项和用法:

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



1

2




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



1




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



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:'clickmouseenter',//Spaceseparatedeventsstring(justasyouwoulduseinaplainjQuery.on('events-string',...))thatactivatetheexpand/collapsebuttons

buttonCloseNotSubmenuEvents:'mouseenter',//theeventsthatshouldcollapseasubmenuarethesameastheonesthatopenit-thisoptionletsyouspecifythosethatshouldnotbeabletocloseit

multipleSubmenusOpenedAllowed:true,//prettystraighforward-ifsettofalse,onlyasinglesubmenuatatimecanstayexpanded

prependButtons:false,//thisiswheretoputthebuttonsinsidetheparentLI-inthebeginning(true)orjustbeforethesubmenuUL(false)

applyInlineCss:false,//morecontrolwithjavascript

topUlClass:'slight-submenu-master-ul',//classforthetopmostul,holdingtheLIswithsubmenuULs

topLiClass:'',//classforthetopULLIs

topLiWithUlClass:'li-with-ul',//classfortheLIsthatholdanUL

buttonClass:'slight-submenu-button',//classfortheexpand/collapsebuttons

buttonSubmenuOpenedClass:'opened',//classforthebuttonwhenitscorrespondingsubmenuisvisible

submenuUlClass:'slight-submenu-ul',//classforthe

directLiInlineCss:$.fn.slightSubmenu.defDirectLiInlineCss,//*InlineCssoptionsholdjsobjectswithcssdefinitions(thoseoptionscorrespondtotheelementswecanattachclassesto)

submenuUlInlineCss:$.fn.slightSubmenu.defSubmenuUlInlineCss,

topContainerInlineCss:$.fn.slightSubmenu.defTopContainerInlineCss,

buttonInlineCss:$.fn.slightSubmenu.defButtonInlineCss,

buttonActiveInlineCss:$.fn.slightSubmenu.defButtonActiveInlineCss,

//callbacksthatcontrolthewaythecurrentlyprocessedsubmenuismanaged

handlerButtonIn:$.fn.slightSubmenu.handlerButtonIn,//receivesajQueryobject(the$submenuUl)asanargument;makesthemenuvisible

handlerForceClose:$.fn.slightSubmenu.handlerForceClose//receivesajQueryobject(the$submenuUl)asanargument;hidesthemenu

handlerGenerateButtonMarkup:$.fn.slightSubmenu.handlerGenerateButtonMarkup//allowsforcustomsubmenubuttonmarkup

});



引用$.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);

};

//thepassedargument,bydefaultissettings.buttonClass

$.fn.slightSubmenu.handlerGenerateButtonMarkup=function(buttonClass){

return'';

};

$.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'//thismightbethedifference

//betweenthe'click'workingoniOSandnot

};




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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台