Home > Developer > Web Develop
After the last attempt, has initially mastered the jquery plugin, the following is the effect of simulating the jquery UI plug-in:
Html:
<! DOCTYPE html>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: ' Home '},{menutitle: ' dropdown ',//menu name Submenulist: [' dropdown 1 ', ' dropdown 2 ', ' dropdown 3 ']//submenu}],menucss:{mtitlecss:{color: "Red", padding: "5px 20px", BackgroundColor: "#dedede"},// Set menu name Style Submenucss:{color: "Blue", BackgroundColor: "#f5f5f5", padding: "2px 20px", Lineheight: "1.5em"}//Set submenu style});}); </script>Jquery.menu.js:
/***menu Plugin * Build node * For node binding time * parameter defaults, including *menuitem array, element is JSON object, JSON object contains menutitle menu name, Submenulist submenu *menucss JSON object, Contains mtitlecss menu name CSS style, Submenucss submenu style, */;(function ($) {$.fn.menu = function (options) {var menulength = ',// Menu length submenulength = ',//Sub-menu length menudom = ',//menu node structure item = 0,//used to traverse the menu length subitem = 0,//used to traverse the submenu length defaults = {MenuItem : [{menutitle: "", submenulist:[]}],menucss: {mtitlecss:{},submenucss:{}}//menu node style}; Defaults = $.extend (defaults,options); /*********/menulength = defaults.menuItem.length; for (Item = 0;item < menulength;item++) {if (defaults.menuitem[item].submenulist) {submenulength = Defaults.menuite M[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 ' >" +d Efaults.menuitem[item].menutitle+ "</p></li>"}}/****** Add action **********/menudom = $ (MenuDo m); Menudom.find (". submenu"). Hide (); Menudom.find (". Menutitle"). Bind ("click", Function () {$ (this). Siblings (". submenu"). Toggle (); });/*** add Style ****/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>"); /***** generate the Menu node *******/return this; }}) (JQuery);The effect is as follows:
Summarize:
UI plugin notation,
1. First consider which parameters are to be passed in, usually define the default value of the defaults JSON object in the plug-in, and then use the $.extend () method to combine the parameters with the default parameters.
The general UI needs to pass parameters such as CSS-style JSON objects, callback functions, etc., to see the ExtJS control parameters
2. The corresponding HTML structure (including setting class,id) needs to be produced randomly according to the Production DOM node.
3. Bind the CSS style to the node, decide whether to add it according to the parameters, (try to set the style in the external CSS file)
4. Bind event actions for a node
CSS. Files can set default styles for UI styles
jquery Plugin Development attempt (ii)
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
