3三月/120

【自製】 jQuery Plugin - 網頁頁籤

前言

在製作網頁的時候在內文很多的時候，通常會採用頁籤的方式來呈現多個內容，而自己也有一段常用的 jQuery 產生頁籤的語法，因為還蠻常用到的，就把它包成 jQuery Plugin 方便自己使用，也分享給大家囉！

版本記錄

1.0.0 2012/03/03 初版

實作

下載外掛

連結

掛載外掛

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.tab.js" type="text/javascript"></script>

1 2	<script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script src="jquery.tab.js" type="text/javascript"></script>

要產生頁籤的 Html

<div id="Tab">
    <ul class="TabBtn">
        <li><a href="#tab">Tab1</a></li>
        <li><a href="#tab">Tab2</a></li>
        <li><a href="#tab">Tab3</a></li>
    </ul>
    <div class="TabBlock">
        <div>
            這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。</div>
        <div>
            這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。</div>
        <div>
            這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。</div>
    </div>
</div>

</ul>

<div>

這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。這是第一段文字內容。</div>

<div>

這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。這是第二段文字內容。</div>

<div>

這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。這是第三段文字內容。</div>

</div>

頁籤 CSS

    ul, li
    {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #Tab
    {
        width: 500px;
    }
    .TabBtn
    {
        width: 100%;
        height: 32px;
        border-bottom: 1px solid #999;
        border-left: 1px solid #999;
    }
    .TabBtn li
    {
        float: left;
        height: 31px;
        line-height: 31px;
        overflow: hidden;
        position: relative;
        margin-bottom: -1px;
        border: 1px solid #999;
        border-left: none;
        background: #e1e1e1;
    }
    .TabBtn li.active
    {
        background: #fff;
        border-bottom: 1px solid#fff;
    }
    .TabBtn li a
    {
        display: block;
        padding: 0 20px;
        color: #000;
        border: 1px solid #fff;
        text-decoration: none;
    }
    .TabBlock div
    {
        display: none;
        clear: left;
        border: 1px solid #999;
        border-top: none;
        background: #fff;
        height: 300px;
        padding: 10px;
    }

ul, li

{

margin: 0;

padding: 0;

list-style: none;

}

#Tab

{

width: 500px;

}

.TabBtn

{

width: 100%;

height: 32px;

border-bottom: 1px solid #999;

border-left: 1px solid #999;

}

.TabBtn li

{

float: left;

height: 31px;

line-height: 31px;

overflow: hidden;

position: relative;

margin-bottom: -1px;

border: 1px solid #999;

border-left: none;

background: #e1e1e1;

}

.TabBtn li.active

{

background: #fff;

border-bottom: 1px solid#fff;

}

.TabBtn li a

{

display: block;

padding: 0 20px;

color: #000;

border: 1px solid #fff;

text-decoration: none;

}

.TabBlock div

{

display: none;

clear: left;

border: 1px solid #999;

border-top: none;

background: #fff;

height: 300px;

padding: 10px;

}

CSS 部分因為小弟美感不是很好...Orz，因此有參閱參考連結的文章的 CSS。

呼叫外掛

$("#Tab").tab();

1	$("#Tab").tab();

呼叫的方式相當簡單，而裡面可以傳的參數以及預設值分別如下說明。

預設參數值

{
    &#039;tabbtn&#039;: &#039;.TabBtn li a&#039;,   // Tab 按鈕
    &#039;tabcontent&#039;: &#039;.TabBlock div&#039;,  // 內文區塊
    &#039;activecss&#039;: &#039;active&#039;,  // 點選中的樣式
    &#039;event&#039;: &#039;click&#039;    // 事件。可以改成 mouseenter ，就是滑鼠移過去的事件
}

{

'tabbtn': '.TabBtn li a', // Tab 按鈕

'tabcontent': '.TabBlock div', // 內文區塊

'activecss': 'active', // 點選中的樣式

'event': 'click' // 事件。可以改成 mouseenter ，就是滑鼠移過去的事件

}

執行範例

線上 Demo

打包下載

結論

花了一點時間把自己寫過的東西打包一下，也分享給需要的網友囉！如果您有下載使用及修改的話，記得分享一下喔！這一個外掛還很陽春，因為目前是還符合自己使用，所以有時間在慢慢增加多一點功能囉！或是可以參閱參考資料，他的方式和我些許不同，也有一些動態的效果，有需要也可以參考看看喔！

參考資料

[jQ]利用 jQuery 來製作網頁頁籤(Tab)

回覆 (0) 引用 (0) ( 訂閱此篇文章的回覆 )

還沒有回覆。

文章彙整

文章分類

其他 (9)
未分類 (1)
程式開發技術 (7)
- C# (4)
- Linq (4)
網路程式設計 (20)
- ASP.Net (5)
- ASP.Net MVC (17)
- WCF (1)
網頁開發技術 (8)
- CSS (1)
- JavaScript (1)
- jQuery (4)
- Mobile Web (2)
開發相關軟體 (4)
- Internet Information Service (2)
- SQL Server (1)
- Visual Studio (1)

鏈結

網站資訊

授權聲明

姓名標示-非商業性-禁止改作 3.0
姓名標示 - 您必須保留原作姓名標示
非商業性 - 您不得為商業使用本著作
禁止改作 - 您不得改變或改作本著作

Coding 之路，不由分說 .Net,MVC,jQuery

【自製】 jQuery Plugin - 網頁頁籤

前言

版本記錄

實作

下載外掛

掛載外掛

要產生頁籤的 Html

頁籤 CSS

呼叫外掛

執行範例

結論

參考資料

Leave a comment 取消回覆

文章彙整

文章分類

標籤

鏈結

近期文章

近期迴響

網站資訊

授權聲明