DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> 輕松實現jquery選項卡切換效果
輕松實現jquery選項卡切換效果
編輯:JQuery入門技巧     

很早之想就學習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選項卡操作方法匯總

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved