Thẻ lưu trữ: HTML

tab-noi-dung-jquery-html-css

Tabbed nội dung bằng jQuery + HTML + CSS cho Website

Bài viết sau sẽ hướng dẫn bạn sử dụng một chút jQuery, HTML và CSS để tạo ra nội dung dạng Tab (hay Tabbed). Một kiểu show dữ liệu tiết kiệm không gian web và được nhiều website sử dụng. Có một cải tiến đáng lưu ý là ghi nhớ tab được chọn, khi người dùng reload trang sẽ không mất đi trạng thái đang được chọn ở tab đang mở. Sau đây là các bước thực hiện để tạo ra ứng dụng Tabbed nội dung bằng jQuery + HTML + CSS cho Website của bạn.

tao-tab-noi-dung-bang-jquery-html-css

Đầu tiên ta có đoạn HTML và CSS sử dụng cho tab như sau:

<div class="tabbed">
  <ul class="tabnav">
    <li><a href="#tab1">Tab 01</a></li>
    <li><a href="#tab2">Tab 02</a></li>
    <li><a href="#tab3">Tab 03</a></li>
  </ul>
  <div class="tabcont">
    <div id="tab1" class="tabcontent">Nội dung tab 1 </div>
    <div id="tab2" class="tabcontent">Nội dung tab 2</div>
    <div id="tab3" class="tabcontent">Nội dung tab 3</div>
  </div>
</div>

CSS:

<style type="text/css">
.tabbed {
    padding:30px 0 0;
    position:relative;
    width:70%;
    margin:0 auto;
}
.tabbed .tabcont {
    background:#eee;
    padding:20px;
}
.tabbed .tabcont .tabcontent {
    display:none;
    position:relative;
    line-height:20px;
}
.tabbed .tabcont .tabcontent img {
    max-width:100%;
}
.tabbed .tabcont .tabcontent.active {
    display:block;
}
.tabnav {
    position: absolute;
    left:0;
    top:-1px;
    width:100%;
    border-bottom:1px solid #eee;
}
.tabnav li {
    float:left;
}
.tabnav li a {
    height:30px;
    line-height:30px;
    padding:0 14px;
    font-size:18px;
    font-weight:bold;
    border-radius:5px 5px 0 0;
    display:block;
    color:#333;
}
.tabnav li.active a {
    background:#eee;
    color:#376405;
}
</style>

 

Và ta có đoạn Script tạo chức năng tab như sau:

<script type="text/javascript">
$(function(){
    $('.tabbed').find('.tabcontent:first').addClass('active');
    $('.tabbed').find('.tabnav li:first').addClass('active');
    $('.tabbed').find('.tabnav li').each(function(){
        $(this).click(function(){
            ntab = $(this).find('> a').attr('href');
            $(this).parents('.tabbed').find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).parents('.tabbed').find(ntab).addClass('active');
            return false;
        });    
    });
})
</script>

Trong đoạn Script trên, việc xác định Menu và và nội dung được chọn và tạo ra trạng thái active dựa trên việc người dùng click vào menu tab và sau đó dựa trên thuộc tính href của thẻ a mà người dùng vừa click vào.

Tới đây, bạn đã tạo được chức năng tab nội dung. Tuy nhiên, một bất tiện ở đây là khi người dùng click vào 1 tab, nội dung và menu của tab đó đang ở trạng thái active. Nếu người dùng reload trang web lại thì trang thái active đó lại mất đi và trở về với tab active mặc định lúc đầu. Giờ đây yêu cầu là cần phải cho trình duyệt ghi nhớ tab mà người dùng đã click vào, khi reload trang thì trạng thái active vẫn giữ ở tab mà người dùng vừa click. Để thực hiện điều này chúng ta dùng ứng dụng localStorage trong HTML5, và ta có đoạn Script như sau:

<script type="text/javascript">
$(function(){

    if(localStorage.getItem('active'))
    {    
        $('.tabbed').find(localStorage.getItem('active')).addClass('active');
          $('.tabbed').find('a[href='+localStorage.getItem('active')+']').parent().addClass('active');

    }
    else
    {
        $('.tabbed').find('.tabcontent:first').addClass('active');
          $('.tabbed').find('.tabnav li:first').addClass('active');
    }
    $('.tabbed').find('.tabnav li').each(function(){
        $(this).click(function(){
            ntab = $(this).find('> a').attr('href');
            localStorage.setItem('active', ntab);
            $(this).parents('.tabbed').find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).parents('.tabbed').find(ntab).addClass('active');
            return false;
        });    
    });
})
</script>

Ở đoạn mã trên, ta sử dụng localStorage để lưu trữ thông tin active khi người dùng click vào menu tab. Sau đó, gọi ra thông tin này để xác định tab nào đã được người dùng click chọn. Nếu người dùng, chưa click chọn tab nào thì trang thái active sẽ nằm ở vị trí tab active mặc định.
Lưu ý một điều là chức năng localStorage là ứng dụng của HTML5, vì vậy một số trình duyệt đời cũ sẽ không hỗ trợ chức năng này (IE7).

Đến đây, bạn đã có thể tạo cho website của mình một ứng dụng tab nội dung tối ưu mà không cần mất nhiều thời gian và công sức. Bạn có thể tham khảo Demo trên trong bài viết hoặc download file mẫu về máy. Chúc bạn thành công.

 

dong-ho-cho-web

Hướng dẫn tạo đồng hồ cho website bằng JavaScript

Bài viết này sẽ hướng dẫn bạn tạo một chiếc đồng hồ số với đầy đủ ngày giờ và sẽ có “kim” giây chạy theo thời gian thực của máy tính. Chỉ mất 5 phút để tạo ra ứng dụng này.

Để tạo ra ứng dụng này bạn không cần phải biết nhiều về JavaScript, bạn có thể làm theo các bước sau đây:

  1. Chèn đoạn JavaScript này vào web của bạn:
    
    function time() {
        var today = new Date();
        var weekday=new Array(7);
        weekday[0]="Sunday";
        weekday[1]="Monday";
        weekday[2]="Tuesday";
        weekday[3]="Wednesday";
        weekday[4]="Thursday";
        weekday[5]="Friday";
        weekday[6]="Saturday";
        var day = weekday[today.getDay()]; 
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();
        var h=today.getHours();
        var m=today.getMinutes();
        var s=today.getSeconds();
        m=checkTime(m);
        s=checkTime(s);
        nowTime = h+":"+m+":"+s;
        if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = day+', '+ dd+'/'+mm+'/'+yyyy;
    
        tmp='<span>'+today+' | '+nowTime+'</span>';
    
        document.getElementById("clock").innerHTML=tmp;
    
        clocktime=setTimeout("time()","1000","JavaScript");
        function checkTime(i)
        {
        if (i<10)
          {
          i="0" + i;
          }
        return i;
        }
    }
    

    Ở đoạn code trên, tùy vào ý muốn, bạn có thể thay đổi vị trí hiển thị ngày hoặc thời gian bằng cách đảo vị trí các biến có trong chuỗi lấy kết quả.

  2. Bước tiếp theo bạn tìm đến thẻ body của file HTML và thêm như sau:
    <body onload="time()">
  3. Bước này bạn thêm một thẻ HTML với id là “clock” ở vị trí mà bạn muốn hiển thị, với ví dụ này sử dụng thẻ div:
    <div id="clock"></div>
  4. Done – vậy là bạn đã có 1 ứng dụng đồng hồ cho website của mình. Bạn có thể tham khảo demo hoặc download về làm theo mẫu. Chúc bạn thành công.