自定義一個jQuery二級菜單插件 自定義jQuery插件需要瞭解： 命名規範:jQuery.插件名-版本.js 以工具(全局)函數形式加到jQuery中: $.extend({函數名:function(){功能代碼}}); 使用時：$.函數名(); 以成員(局部)函數形式加到jQuery中: $. ...
自定義一個jQuery二級菜單插件
自定義jQuery插件需要瞭解：
- 命名規範:jQuery.插件名-版本.js
- 以工具(全局)函數形式加到jQuery中:
$.extend({函數名:function(){功能代碼}});
使用時：$.函數名();
- 以成員(局部)函數形式加到jQuery中:
$.fn.extend({函數名:function(){功能代碼}});
使用時:$("選擇元素").函數名();
- 以成員形式應返回jQuery對象，便於鏈式操作。
1.創建關聯文件
創建插件名.js文件
創建頁面名.css文件
然後引入html中
<!-- 引入創建的名為myPlugin-menu的css --> <link rel="stylesheet" type="text/css" href="../css/myPlugin-menu.css"/> <!-- 引入jQuery庫，必須在前面，後面的插件文件基於jQuery --> <script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <!-- 引入創建的名為jquery-myPluginmenu-1.0.js --> <script src="../js/jquery-myPluginmenu-1.0.js" type="text/javascript" charset="utf-8"></script>
現在先寫出所需基本html代碼
一個div裡面包含一個ul六個li標簽
<body> <div id="menu"> <!-- id設置為menu --> <ul> <li>menu1 <div> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> </div> </li> <li>menu2 <div> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> </div> </li> <li>menu3 <div> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> </div> </li> <li>menu4 <div> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> </div> </li> <li>menu5 <div> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> </div> </li> <li>menu6 <div> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> </div> </li> </ul> </div> </body>
初始界面如下：
在名為myPlugin-menu的css中寫入樣式
/* 設置一個類名sunmenu */ /* 找到menu裡面的ul */ .sunmenu >ul{ margin: 0px; /* 外邊距 */ padding: 0px; /* 內邊距 */ list-style: none; /* 列表屬性 */ } /* 找到ul里的li */ .sunmenu >ul >li{ float: left; /* 左浮動 */ display: inline-block; /* 水平居中顯示 */ width: 120px; /* 寬度 */ height: 30px; /* 高度 */ line-height: 30px; /* 行高 */ background-color: #333333; /* 背景顏色 */ color: #FFFFFF; /* 字體顏色 */ text-align: center; /* 文本居中 */ margin-right: 2px; /* 右邊距 */ } /* 找到li里的div */ .sunmenu > ul>li>div{ width: 120px; /* 寬度 */ background-color: #999999; /* 背景顏色 */ position: absolute; /* 相對定位 */ } /* 找到div里的a */ .sunmenu >ul>li>div a:link{ text-decoration: none;/* 文本修飾 去掉下劃線 */ } .astyle{ color: #DDDDDD; /* 字體顏色 */ }
我們需要用js來調用這些樣式，讓它們隱藏或是顯示。
在創建的插件.js中以成員函數的形式來設置插件:
//以成員函數形式設置插件 (function($){ $.fn.extend({ submenu:function(){ //添加樣式 this.addClass("sunmenu"); //隱藏div this.find("ul>li>div").hide(); //當滑鼠經過li時 this.find("ul>li").on("mouseover",function(){ //此處的this表示事件源 $(this).find("div").show(); //顯示div //當滑鼠離開li時 }).on("mouseout",function(){ $(this).find("div").hide(); //隱藏div }); //再給a標簽添加一個滑鼠移入移出事件 $("a").mouseover(function(){ $(this).addClass("astyle"); }).mouseout(function(){ $(this).removeClass("astyle"); }) return this; //為了支持鏈式操作 要返回當前對象 } }) })(jQuery);
最後在HTML中運行自定義的插件：
<script type="text/javascript"> $(function(){ $("#menu").submenu();//選擇id為menu的元素調用成員函數submenu }) </script>
運行結果：
當滑鼠移入移出時：
如果覺得有用不妨點個贊:D
