mass Framework menu插件

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{
                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{ 
                130px;
                -moz-box-shadow:0 0 10px #06c;
                -webkit-box-shadow:0 0 10px #06c;
                box-shadow:0 0 10px #06c;
            }
            #bright .menu_item{
                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中查看。

机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年