成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

很早之想就學習jquery的插件寫法，一直拖到現在，今天趁著沒什么工作忙，搜索些資料學習下，寫了個比較簡單的選項卡效果。

剛開始有看到一個很通俗易通的例子：alert對話框。

jquery.alertMsg.js

/**
 * [description]
 * @param {[type]} $ [description]
 * @return {[type]} [description]
 */
(function($){

 $.fn.alertMsg = function(options) {

 var defaults = {
  mouseEvent: 'clcik',
  msg: 'hello world'
 }
 var options = $.extend(defaults, options);
 var $this = $(this);

 $this.on(options.mouseEvent, function(e){
  alert(options.msg);
 })
 }

})(jQuery)

調用方式：

<span id="test">test</span>

$(function(){
 $('#test').alertMsg({
  mouseEvent : "click", 
  msg : "第一次寫插件!" 
 });
});

jQuery插件結構

(function($){
 // tabs 自定義的插件名稱
 $.fn.tabs = function(options) {

  // 設置默認參數
  var defaults = {
   activeClass: 'active'
   ... 
  }
  // 對象擴展
  var options = $.extend(defaults, options);

  return $(this).each(function(){
   // 編寫相應實現代碼
  })
 }

})(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

(function($){

 $.fn.tabs = function(options) {

   var defaults = {
    Event: 'click',
    activeClass: 'active'
   }
   var options = $.extend(defaults, options);

   return $(this).each(function(){

    var $thisTab = $(this).find('ul');
    var $tabCon = $thisTab.siblings('div');

    $tabCon.find('div').each(function(){
     $(this).hide();
    });

    $thisTab.find('li:first').addClass(options.activeClass);
    $tabCon.find('div:first').show();

    $thisTab.find('li').each(function(index){

     $(this).on(options.Event, function(){

      $(this).siblings().removeClass(options.activeClass);
      $(this).addClass(options.activeClass);
      $tabCon.find('div').eq(index).show().siblings().hide();

     });
     
    });
   });
  }
 
})(jQuery)

3、調用

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

小結：對jQuery插件的初識，感覺應該還要繼續優化和擴展，繼續學習！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網。

精彩專題分享：javascript選項卡操作方法匯總 jQuery選項卡操作方法匯總