你的位置:首页 > Java教程

[Java教程]jquery插件(选项卡)


很早之想就学习jquery的插件写法,一直拖到现在,今天趁着没什么工作忙,搜索些资料学习下,写了个比较简单的选项卡效果。

 

刚开始有看到一个很通俗易通的例子:alert对话框。

jquery.alertMsg.js

 1 /** 2  * [description] 3  * @param {[type]} $ [description] 4  * @return {[type]}  [description] 5 */ 6 (function($){ 7  8  $.fn.alertMsg = function(options) { 9 10   var defaults = {11    mouseEvent: 'clcik',12    msg: 'hello world'13   }14   var options = $.extend(defaults, options);15   var $this = $(this);16 17   $this.on(options.mouseEvent, function(e){18    alert(options.msg);19   })20  }21 22 })(jQuery)

调用方式:

<span id="test">test</span>$(function(){  $('#test').alertMsg({    mouseEvent : "click",     msg : "第一次写插件!"   });});

 

jQuery插件结构

 1 (function($){ 2   // tabs 自定义的插件名称 3   $.fn.tabs = function(options) { 4  5     // 设置默认参数 6     var defaults = { 7       activeClass: 'active' 8       ...  9     }10     // 对象扩展11     var options = $.extend(defaults, options);12 13     return $(this).each(function(){14       // 编写相应实现代码15     })16   }17 18 })(jQuery)

 

选项卡实现:

1、HTML结构

<div id="tab">  <ul>    <li>选项1</li>    <li>选项2</li>    <li>选项3</li>    <li>选项4</li>  </ul>  <div id="tabCon" class="tab-con">    <div>1的内容</div>    <div>2的内容</div>    <div>3的内容</div>    <div>4的内容</div>  </div></div>

2、jquery.tabs.js

 1 (function($){ 2  3   $.fn.tabs = function(options) { 4  5       var defaults = { 6         Event: 'click', 7         activeClass: 'active' 8       } 9       var options = $.extend(defaults, options);10 11       return $(this).each(function(){12 13         var $thisTab = $(this).find('ul');14         var $tabCon = $thisTab.siblings('div');15 16         $tabCon.find('div').each(function(){17           $(this).hide();18         });19 20         $thisTab.find('li:first').addClass(options.activeClass);21         $tabCon.find('div:first').show();22 23         $thisTab.find('li').each(function(index){24 25           $(this).on(options.Event, function(){26 27             $(this).siblings().removeClass(options.activeClass);28             $(this).addClass(options.activeClass);29             $tabCon.find('div').eq(index).show().siblings().hide();30 31           });32           33         });34       });35     }36   37 })(jQuery)

3、调用

1 $('#tab').tabs({2   activeClass: 'active'3 });

 

小结:对jQuery插件的初识,感觉应该还要继续优化和扩展,继续学习!