Hiển thị

Home »
Thứ Tư, 14 tháng 12, 2011

Tạo thanh tin tức (Hot News) dạng tab - trượt ngang cho blog (Mootools)

[FD's BlOg] - Có một bạn đã bắt gặp một tiện ích "Hot News" (dạng trượt trượt ngang, có hình ảnh minh họa) ở 1 blog của wroldpress, và có nhờ mình hướng dẫn giùm thủ thuật này. Và bài viết này mình sẽ hướng dẫn các bạn thủ thuật tương tự như vậy cho blogger.Lưu ý là thủ thuật chỉ hướng dẫn tạo tab trượt để chứa nội dung, nội dung của tab là do các bạn tự sọan.

Đây là hình ảnh từ blog worldpress

Và đây là hình minh họa thủ thuật mình sẽ hướng dẫn:

Xem trực tiếp demo : http://data.fandung.com/blog/demo/tabnews-mootools/tabnews.html
☼ Bây giờ mình sẽ hướng dẫn sơ để các bạn hình dung được thủ thuật:
- Đầu tiên chúng ta sẽ có 1 vùng để chứa các tab, gọi là tab chính ( id="stage" ):

- Thứ 2 là vùng chứa các buttom (id="slider-buttom"):

- Và cuối cùng là các tab(id="myList") để chứa nội dung, các tab này sẽ nằm trong tab chính(id="stage"):

☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML, và dán đọan code javascript vào sau thẻ <head> (hoặc trước thẻ </head>

<script type="text/javascript" src="http://data.fandung.com/js/mootools.svn.js"></script>

4. Tiếp tục chép đọan code CSS vào ngay trên dòng ]]></b:skin>:

#stage{
width:648px;
overflow: auto;
overflow-x:hidden;
overflow-y:hidden;
height:100px;
margin:0 auto;
}

/* ------------------------------------ */
/* List Elements */

#myList{
width:1000px;
border:0;
margin:0;
padding:0;
left:400px;
}

#myList li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:2px;
padding:2px;
background:#ccc;
float:left;
width:100px;
height:100px;
border-left:solid 2px #DEDEDE;
}

#myList li.special{
background:#efefef;
}

/* ------------------------------------ */
/* Buttons */

#slider-buttons{
width:648px;
margin:0 auto;
margin-top:2px;
height:24px;
line-height:24px;
clear:both;
background:#CCCCCC;
}

#slider-buttons a{
font-weight:bold;
color:#444;
}

#slider-buttons a:hover{
background:#888;
color:#FFF;
}

#previous{
float:left;
width:70px;
border-right:solid 1px #FFF;
text-align:center;
}

#next{
float:right;
width:70px;
border-left:solid 1px #FFF;
text-align:center;
}

- Chú ý :

+ width:648px; : độ rộng của vùng hiển thị các tabnews. (để tính kích thước cho phù hợp với các tab con mình sẽ nói ở bên dưới)
+ width:100px;, height:100px; : kích thước của khung tabnews.
+ width:1000px; : độ rộng của tòan bộ (kể cả vùng bị ẩn)vùng chứa các tabnews. Và lưu ý là độ rộng này phải lớn hơn hoặc bằng tổng độ rộng các tabnews.

5. Sau đó save template lại.
6. Tạo một wiget HMTL/Javascript, và chèn code bên dưới vào:

<script type="text/javascript">
window.addEvent('domready', function(){
var totIncrement = 0;
var increment = 108;
var maxRightIncrement = increment*(-3);
var fx = new Fx.Style('myList', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});

//-------------------------------------
// EVENTS for the button "previous"
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement+increment;
fx.stop()
fx.start(totIncrement);
}
}
});

//-------------------------------------
// EVENTS for the button "next"
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement-increment;
fx.stop()
fx.start(totIncrement);
}
}


})


});
</script>

//-----code HTML
<div id="stage">
<ul id="myList">
<li id="l1">
Tab 1 Content
</li>

<li id="l2">
Tab 2 Content
</li>

<li id="l3" class="special">
Tab 3 Content
</li>

</ul>
</div>
<div id="slider-buttons">
<a href="#" id="previous">Previous</a>
<a href="#" id="next">Next</a>
</div>

- Chú ý:
☼ Phần code javascript:
+ var increment = 108; : đây là khỏang không gian sẽ bị trượt khi ta nhấp vào buttom (tính bằng pixel), ở đây khỏang không gian trượt sẽ được tính tương ứng với 1 tabnews. Để tính độ rộng này các bạn xem code CSS của thẻ <li> :

#myList li{
list-style:none;
margin:0;
padding:0;
border:0;
margin-right:2px;
padding:2px;
background:#ccc;
float:left;
width:100px;
height:100px;
border-left:solid 2px #DEDEDE;
}

Nhìn vào hình minh họa ta sẽ tính được độ rộng này sẽ là 108px=100px + 2x2px + 2px + 2px, và từ đây ta sẽ tính được độ rộng của khung hiển thị các tabnews. Như ví dụ của thủ thuật, với 6 tabnews được hiển thị thì động rộng của vùng hiển thị các tab sẽ là : 6x108px = 648px

+ var maxRightIncrement = increment*(-3); : với dòng code này, ta sẽ điều chỉnh tối đa vùng không gian sẽ được hiển thị phía bên phải, tức là việc hiển thị các tab cuối cùng phía bên phải hoặc có thể hiểu là khỏang không gian tối đa bên trái sẽ bị ẩn khi nhấn buttom "Next", và cũng được tính bằng pixel. Ví dụ : muốn ẩn tối đa 4 tabnews ở bên trái, thì ta thay bằng số "-4". Và khi đó sẽ chỉ còn 5 tabnews được hiển thị khi ta không còn nhấn buttom "Next" được nữa. ví dụ như hình dưới:
với lệnh var maxRightIncrement = increment*(-3); ta sẽ có ảnh như bên dưới

với lệnh var maxRightIncrement = increment*(-5); ta sẽ có ảnh như bên dưới


☼ Bây giờ đến code HTML : đọan code màu xanh (class="special") là để làm nổi bật tab đó lên (dạng như tin hot nhất). và tab này sẽ có màu nền khác với các tab khác. xem hình bên dưới:

+ Nếu muốn thêm nhiều tab nữa thì bạn chỉ việc thêm code như bên dưới (đặt code này trước thẻ </ul>)

<li id="l4">
Tab 4 Content
</li>

<li id="l5" >
Tab 5 Content
</li>
7. Cuối cùng save widget là xong.
Chúc các bạn thành công.
Nguồn fandung.com
Tags:

You may also...

Comments[ 0 ]


Đăng nhận xét

Hot