標籤：
經過上次的嘗試，已初步掌握jquery外掛程式的寫法，下面為類比jquery UI外掛程式的效果：
html:
<!DOCTYPE html><html><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0,minimun-scale=1.0 maximum-scale=1.0, user-scalable=no" name="viewport"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"/><title>jquery menu外掛程式demo</title><link rel="stylesheet" href="../css/ljwCommon.css"/><script src="../js/jquery.js"></script><script src="../js/jquery.menu.js"></script><!--引入新寫外掛程式--></head><style>body{padding:0;margin:0;} .wrap{padding:0;margin:0;}
ul{padding:0px;margin:0;}
.menuItem p{padding:0;margin:0;}
.menuItem{float: left;list-style: none;cursor: pointer;}
.subMenuItem{list-style: none;cursor: pointer;}</style><body><div class="wrap"><div class="header"></div></div></body><script>$(function(){$(".header").menu({menuItem:[{menuTitle:‘首頁‘},{ menuTitle:‘下拉‘,//菜單名 subMenuList:[‘下拉1‘,‘下拉2‘,‘下拉3‘] //子功能表}],MenuCss:{MTitleCss:{color:"red",padding:"5px 20px",backgroundColor:"#dedede"}, //設定菜單名樣式SubMenuCss:{color:"blue",backgroundColor:"#f5f5f5",padding:"2px 20px",lineHeight:"1.5em"} //設定子功能表樣式}});});</script></html>
jquery.menu.js:
/***menu外掛程式*產生節點*為節點綁定時間*參數defaults，包括*menuItem數組，元素為json對象，json對象內含menuTitle 菜單名,subMenuList子功能表*MenuCss json對象，內含MTitleCss菜單名css樣式,SubMenuCss子功能表樣式,*/;(function($){$.fn.menu = function(options){var menuLength = ‘‘,//菜單長度submenuLength = ‘‘,//對應子功能表長度MenuDom = ‘‘,//menu節點結構Item = 0,//用於遍曆菜單長度SubItem = 0,//用於遍曆子功能表長度 defaults = {menuItem : [{ menuTitle:"", subMenuList:[] }],MenuCss : {MTitleCss:{},SubMenuCss:{}}//menu節點樣式}; defaults = $.extend(defaults,options); /*********/ menuLength = defaults.menuItem.length; for(Item = 0;Item < menuLength;Item++){ if(defaults.menuItem[Item].subMenuList){ submenuLength = defaults.menuItem[Item].subMenuList.length; MenuDom +="<li class=‘menuItem‘>"+"<p class=‘menuTitle‘>"+defaults.menuItem[Item].menuTitle+"</p>"+"<ul class=‘submenu‘>"; for( SubItem = 0;SubItem < submenuLength;SubItem++){ MenuDom +="<li class=‘subMenuItem‘>"+defaults.menuItem[Item].subMenuList[SubItem]+"</li>" } MenuDom +="<ul></li>" }else{ MenuDom +="<li class=‘menuItem‘><p class=‘menuTitle‘>"+defaults.menuItem[Item].menuTitle+"</p></li>" } } /******添加動作**********/ MenuDom = $(MenuDom); MenuDom.find(".submenu").hide(); MenuDom.find(".menuTitle").bind("click",function(){ $(this).siblings(".submenu").toggle(); });/***添加樣式****/if(defaults.MenuCss.MTitleCss)MenuDom.find(".menuTitle").css(defaults.MenuCss.MTitleCss);if(defaults.MenuCss.SubMenuCss)MenuDom.find(".submenu").css(defaults.MenuCss.SubMenuCss); /***/ $(this).append(MenuDom).wrapInner("<ul></ul>"); /*****產生菜單節點*******/ return this; }})(jQuery);
效果如下：
總結：
UI外掛程式寫法，
1.首先要考慮有哪些參數是要傳入的,通常在外掛程式內定義defaults JSON對象設參數的預設值，然後使用$.extend()方法合并參數與預設參數,
一般UI需要傳遞的參數有css樣式json對象，回呼函數等，具體可查看extjs的控制項參數
2.需要根據生產DOM節點也即隨機生產相應的HTML結構（包括設定class,id），
3.為節點綁定css樣式，根據參數的需要判斷是否添加，（盡量在外部css檔案設定樣式）
4.為節點綁定事件動作
//css.檔案可為UI樣式設定預設樣式
jquery外掛程式開發嘗試（二）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
