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

posted on 2012-03-03 18:25 司徒正美 閱讀(...) 評論(...) 編輯 收藏