Welcome Guest [Log In] [Register]
Chào mừng bạn đến với »»--(¯`°ZetaFamily°´¯)--»» - nơi chia sẽ những thủ thuật cho forum Zetaboards

-‘๑’- Bạn hiện đang xem diễn đàn của chúng tôi với tư cách là Khách.Điều này có nghĩa là bạn sẽ không thấy được hệ thống các code được chia sẽ trên diễn đàn.

-‘๑’- Đăng Ký rất đơn giản, nhanh chóng, và hoàn toàn miễn phí. Nhấp chuột vào ĐÂY

-‘๑’- Sử dụng Firefox để đăng nhập Forum dễ dàng hơn !

-‘๑’- Nếu đã có tài khoản hãy đăng nhập dưới đây :

-‘๑’- Chúc bạn một ngày tốt lành -‘๑’-

Username:   Password:
Add Reply
[ZB code] Tab thông báo
Topic Started: Jun 18 2011, 02:10 PM (469 Views)
ZetaFamily
Member Avatar
Tôi yêu Zetaboards

Code này nằm trong theme inDecisive
Name of Theme: inDecisive
Authors: Designed by yunjung0518 and Coded by Cory
Preview: http://s4.zetaboards.com/EnC/index/ [bảng thông báo có Upload tab]

Code:
 

<script type="text/javascript" src="http://z4.ifrm.com/30288/136/0/f5180778/tabcontent.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

<div id="tabs">
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Project 1</a></li>
<li><a href="#" rel="country2">Update 1</a></li>
<li><a href="#" rel="country3">Update 2</a></li>
</ul>

<div id="tabbed_box">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>
</div>

<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>


Đặt thêm vào CSS

Code:
 
#tabs {
background: #E4E2E2;
box-shadow: inset 0 0 6px #8A8A8A;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px 7px 7px;
margin: 1% 1% 0;
}

#tabbed_box {
background: #FFF;
padding: 10px;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}

.shadetabs {
padding: 3px 0;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left;
}

.shadetabs li {
display: inline;
margin: 0;
}

.shadetabs li a {
background: url(http://z3.ifrm.com/28122/87/0/p410555/static.png) 2px center no-repeat;
text-decoration: none;
position: relative;
z-index: 1;
padding: 5px 10px 3px 20px;
margin-right: 3px;
color: #4C4C51;
}

.shadetabs li a.selected {
position: relative;
top: 1px;
background: url(http://z3.ifrm.com/28122/87/0/p410554/selected.png) 2px center no-repeat #FFF;
color: #F47070;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}

.tabcontent {
display: none;
}




Project 1 - Update 1 -Update 2 : Thay đổi tên tùy ý

Các bạn thay đồi nội dung tùy ý
Code:
 
<div id="country1" class="tabcontent">
nội dung<br />nội dung<br />
</div>


Lưu trữ Source code:
http://z4.ifrm.com/30288/136/0/f5180778/tabcontent.js
Offline Profile Quote Post TOP
 
tangbangnho
No Avatar


code này hình như còn thiếu phần CSS đi kèm hay sao đó. Mình đã test rồi. Đi với theme khác, thì code này bị lỗi
Offline Profile Quote Post TOP
 
Kennu75
Member Avatar
Lord of the Beast

Nó đây, bạn dùng Google Chrome xem là biết hết css của nó thế nào
Quote:
 

#tabs {
background: #E4E2E2;
box-shadow: inset 0 0 6px #8A8A8A;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px 7px 7px;
margin: 1% 1% 0;
}

#tabbed_box {
background: #FFF;
padding: 10px;
border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}

.shadetabs {
padding: 3px 0;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left;
}

.shadetabs li {
display: inline;
margin: 0;
}

.shadetabs li a {
background: url(http://z3.ifrm.com/28122/87/0/p410555/static.png) 2px center no-repeat;
text-decoration: none;
position: relative;
z-index: 1;
padding: 5px 10px 3px 20px;
margin-right: 3px;
color: #4C4C51;
}

.shadetabs li a.selected {
position: relative;
top: 1px;
background: url(http://z3.ifrm.com/28122/87/0/p410554/selected.png) 2px center no-repeat #FFF;
color: #F47070;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
}

.tabcontent {
display: none;
}
Offline Profile Quote Post TOP
 
ZetaFamily
Member Avatar
Tôi yêu Zetaboards

Thank Kennu nhé, mình quên test...^^!
Offline Profile Quote Post TOP
 
tangbangnho
No Avatar


thêm đoạn CSS vô là ổn rồi. hihi
chịu khó ngồi edit css lại cho phù hợp với màu skin đang dùng, sẽ có bảng tin tức khá pro.
Offline Profile Quote Post TOP
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Code Forum · Next Topic »
Add Reply

Liên Kết Forum

Copyright©2011,ZetaFamily™.All rights reserved
Xem tốt nhất trên các trình duyệt FireFox hoặc Google Chrome
Diễn đàn là một hệ thống mở,chúng tôi sẽ không chịu trách nhiệm về nội dung đăng tải do người dùng đưa lên.
ZetaFamily Theme designed by ZetaFamily.Co.Cc