3三月/120
【自製】 jQuery Plugin - 網頁頁籤
前言
在製作網頁的時候在內文很多的時候,通常會採用頁籤的方式來呈現多個內容,而自己也有一段常用的 jQuery 產生頁籤的語法,因為還蠻常用到的,就把它包成 jQuery Plugin 方便自己使用,也分享給大家囉!
版本記錄
1.0.0 2012/03/03 初版
實作
下載外掛
掛載外掛
1 2 |
<script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script src="jquery.tab.js" type="text/javascript"></script> |
要產生頁籤的 Html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
頁籤 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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。
呼叫外掛
1 |
$("#Tab").tab(); |
呼叫的方式相當簡單,而裡面可以傳的參數以及預設值分別如下說明。
預設參數值
1 2 3 4 5 6 |
{ 'tabbtn': '.TabBtn li a', // Tab 按鈕 'tabcontent': '.TabBlock div', // 內文區塊 'activecss': 'active', // 點選中的樣式 'event': 'click' // 事件。可以改成 mouseenter ,就是滑鼠移過去的事件 } |
執行範例
結論
花了一點時間把自己寫過的東西打包一下,也分享給需要的網友囉!如果您有下載使用及修改的話,記得分享一下喔!這一個外掛還很陽春,因為目前是還符合自己使用,所以有時間在慢慢增加多一點功能囉!或是可以參閱參考資料,他的方式和我些許不同,也有一些動態的效果,有需要也可以參考看看喔!
Leave a comment