menu插件的结构是基于tabs插件上改进过来的,以后就连tabs插件都会改成这种新的形式。或许过不久,我会将这种结构抽象成一个新的模块,里面提供一个类,让所有UI插件都继承自它。
新插件系统的简述:
- 插件名即实例方法名,并且此插件只添加一个实例方法,如tabs插件只在$.fn中添加一个tabs方法。
- 此实例方法同时拥有初始化插件,销毁插件,调用插件的各种方法的能力。
- 当某一元素被包装成mass的节点链对象$(node)后,第一次调用此插件方法,即是初始化插件。一般地,参数为一个对象。
- 当这个节点链对象再次调用插件方法,传入的第一个参数为字符串,则会判定此插件对象有没有此方法,有则调用此方法。
- 想移除当前UI,只需传入"destroy"。
- 所有插件对象都拥有getUI, invoke, destroy, setOptions方法,都拥有parent, target, ID属性。
下面menu插件的配置参数:
-
data
- 必需。一个对象数组,里面的对象要求拥有html或sub属性,sub也是一个类似结构的对象数组。 hover_class
- 可选。菜单项移上去时发生作用的类名,默认是hover。 direction
- 可选。可用值为"vertical"或"horizontal", 默认是"vertical"。
$1.require("ready,20120303_menu",function( ){ $1("#black").menu({ data: [ { html:"随笔", sub:[ {html:"生活"}, {html:"杂文"}, {html:"思考"} ] }, { html:"编程工具", sub:[ {html:"Vim"}, {html:"NetBeans"}, {html:"Git"} ] }, { html:"编程语言", sub:[ {html:"Web开发",sub:[ {html:"HTML"}, {html:"javascript"}, {html:"CSS"} ]}, {html:"Python"}, {html:"Java语言"}, {html:"C/C++"}, {html:"Android开发"} ] }, {html:"操作系统",sub:[ {html:"IOS"}, {html:"window"}, {html:"ubuntu"} ]} ], direction: "horizontal" }); });
#black .menu_item{
width:120px;
padding-left:10px;
height:24px;
line-height:24px;
border-bottom:1px solid #fff;
background:#000;
color:#fff;
}
#black .hover {
background:#636!important;
color:black;
}
我们再来一个复杂的垂直菜单,它是显示mass Framework的所有API。
#bright .main_menu,
#bright .sub_menu{
width:130px;
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
}
#bright .menu_item{
width:120px;
padding-left:10px;
height:24px;
line-height:24px;
border-bottom:1px solid #fff;
background:#0088aa;
color:#fff;
}
#bright .hover {
background:#f36100!important;
color:black;
}
$1.require("ready,more/menu,more/api",function( _,_,api ){ var pathMap = { "模块加载模块": "core/$", "特征侦探模块": "support/$", "语言扩展模块": "lang/$", "类工厂模块": "class/$", "选择器模块": "query/$", "数据缓存模块": "data/$", "节点模块": "node/$", "属性模块": "attr/$", "事件模块": "event/$", "样式模块": "css/$", "动画模块": "fx/$", "操作流模块": "flow/$", "数据交互模块": "ajax/$" } var makeData = function( json, path ){ return Object.keys( json ).map(function(key){ var ret = { html: key } var new_path = path + (typeof pathMap[key] == "string" ? pathMap[key] : key) + "." if(typeof json[ key ] === "object"){ ret.sub = makeData( json[ key ], new_path); }else{ ret.attr = { type: json[ key ], path: new_path + "html" } } return ret; },json ); } //上面的代码用于生成menu的数据包 var menu = $1("#bright").menu({ data: makeData(api, "") }).menu("getUI").target; $1(document).click(function(e){//点击其他处隐藏二级或二级以上的子菜单 if(!$1.contains(menu[0], e.target)){ menu.find(".sub_menu:visible").hide(); } })
有关menu插件更详细的说明请到github中查看。