Nhóm lưu trữ: Jquery

JQuery – Một thư viện javascript phổ biến nhất hiện nay. Với nhiều điểm ưu việc nổi bật, jQuery được hầu hết các nhà phát triển web ưa dùng. Chuyên mục này sẽ giúp bạn có thêm kiến thức về việc sử dụng thư viện này.

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.

 

them-thuoc-tinh-rel-nofollow

Hướng dẫn thêm thuộc tính rel=nofollow cho liên kết trong website

Vì một số lý do, chúng ta cần thêm thuộc tính rel với giá trị nofollow vào liên kết ngoài trên website. Lý do tại sao thì bạn có thể tham khảo thông tin tại bài viết này: Rel=nofollow và rel=dofollow trong thẻ liên kết

Thông thường, bạn có thể làm theo 2 cách:

  1. Thêm thẻ meta cho trang web, với cách này, tất cả những liên kết có trên trang sẽ được hiểu là nofollow. Bạn chỉ việc chèn đoạn code dưới đây vào trong thẻ head của file HTML
    <meta name="robots" content="nofollow" />
  2. Cách thứ 2 là chèn thủ công thuộc tính rel=”nofollow” vào mỗi link mà bạn muốn bot search xác định là nofollow, như đoạn code bên dưới:
    <a href="signup.php" rel="nofollow">sign up</a>

Ngoài ra, bạn có thể sử dụng jQuery để thực hiện một cách tự động việc chèn thuộc tính rel vào liên kết:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('a[href*="http://"]:not([href*="http://www.yourdomain.com"])').attr('rel', 'nofollow');
    });
</script>

Đoạn code trên sẽ thực hiện việc lọc những liên kết nào không phải của web bạn và chèn thuộc tính rel=”nofollow” vào liên kết đó. Như vậy, những liên kết thuộc trang web như menu, các liên kết bài viết… sẽ không bị nhận là nofollow. Điều này sẽ tốt hơn là tất cả các liên kết đều là nofollow.

Lưu ý: bạn nhớ thay đổi “yourdomain.com” bằng domain của bạn, nếu web bạn đã có sẵn thư viên jquery thì xóa dòng thư viện jquery đi.

Việc thêm thuộc tính rel=”nofollow” vào liên kết tối ưu nhất vẫn là xác định chính xác từng đối tượng thẻ liên kết để  thêm vào. Có nhiều chỉ mục trên trang web của bạn cần được Google tìm và lập chỉ mục thì không nên thêm thuộc tính này vào, nhưng có những liên kết không cần Google tìm kiếm và lập chỉ mục thì nên thêm thuộc tính này vào, ví dụ như các liên kết đến các trang đăng nhâp, hay đăng ký…

Tùy thuộc vào mỗi trường hợp, bạn có thể lựa chọn cách thức phù hợp với trang web của bạn. Chúc bạn thành công.

back-to-top

Hướng dẫn tạo nút lên đầu trang(back to top) cho trang web

Có nhiều website có nội dung quá nhiều trên một trang, khiến việc di chuyển trở lên đầu trang khi đã xem hết nội dung trở nên khó khăn hơn. Để khắc phục điều này ta chỉ cần tạo ra một nút di chuyển, khi người truy cập đã xem hết nội dung và muốn di chuyển lên đầu trang thì chỉ việc click vào nút đó thay vì phải sử dụng Scroll di chuyển chậm chạm. Sau đây là hướng dẫn giúp bạn tạo ra chức năng này trên web, và bạn chỉ tốn chưa đầy 5′ cho việc này.

Có 2 cách để tạo ra chức năng này:

Cách 1: cách này khá đơn giản và dễ thực hiện, bạn chỉ việc thêm một thẻ liên kết với thuộc tính HREF mang giá trị “#” vào vị trí chân trang trên trang web của bạn là được. Ví dụ bạn chèn đoạn mã HTML dưới đây:

<a href="#" title="Lên đầu trang">Lên đầu trang</a>

Cách này ưu điểm là nhanh và dễ làm, không sử dụng JavaScript. Nhưng nhược điểm là khi click để lên đầu trang thì người dùng bị “bay” lên đầu trang thay vì di chuyển lên, đôi khi khiến người xem cảm thấy đột ngột và khó chịu đồng thời nút này chỉ nằm ở cuối trang dẫn đến việc người dùng xem đến giữa trang hay bất kể vị trí nào khác ngoài chân trang thì đều không có nút này để di chuyển, ngoài ra cách này cũng tạo cảm giác thô cứng, thiếu mượt mà.

Cách 2: Cách này sẽ khắc phục được những nhược điểm của cách 1, nhưng bạn sẽ tốn thêm chút thời gian cho cách này. Bạn có thể làm theo các bước sau:

  1. Chèn đoạn mã HTML sau vào vị trí mà bạn muốn hiển thị nút “Lên đầu trang”:
    <div id="goTop">
    <img src="duong-dan-hinh/back-to-top.gif" alt="zkiwi demo" />
    </div>
  2. Style cho nút với đoạn css sau:
    <style type="text/css">
    #goTop {
    bottom: 200px;
    cursor: pointer;
    display: none;
    height: 35px;
    position: fixed;
    right: 155px;
    width: 44px;
    z-index: 1000;
    }
    </style>
  3. Thêm đoạn JavaScript sau:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $(window).scroll(function () {
    if ($(this).scrollTop() > 100) $('#goTop').fadeIn();
    else $('#goTop').fadeOut();
    });
    $('#goTop').click(function () {
    $('body,html').animate({scrollTop: 0}, 'slow');
    });
    });
    </script>

    Nhớ bỏ dòng thư viện jQuery 1.7.2 nếu web bạn đã có thư viện jQuery.
    Đoạn code trên sẽ thực hiện việc xác định thời điểm xuất hiện nút “Go to top” khi bạn Scroll chuột hay di chuyển nội dung web xuống dưới. Tùy trường hợp bạn có thể tùy chỉnh thêm bớt vị trí mà nút sẽ xuất hiện khi cách đầu trang bao nhiêu bằng cách thay số 100 trong dòng code if ($(this).scrollTop() > 100) $('#goTop').fadeIn(); đơn vị ở đây là pixel(px). Bạn cũng có thể thay tốc độ di chuyển từ vị trí click lên top trang bằng cách thay đổi thuộc tính “slow” bằng số, ví dụ như 1000 = 1 giây tại dòng code $('body,html').animate({scrollTop: 0}, 'slow');

  4. Done. Bạn có thể xem demo hoặc download file về tham khảo. Chúc bạn thành công.