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中查看。