Tạo các Tab nội dung - phần 1 - 1 October 2010 - All 4 You
Friday, 24-Feb-2017, 4:56 PM
Welcome Guest | RSS
Main » 2010 » October » 1 » Tạo các Tab nội dung - phần 1
2:08 PM
Tạo các Tab nội dung - phần 1
Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.

1. Kiểu 1

Tab mẫu mình giới thiệu chỉ có 2 màu trắng đen, rất giản dị và dễ phù hợp khi các bạn đưa vào blog của mình nếu không muốn chỉnh sửa gì nhiều.

Như các bạn đã biết, muốn tạo các tab nội dung như vậy thì nhất thiết phải dùng tới javascript, và ở đây cụ thể là jQuery ( Tuy nhiên cũng có thể dùng CSS để tạo tab dạng này nhưng nó trông không được pro cho lắm ). Do đó để cho tab được load nhanh, mình có lời khuyên là không nên dùng javascript vào trong các nội dung của tab. Các bạn nên thêm các thủ thuật đơn thuần chỉ là HTML. Như thế tab của mình sẽ load nhanh

Hình ảnh minh họa thủ thuật :

Và bên dưới là code của thủ thuật: (các bạn tạo mội widget HTML/Javascript rồi dán code của thủ thuật vào)

Code
<link rel="stylesheet" href="http://all4u.dmon.com/CSS/style.css" type="text/css" media="screen">

<script src="http://all4u.dmon.com/Js/jquery-1.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>

<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">

<ul class="tabs">
<li><a href="#" title="content_1" class="tab active">
Tips</a></li>
<li><a href="#" title="content_2" class="tab">
Archives</a></li>
<li><a href="#" title="content_3" class="tab">
Pages</a></li>
</ul>

<div style="display: block;" id="content_1" class="content">
<!-- nội dung của tab1 -->
<ul>
<li><a href="#">HTML Techniques <small>24 Posts</small></a></li>
<li><a href="#">CSS Styling <small>32 Posts</small></a></li>
<li><a href="#">Blogspot Tutorials <small>112 Posts</small></a></li>
<li><a href="#">Web Design <small>19 Posts</small></a></li>
</ul>
<!-- END nội dung của tab1 -->
</div>

<div style="display: none;" id="content_2" class="content">
<!-- nội dung của tab2 -->
<ul>
<li><a href="#">November 2009 <small>4 Posts</small></a></li>
<li><a href="#">October 2009 <small>22 Posts</small></a></li>
<li><a href="#">September 2009 <small>12 Posts</small></a></li>
<li><a href="#">August 2009 <small>43 Posts</small></a></li>
<li><a href="#">July 2009 <small>15 Posts</small></a></li>
</ul>
<!-- END nội dung của tab2 -->
</div>

<div style="display: none;" id="content_3" class="content">
<!-- nội dung của tab3 -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toturials</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
<!-- END nội dung của tab3 -->
</div>

</div>
</div>

- Khác với khác thủ thuật trước, mình không đưa code CSS vào trong thủ thuật mà đưa link (để code cho đỡ rườm rà). Nếu bạn nào muốn thay đổi lại cho phù hợp thì download file CSS về (http://all4u.dmon.com/CSS/style.css) và thay đổi lại code chút ít cho phù hợp. Các bạn có thể tùy chỉnh lại code CSS ở 1 vài điểm chủ yếu như bên dưới :

Code
#tabbed_box_1 {
margin: 40px auto 40px auto;
width:300px; /*độ rộng của tab*/
}
...
...
...

.tabbed_area {
border:1px solid #494e52;
background-color:#636d76; /*màu nền của tab (nền đen bên ngoài)*/
padding:7px;
}


- Lưu ý : khi thêm tab vào, các bạn nên thay đổi lại độ rộng của tab, nếu không sẽ bị lỗi nhỏ như bên dưới


- và code để thay đổi là đây (trong file CSS)

Code
#tabbed_box_1 {
margin: 40px auto 40px auto;
width:300px; /*độ rộng của tab*/
}


2. Kiểu 2

Cách này việc hiển thị không đẹp và pro bằng cách trên được. Nhưng mình vẫn giới thiệu để các bạn tham khảo nha.



Cách làm sau sẽ giúp bạn điều đó. Ví dụ ngay code thống kê của Menu Thiết kế web của all4u.dmon.com, bạn hãy tùy chỉnh theo ý của bạn rồi paste đoạn code vào nơi bạn muốn hiển thị:

Code

<TABLE cellpadding="0" cellspacing="0" width="100%" height="300" border="0" algin="top"><TBODY><TR><TD><div align="top"><table algin="Left" width="100%" background="http://all4u.dmon.com/Thiet_ke_web.png" border="0" cellpadding="0" cellspacing="0" height="22"><tbody><tr><td><font color: rgb(129, 99, 0)><center>MỚI CẬP NHẬT</center></font></td></tr></tbody></table></div>

<div align="center"><table algin="Left" width="100%" background="" border="0" cellpadding="0" cellspacing="0" height="30" bgcolor="FFFFFF"><tbody><tr><td><font color="#fff173"><style type="text/css">

#thebuttons {

list-style:none;

width:100%;

margin:auto;

padding:0 0 0 2px;

}

#thebuttons a {

float:left;

width:100;

font-weight:bold;

padding:2px 0;

margin:2px auto;

text-align:center;

border:1px solid #ffffff;

text-decoration: none;

}

 

#stories {

margin:0em auto;

border:0px none;

clear:left;

padding:0em;

height:198px;

width:100%;

overflow:auto;

}

</style>

<div class=meta><dl>

<table border="0" cellpadding="0" cellspacing="1" align=center>

<tr><td width=100% valign=top>

<div id="thebuttons">

<a href="#storyA" title="Bài mới đăng">BÀI VIẾT MỚI</a>

<a href="#storyB" title="Toàn tập về Dmon/ Ucoz">DMON/ UCOZ</a>

<a href="#storyC" title="Các Code hay">CODE</a>

<a href="#storyD" title="Thiết kế giao diện web">DESIGN</a>

<a href="#storyE" title="Edit Template">TEMPLATE</a>

</div>

  <DIV id="stories">

  <div id="storyA" class="story">

$MYINF_15$

  </div>

  <div id="storyB" class="story">

$MYINF_16$

  </div>

  <div id="storyC" class="story">

$MYINF_17$

  </div>

  <div id="storyD" class="story">

$MYINF_18$

  </div>

  <div id="storyE" class="story">

$MYINF_19$

  </div>

 

  </DIV>

</td></tr></table>

</div>

<script>

function hidestories() {

var divs=document.getElementById('stories').getElementsByTagName('div');

for (j=0; j<divs.length; j++) {

var rE = new RegExp("(^|\\s)" + 'story' + "(\\s|$)");

if (rE.test(divs[j].className)) {

divs[j].style.display="none";

}

}

}

 

function stories(first) {

var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');

for (i=0; i<thebuttons.length; i++) {

thebuttons[i].onclick=function() {

hidestories();

var thestory=(this.href).split("#",2)[1];

document.getElementById(thestory).style.display="block";

return false;

}

}

if (first) {

var firstone=document.getElementById('stories').firstChild;

if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}

firstone.style.display="block";

}

}

//window.onload=function() {

hidestories();

stories(1);

//document.getElementById("imgLOAD").style.display="none";

//ShowAdDiv();

//}

</script>

<br></font></td></tr></tbody></table></div>

</TD></TR></TBODY></TABLE>


Bạn hãy thay đổi các thông tin màu đỏ theo mục đích của bạn. Các thông tin còn lại thì nên để nguyên.

Hoặc sử dụng đoạn code sau (chờ xem lại)

Code

<div class="meta"><dl>

<table width="550" align="left" border="1px" cellpadding="3" cellspacing="0" height="400">

<tbody><tr><td valign="top" width="400px">

<div id="thebuttons">

<!-- nút bấm -->

<div id="navigation">

<a href="#storyA"><span>Trang chủ</span></a>

<a href="#storyB"><span>Giới thiệu về lớp</span></a>

<a href="#storyC"><span>Thời khóa biểu</span></a>

 

 

<style type="text/css">

 

/*Tao mau vang cho menu */

#navigation a span

{

background: url("http://game.24h.com.vn/images/btn-box-search.gif") right top no-repeat;

padding-right: 10px;

font-weight:bold

}

#navigation a

{

color: #000;

background: #fb0 url("images/left_tab.gif") left top no-repeat;

text-decoration: none;

padding-left: 10px

}

 

/*Doi mau thi di chuot len menu*/

#navigation a:hover

{

color: #fff;

background: #26a url("images/left_tab_blue.gif") left top no-repeat;

text-decoration: none;

padding-left: 10px

}

 

#navigation a:hover span

{

background: url("images/right_tab_blue.gif") right top no-repeat;

padding-right: 10px

}

#border {height:1em; background:} </style>

<!-- nút bấm -->

</div>

 <!-- nội dung -->

<div id="stories">

 

<div id="storyA" class="story">

<!-- chữ neon -->

<script language="JavaScript1.2">

var message="Nội dung ô 1"

var neonbasecolor="black"

var neontextcolor="red"

var flashspeed=100 //in milliseconds

 

//No need to edit below this line/////

 

var n=0

if (document.all||document.getElementById){

document.write('')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('')

}

else

document.write(message)

function crossref(number){

var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

return crossobj

}

function neon(){

//Change all letters to base color

if (n==0){

for (m=0;m<message.length;m++)

//eval("document.all.neonlight"+m).style.color=neonbasecolor

crossref(m).style.color=neonbasecolor

}

//cycle through and change individual letters to neon color

crossref(n).style.color=neontextcolor

if (n<message.length-1)

n++

else{

n=0

clearInterval(flashing)

setTimeout("beginneon()",1500)

return

}

}

function beginneon(){

if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)

}

beginneon()

</script>

<!-- chữ neon -->


 </div>

 

<div id="storyB" class="story">

Nội dung ô 2

</div>

 

<div id="storyC" class="story">

Nội dung ô 3

</div>

</div></div></td></tr></tbody></table>

</dl></div>



Category: Tab Content | Views: 811 | Added by: all4u | Rating: 0.0/0
Total comments: 1
1  
Lighthouse' and you will find most of them. Ocean World is a small tourist trap but you get to pet sakrhs and the seal trainer is kind of cute so there is that.Best food is out at Gordo Bros., turn left on Elk Valley Rd. (last light as you go south), they are one mile and on the right, they are open odd hours though, like 11 to 3 and then 5 to 9 but well worth it. Best Taco's on the North Coast.For camping, remember Enderts Beach Rd, at the end of the long South Beach area. Back in there will be primitive camping but lots of free firewood and should be berries too. Glad your bike is holding up. Oh, there should be some small surf there too, you can rent from a small surf shop right there on the water, turn right where you see the beach start and just past the RV park is South Beach surf shop. Oh, that RV park has free wi-fi and it works on the beach too almost all the way to the cafe in the middle of south beach.You could also camp out at the end of that little road near the CG hdqrtrs.Take care, Tony

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page