專業鋁門窗、鍛造門設計及安裝
價格便宜、品質好、設計佳，值得您信賴		抓漏油漆工程承包，居家油漆粉刷、外牆油漆
油漆老師傅專業施工，來電免費估價！

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 自製 jQuery Plugin

房東：小凱
發表時間：2011-05-06
[檢舉]


有時候寫 jQuery 時，常會發現一些簡單的效果可以重複利用。只是每次用 Copy & Paste 大法似乎不是件好事，有沒有什麼方法可以讓我們把這些效果用到其他地方呢？


沒錯，就是用 jQuery 的 Plugin 機制。


不過 jQuery 的 Plugin 機制好像很難懂？其實一點也不。以下我用最簡單的方式來為大家解說如何自製一個簡單的 Plugin 。


當然在此之前，你得先瞭解 JavaScript 的 class 、 object 、 variables scope 還有 anonymous function 等基礎，這些可以參考「 JavaScript 大全」一書。


 


Plugin 樣版


寫 jQuery 的 Plugin 最快的方法就是拿現成的 Plugin 來改，只是在那麼多的 Plugin 中怎麼找到好的範例呢？別擔心，這邊我提供一個最簡單的範例樣版：




jQuery.fn.mytoolbox = function() {

    return this.each(function() {

    });

};



首先， mytoolbox 就是我們的 plugin 名稱，利用 jQuery.fn 我們可以將它註冊為 jQuery 的 plugin 。然後我們把 jQuery.fn.mytoolbox 指向一個匿名函式 (anonymous function) ，又稱為 callback ；而這個 callback 的內容很簡單，就是利用 jQuery 的 each 方法，來一一執行對應的動作。


特別要注意匿名函式裡的 this 關鍵字，它會指向一個 jQuery 物件；而這個 jQuery 物件則是我們要指定的，稍後我會再進一步說明。


使用 Plugin


現在將上面的樣版存成 mytoolbox.js ，和 jquery.js 放在一起。然後建立一個 HTML 測試檔案，內容如下：




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery TEST</title>

<style type="text/css">

.test {

border:1px solid #CCC;

cursor:pointer;

padding:3px;

}

</style>

</head>

<body>

<div id="test1" class="test">

點我！

</div>

<div id="test2" class="test">

點我！

</div>

<div id="debug"></div>

<script type="text/javascript" src="jquery/1.2.3.js"></script>

<script type="text/javascript" src="jquery/mytoolbox.js"></script>

<script type="text/javascript">

$(function () {

    $(\'.test\').mytoolbox();

});

</script>

</body>

</html>



首先 HTML 中引用了 jQuery 函式庫及我們寫的 Plugin 檔案，然後我在畫面上佈置了兩個 class 為 test 的 div 元素。接著我們用以下程式碼來呼叫我們的 Plugin ：




$(function () {

    $(\'.test\').mytoolbox();

});



這邊的用意就是將上面那兩個 div 套上 mytoolbox 這個 Plugin ，這樣 Plugin 就能動了，很簡單吧？


加入動作


當然，這個 Plugin 什麼事都還沒開始做，是個空骨架而已。現在我們要為它加血添肉，讓它動起來。


先簡單在 each 的 callback 裡加入一行：




jQuery.fn.mytoolbox = function() {

    return this.each(function() {

        alert(this.id); // 加入此行

    });

};



再重新瀏覽測試用的 HTML 檔，你會發現頁面自動跳出了兩次訊息視窗，內容分別是 test1 和 test2 ；這證明了我們的 Plugin 的確有套用在 class 為 test 的兩個 div 上面。


不過現在有兩個 this ，它們是一樣的東西嗎？不，因為 scope 及觸發對象的不同，它們兩個是不同的東西。在外面的 this 是一個 jQuery 物件，指向我們指定的 $(‘.test’) 這個物件；而 each callback 裡的 this 則是 div 元素，因為 each 是個 iterator function ，因此 alert(this.id) 會執行兩次。在第一次的 this 會指向 #test1 這個 div ，第二次則指向 #test2 這個 div 。


註：這裡我用 #test1 表示 id 為 test1 的元素。


現在我希望改成按下 div 元素後才會 alert 該元素的 id ，這要怎麼做呢？我們要改用 click 事件，做法如下：




jQuery.fn.mytoolbox = function() {

    return this.each(function() {

        jQuery(this).click(function () {

            alert(this.id);

        });

    });

};



由於 each callback 裡的 this 是 DOM 元素，所以我們要用 jQuery() 把 this 包起來，這樣才能方便指定該元素的 click 事件。現在重新瀏覽頁面，點選任何一個 div ，應該就會跳出對應的訊息視窗了。


再包一層


如果在 each 的 callback 裡會呼叫到多次的 jQuery 的話，一直寫 jQuery 這幾個字實在是很累人的一件事；而且 jQuery 不是可以簡寫成 $ 號嗎？不能直接用嗎？當然可以，只是這樣可能會和其他 JavaScript Library 發生衝突；所以我們要改用以下的方式來包覆我們的 Plugin ：




;(function($) {

    $.fn.mytoolbox = function() {

        return this.each(function() {

            $(this).click(function () {

                alert(this.id);

            });

        });

    };

})(jQuery);



JavaScript 可以直接用一組小括號 [()] 包覆一個匿名函式，然後後面再接一組小括號 [()] 表示呼叫這個匿名函式；而第二組小括號中就可以放置這個匿名函式的參數。所以在上面的程式碼中，我們把 Plugin 的程式碼用一個匿名函式包覆起來，然後參數就用我們常用的 $ 符號；接著在利用前述的原理，將 jQuery 這個類別導入給我們的 Plugin ，這樣我們就可以很快樂地在 Plugin 中使用我們熟悉的 $ 符號了。至於最前面的分號 (;) ，主要是考慮這個 Plugin 檔案會和其他 JS 檔合併壓縮而放進來的。


註： $ 在 JavaScript 裡是合法的變數名稱。


後面的說明我會略過這個包覆動作，在實際檔案中請別忘了加。


加入選項設定


接下來我希望讓 each 的 callback 函式能讓使用者自訂，因此我需要一個讓使用者能設定的選項。就像其他的 Plugin 一樣，我們讓我們的 mytoolbox 可以接受一個 settings 物件：




$.fn.mytoolbox = function(settings) {

    var _defaultSettings = {

        callback: function () {

            alert(this.id);

        }

    };

    var _settings = $.extend(_defaultSettings, settings);

    return this.each(function() {

        $(this).click(_settings.callback);

    });

};



首先我們為 Plugin 加入 settings 參數，也就是一般 Plugin 常見的設定值。然後則是 _defaultSettings ，它能幫我們在使用者沒有指定任何設定值給 settings 時，還能夠提供預設的設定值。


接著我用 jQuery 提供的 extend 方法，將 settings 中有設定的值覆蓋\掉 _defaultSettings 所設定的預設值，再把結果存放在 _settings 這個變數中；後面我們就會用新的 _settings 變數當做我們的設定值。


現在我們在 _settings 中指定了一個 callback 項目 (預設是用 alert ) ，然後將它指定給 div 元素的 click 觸發器。現在我要在 HTML 頁面中更改這個事件處理器，使它不再使用 alert ，而是把結果顯示在 div#debug 裡。程式如下：




$(function () {

    var debug = $(\'#debug\');

    $(\'.test\').mytoolbox({

        callback: function () {

            debug.html(debug.html() + this.id + \'<br />\');

        }

    });

});



再重新瀏覽一次頁面，看看效果是不是依照我們想像的完成呢？


修改觸發事件


假設現在我們不想用 click ，而是想讓滑鼠移過就觸發 callback 呢？這時就要借重 jQuery 的 bind 方法了：




$.fn.mytoolbox = function(settings) {

    var _defaultSettings = {

        bind: \'click\',

        callback: function () {

            alert(this.id);

        }

    };

    var _settings = $.extend(_defaultSettings, settings);

    return this.each(function() {

        $(this).bind(_settings.bind, _settings.callback);

    });

};



這裡我加入一個 bind 設定項目，預設是用 click 事件觸發。回到 HTML 頁面，我們改用 mouseover 來觸發 callback ：




$(function () {

    var debug = $(\'#debug\');

    $(\'.test\').mytoolbox({

        bind: \'mouseover\',

        callback: function () {

            debug.html(debug.html() + this.id + \'<br />\');

        }

    });

});



重新瀏覽 HTML 頁面，當滑鼠移過 div 元素時，是不是會出現對應的 id 呢？


到這裡，相信大家都應該大致瞭解如何建立一個 jQuery Plugin 了吧？接下來，我將透過實際的例子為大家介紹更多自製 jQuery Plugin 所需要注意的地方。





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊，房屋、店面熱門精選物件，廣利不動產 優質仲介，房屋租賃、買賣資訊透明，交易真安心！

    • 1 樓住戶：小凱
    發表時間：2011-05-06     		[檢舉]

    在 Part 1 我們看到如何建立一個 jQuery Plugin 的雛形，也讓它能夠做一些簡單的動作了。只是這個 Plugin 似乎沒什麼太大的用途，所以接下來我們就來寫個真正能用的東西。


     


    簡單的頁籤功能


    要舉個簡單又實用的教學用例子，一直都是非常困難的事情。經過多次的思考與挑選，我決定用頁籤功能 (Tab) 來當做本文練習的重點。


    當然 jQuery 已經有一些 Tab 相關的 Plugin 了，而且基於不重造輪子的理念下，我們似乎不應該自己動手；不過站在學習的角度下，如果我們自己實作一個簡單的頁籤的話，將會有助於瞭解 jQuery Plugin 的設計過程。


    以下先來瞭解我們需要的功能，再來想想看怎麼實作它。


    首先我們的頁籤大概會長成這樣子：


    頁籤基本形式


    頁籤基本形式


    頁籤基本形式


    基本上我們要的效果就是在點選上面的 TAB1 、 TAB2 及 TAB3 時，底下的文字區塊會跟著切換，這就是最簡單的頁籤功能了。


    頁面結構


    在 HTML 的部份也非常簡單，基本上是一個 UL 清單 (div.tabs ul) 加上三個 DIV 區塊 (div.tabBlock) ，最後再用一個大 DIV 區塊 (div#mytab) 把它們包起來。




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
    
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
<title>jQuery TEST</title>
    
<link href="mytab.css" rel="stylesheet" type="text/css" />
    
</head>
    
<body>
    
 
    
<div id="mytab">
    
<div class="tabs">
    
<ul>
    
<li class="active"><a href="#tab1"><span>TAB1</span></a></li>
    
<li><a href="#tab2"><span>TAB2</span></a></li>
    
<li><a href="#tab3"><span>TAB3</span></a></li>
    
</ul>
    
</div>
    
 
    
<div id="tab1" class="tabBlock">
    
有時候寫 jQuery 時，常會發現一些簡單的效果可以重複利用。只是每次用 Copy &amp; Paste 大法似乎不是件好事，有沒有什麼方法可以讓我們把這些效果用到其他地方呢？
    
</div>
    
<div id="tab2" class="tabBlock">
    
沒錯，就是用 jQuery 的 Plugin 機制。不過 jQuery 的 Plugin 機制好像很難懂？其實一點也不。以下我用最簡單的方式來為大家解說如何自製一個簡單的 Plugin 。
    
</div>
    
<div id="tab3" class="tabBlock">
    
當然在此之前，你得先瞭解 JavaScript 的 class 、 object 、 variables scope 還有 anonymous function 等基礎...
    
</div>
    
</div>
    
 
    
<script type="text/javascript" src="jquery/1.2.3.js"></script>
    
<script type="text/javascript" src="jquery/mytab.js"></script>
    
<script type="text/javascript">
    
$(function () {
    
    $('#mytab').mytab();
    
});
    
</script>
    
</body>
    
</html>



    當然別忘了把 JavaScript 檔案引入，這裡我先把 mytoolbox.js 改為 mytab.js ，因為我們要做的是頁籤。


    而頁籤樣式的部份則以是 CSS 來完成，請把它存檔並命名為 mytab.css ：




    div.tabBlock {
    
clear:both;
    
margin-top:-1px;
    
border:1px solid #CCC;
    
padding:5px;
    
}
    
div.tabs {
    
margin-bottom:-1px;
    
overflow:hidden;
    
}
    
div.tabs ul {
    
margin:0;
    
padding:0;
    
list-style:none;
    
}
    
div.tabs ul li {
    
float:left;
    
height:25px;
    
margin:0 3px;
    
line-height:25px;
    
font-size:9pt;
    
border:1px solid #CCC;
    
overflow:hidden;
    
}
    
div.tabs ul li a {
    
display:block;
    
padding:3px;
    
color:#000;
    
text-decoration:none;
    
}
    
div.tabs ul li.active a,
    
div.tabs ul li a:hover {
    
color:#FFF;
    
background:#999;
    
}



    這裡我們就不深究 CSS 怎麼做的了，有興趣的朋友請自行參考相關書籍。


    準備 Plugin 樣版


    現在把 Part 1 的 mytoolbox.js 複製為 mytab.js ，然後稍做修改，如下：




    ;(function($) {
    
    $.fn.mytab = function(settings) {
    
        var _defaultSettings = {};
    
        var _settings = $.extend(_defaultSettings, settings);
    
        var _handler = function() {
    
            // 從這裡開始
    
        };
    
        return this.each(_handler);
    
    };
    
})(jQuery);



    從上面的程式中可以看到我把 _defaultSettings 的內容清掉了，因為我們暫時用不到特別的設定。然後我把給 each 方法用的 callback 獨立為 _handler 函式，因為後面我們要做的動作大部份都會在這裡發生。


    呈現頁籤下的區塊


    在套上 CSS 後，我們會看到三個 div.tabBlock 區塊同時都顯示出來了，這樣做的目的其實是為了當瀏覽器沒有開 JavaScript 時還能呈現資訊。而在開啟了 JavaScript 後，我希望只呈現第一個 div.tabBlock 區塊，這時我們就可以利用 jQuery 來完成：




    var _handler = function() {
    
    $('div.tabBlock', this).hide().eq(0).show();
    
};



    在解釋原理之前，先回頭看一下 HTML 頁面呼叫 Plugin 的地方，你會發現我把 Plugin 套用在 div#mytab 這個元素上，所以在 _handler 裡的 this 其實是指向 div#mytab 。


    瞭解 this 代表的意義後，接著回到 _handler 中，我們就可以知道第一行的 $(‘div.tabBlock’, this) 其實就是指抓取 div#mytab 底下的三個 div.tabBlock 元素。所以第一行我們先把所有的 div.tabBlock 隱藏起來，然後利用 .eq(0).show() 把第一個 div.tabBlock 顯示出來。


    讓頁籤動起來


    接著我們先讓頁籤在點選時能夠切換它的反白狀態，而反白的效果我們已經定義 CSS 裡了，也就是讓 LI 的 class 變成 active 即可：




    var _handler = function() {
    
    $('div.tabBlock', this).hide().eq(0).show();
    
    $('div.tabs li a', this).click(function () {
    
        $('div.tabs li').removeClass('active');
    
        $(this).parent('li').toggleClass('active');
    
        return false;
    
    });
    
};



    這邊的原理也很簡單，首先先讓所有 div.tabs li 都移除反白效果，然後再對我們按的連結的上一層 LI 元素套上 active 。注意這裡也有個 this ，它代表的是目前點選的頁籤連結。


    最後我們要 return false ，以阻止 click 事件被往上傳遞。


    現在點選看看頁籤連結，是不是能反白了呢？


    註：滑過頁籤會呈現反白這個效果也是定義在 CSS 裡，試著找找看吧。


    記住「這個」


    在繼續完成效果前，有個問題我得先說明一下。雖然我們在測試頁面上只佈置了一個 Tab 元件，不過很難保證頁面上不會有其他地方也會用到頁籤效果，這時我們的 Plugin 可能會產生副作用。


    問題出在 $(‘div.tabs li’).removeClass(‘active’) 這行，因為我們不能確定頁面其他地方是不是也有有元素符合 $(‘div.tabs li’) 。所以我在這裡應該要明確指定這些 LI 元素應該屬於那個元素，也就是 $(‘div.tabs li a’, this) 的 this (即 div#mytab ) 。


    不過在 click 方法指定的匿名函式中， this 又指到 a 元素，而不是我們要的 div#mytab ；那麼有什麼方法能在 click 中找到 div#mytab 呢？總不能把 div#mytab 寫死在 Selector 中吧？其實方法很簡單，就是在 click 外先定義一個新變數指向外部的 this ：




    var _handler = function() {
    
    var container = this; // 加入這行，並將以下表示 div#mytab 的 this 改為 container
    
    $('div.tabBlock', container).hide().eq(0).show();
    
    $('div.tabs li a', container).click(function () {
    
        $('div.tabs li', container).removeClass('active');
    
        $(this).parent('li').toggleClass('active'); // 這個 this 不用動，它表示 a 元素
    
        return false;
    
    });
    
};



    因為在 click 的匿名函式會繼承外部的作用域，使得 container 的 scope 得以存在於 click 的 callback 裡；因此我們就能放心的使用 container 來表示 div#mytab 了。


    註：在 click 裡的 callback 又有另一個名稱： closure ，因為它用到了外部 function 所定義的變數。


    切換對應的區塊


    接著繼續完成我們要的功能，也就是切換頁籤對應的區塊。


    這裡我用了連結錨點的技巧，這個技巧本身有個優點：就是當 JavaScript 被禁用時，錨點還能正常動作。而錨點的名稱剛好就是頁籤所對應的內容區塊 ID ，這就方便我們找到要顯示的內容區塊。


    程式碼如下：




    var _handler = function() {
    
    var container = this;
    
    $('div.tabBlock', container).hide().eq(0).show();
    
    $('div.tabs li a', container).click(function () {
    
        $('div.tabs li', container).removeClass('active');
    
        $(this).parent('li').toggleClass('active');
    
        $('div.tabBlock', container).hide(); // 先全部藏起來
    
        var id = (String(this.href).match(/(#.+)$/))[1]; // 只抓對應的 tabBlock id
    
        $(id).show(); // 顯示對應的 tabBlock
    
        return false;
    
    });
    
};



    原理一樣很簡單，當按下頁籤連結時，先隱藏所有內容區塊 (div.tabBlock) ，然後取得連結的 href 位址中的錨點名稱，以顯示頁籤所對應的內容區塊。不過這裡要注意一點，那就是瀏覽器通常會幫我們在錨點名稱前加入目前完整的網址；因此我這裡便使用正規式來取得帶井字號的錨點名稱，也剛好直接讓 jQuery 使用。


    減少多餘的查詢


    再看一次程式，我發現有個地方重複查詢了兩次，那就是 $(‘div.tabBlock’, container) ；第一次是在我們只顯示第一個內容區塊時，而第二次則在點選連結時要隱藏所有內容區塊時。這裡我們可以利用暫存變數來解決：




    var _handler = function() {
    
    var container = this;
    
    var $tabBlocks = $('div.tabBlock', container); // 加入這行
    
    $tabBlocks.hide().eq(0).show(); // 改用 $tabBlocks
    
    $('div.tabs li a', container).click(function () {
    
        $('div.tabs li', container).removeClass('active');
    
        $(this).parent('li').toggleClass('active');
    
        $tabBlocks.hide(); // 改用 $tabBlocks
    
        var id = (String(this.href).match(/(#.+)$/))[1];
    
        $(id).show();
    
        return false;
    
    });
    
};



    不過也不是每個重複的查詢都要用暫存變數，因為假設當你在 Plugin 運作的過程中，對 div.tabBlock 有進行增減的話，那麼重複再查一次就是必要的動作了，這樣才能確保我們抓到正確數量的元素集。


    到這裡我們的 mytab.js 初版算是完成了，試試看它是不是依照我們的要求正確動作呢？


    加強 Plugin


    雖然我們的 Plugin 已經可以動作了，但其實還是有些地方可以加強；而加入這些功能其實就是為了讓 Plugin 能更有彈性，以應付各種不同的狀況。


    這裡我簡單介紹兩個加強的功能：


    由外部決定 class


    我們希望可以指定 active 的名稱，讓外部可以自行決定。我們在 _defaultSettings 中多定義了一個 activeClass 項目，然後把程式裡的所有 ‘active’ 改為 _settings.activeClass 。程式碼修改如下：




    $.fn.mytab = function(settings) {
    
    var _defaultSettings = {
    
        activeClass: 'active'
    
    };
    
    var _settings = $.extend(_defaultSettings, settings);
    
    var _handler = function() {
    
        var container = this;
    
        var $tabBlocks = $('div.tabBlock', container);
    
        $tabBlocks.hide().eq(0).show();
    
        $tabLinks.click(function () {
    
            $tabLists.removeClass(_settings.activeClass);
    
            $(this).parent('li').toggleClass(_settings.activeClass);
    
            $tabBlocks.hide();
    
            var id = (String(this.href).match(/(#.+)$/))[1];
    
            $(id).show();
    
            return false;
    
        });
    
    };
    
    return this.each(_handler);
    
};



    同樣的原理，我們可以更改 div.tabs 和 div.tabBlock 的 class 名稱，這邊我留給各位自行試試。


    自動切換內容區塊


    現在我希望進入頁面時，能讓內容區塊自動跳到我指定的頁籤。這裡我有兩種方式可以指定：由網址決定以及用 Server 程式決定。


    以網址決定就是我們在瀏覽器的網址列的網址後面再加上錨點名稱，例如：


    http://localhost/mytab.htm#tab2


    這個網址可以由外部的網頁以連結的方式指定，這樣的話進入我們這個頁籤畫面時，我們就可以依照這個錨點來決定要顯示的內容區塊。程式很簡單：




    var _handler = function() {
    
    var container = this;
    
    var $tabBlocks = $('div.tabBlock', container);
    
    // 加入以下這段
    
    var matches = (String(location.href).match(/(#.+)$/));
    
    if (null !== matches) {   // 有找到網址錨點的話就切換內容
    
        var id = matches[1];
    
        $tabBlocks.hide();    // 先把全部的內容區塊藏起來
    
        $(id).show();         // 顯示錨點對應的內容區塊
    
        // 將對應的頁籤連結反白
    
        $('div.tabs li', container).removeClass(_settings.activeClass);
    
        $('div.tabs li a', container).each(function () {
    
            if (-1 !== String(this.href).indexOf(id)) {
    
                $(this).parent('li').toggleClass(_settings.activeClass);
    
            }
    
        });
    
    } else {
    
        $tabBlocks.hide().eq(0).show();
    
    }
    
    // ... 略 ...
    
};



    原理就是透過錨點來顯示對應的內容區塊，再跟著把對應頁籤連結反白即可；如果沒有指定錨點的話，就顯示第一個內容區塊。


    當然別忘了重構，把多餘的查詢動作用暫存變數取代：




    var _handler = function() {
    
    var container = this;
    
    var $tabBlocks = $('div.tabBlock', container);
    
    var $tabLists = $('div.tabs li', container);
    
    var $tabLinks = $('div.tabs li a', container);
    
 
    
    var matches = (String(location.href).match(/(#.+)$/));
    
    if (null !== matches) {
    
        var id = matches[1];
    
        $tabBlocks.hide();
    
        $(id).show();
    
        $tabLists.removeClass(_settings.activeClass);
    
        $tabLinks.each(function () {
    
            if (-1 !== String(this.href).indexOf(id)) {
    
                $(this).parent('li').toggleClass(_settings.activeClass);
    
            }
    
        });
    
    } else {
    
        $tabBlocks.hide().eq(0).show();
    
    }
    
 
    
    $tabLinks.click(function () {
    
        $tabLists.removeClass(_settings.activeClass);
    
        $(this).parent('li').toggleClass(_settings.activeClass);
    
        $tabBlocks.hide();
    
        var id = (String(this.href).match(/(#.+)$/))[1];
    
        $(id).show();
    
        return false;
    
    });
    
};



    回到主題，我們的另外一種指定內容區塊的方式就是在 Server 端輸出 HTML 時，就先決定好 active 的 LI 元素了。假設現在頁籤部份的 HTML 如下：




    <div class="tabs">
    
<ul>
    
<li><a href="#tab1"><span>TAB1</span></a></li>
    
<li class="active"><a href="#tab2"><span>TAB2</span></a></li>
    
<li><a href="#tab3"><span>TAB3</span></a></li>
    
</ul>
    
</div>



    現在 TAB2 這個 LI 元素的 class 是 active ，那麼我們應該怎麼自動切換到對應的內容區塊呢？很簡單，就讓 li.active 底下的 a 「點下去」就可以了。程式如下：




    var _handler = function() {
    
    // ... 略 ...
    
 
    
    $tabLinks.click(function () {
    
        $tabLists.removeClass(_settings.activeClass);
    
        $(this).parent('li').toggleClass(_settings.activeClass);
    
        $tabBlocks.hide();
    
        var id = (String(this.href).match(/(#.+)$/))[1];
    
        $(id).show();
    
        return false;
    
    });
    
 
    
    // 加入這段
    
    var $activeLink = $('div.tabs li.' + _settings.activeClass + ' > a', container);
    
    if (0 !== $activeLink.size()) {
    
        $activeLink.trigger('click')


    　共 1 人回應　　選擇頁數 【第1 頁】 

    姓名：
    佈告內容：