模板
$.fn=jQuery.fn=jQuery.prototype 原型
(function($){ //插件名 navStyle $.fn.navStyle=function(options){ //各种属性、参数 var defaults={ } //如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。 var options=$.extend(defaults,options); return this.each(function(){ //操作 }) } })(jQuery);
例:设置li的背景颜色、划动时显示的背景颜色以及点击时显示的背景颜色
(function($){ //插件名 navStyle $.fn.navStyle=function(options){ //各种属性、参数 var defaults={ bgClass:'#ee2c2c', activeBgClass:"green", clickBgClass:"#cd22fe" } //如果你在调用的时候写了新的参数,就用你新的参数,如果没有写,就用默认的参数。 var options=$.extend(defaults,options); return this.each(function(){ var thisNav=$(this); //添加背景颜色 $(thisNav).find('li').css('background',options.bgClass); var li=$(thisNav).find('li'); //添加滑过时颜色 for(var i=0;i<li.length;i++){ li.eq(i).bind('mouserover',function(){ $(this).css('background',options.activeBgClass); $(this).siblings().css('background',options.bgClass); }) } //添加点击时的颜色 for(var i=0;i<li.length;i++){ li.eq(i).bind('click',function(){ $(this).css('background',options.clickBgClass); $(this).siblings().css('background',options.bgClass); }) } }) } })(jQuery);
html代码
<script src="js/jquery-1.8.3.min.js"></script> <script src="js/NavUI.js"></script> <script> $(function(){ $('ul').navStyle({bgClass:'#0000FF',activeBgClass:"yellow"}); }) </script>