Tạo hiệu ứng và nút ẩn/hiện đẹp mắt cho một đoạn trong web và blog

By Unknown - Thứ Tư, 30 tháng 12, 2015 - No Comments Lượt xem :

Blog giới thiệu với bạn một cách để tạo nút ẩn/hiện đẹp mắt và mượt mà cho blog với sự giúp đỡ của jQuery.

Bài viết tham khảo từ trang learningjquery nhưng do trang này nói khá chi tiết và có phần hơi "choáng ngợp" trong khi tiêu chí của blog là "đọc tới đâu - làm tới đó - và làm được liền" nên viết có hơi khác. Bạn đọc cần tham khảo chi tiết xin vui lòng đến trang gốc trên.

Cần nói trước, các hiệu ứng đụng đến jQuery không nhiều thì ít cũng sẽ ảnh hưởng đến tốc độ load trang của bạn, vì thế bạn cần cân nhắc trước khi sử dụng.

Đầu tiên là demo cho bạn xem thử thành quả trước,

Nội dung này sẽ bị ẩn đi

Kiểu 1 : Ẩn hoặc Hiện Chỉ Ẩn Chỉ Hiện

Kiểu 2 : Ẩn hoặc Hiện Chỉ Ẩn Chỉ Hiện

Để tiện cho bạn theo dõi, bài viết sẽ chia ra các phần phù hợp với mục đích của bạn. Hãy nhấn vào một trong 3 mục dưới đây để đi đến phần hướng dẫn phù hợp với bạn. Lưu ý là 3 phần này rời rạc nhau.

◎ Dành cho các bạn KHÔNG DÙNG Blogger

Với những bạn này mình nghĩ đã biết chút ít về lập trình web, thế nên mình không hướng dẫn nhiều sợ làm mấy bạn chán. Bạn có thể dùng đoạn jQuery như dưới đây.

$(document).ready(function() {
 // mặc định sẽ ẩn cái cần ẩn
  $('#slickbox').hide();
  
 // Kiểu 1  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });

 // Kiểu 2    
  $('#slick-down').click(function() {
    $('#slickbox').slideDown('slow');
    return false;
  });
  $('#slick-up').click(function() {
    $('#slickbox').slideUp('fast');
    return false;
  });
  $('#slick-slidetoggle').click(function() {
    $('#slickbox').slideToggle(400);
    return false;
  });
});

〉Cách dùng

Bạn đặt những thứ cần ẩn vào trong một thẻ div với id là "slickbox".
Bạn tạo một nút (button) hoặc một liên kết (thẻ a) với id là "slick-show" (chỉ Hiện), "slick-hide" (chỉ Ẩn) hay "slick-toggle" (vừa Hiện vừa Ẩn).

◎ Dành cho các bạn dùng Blogger

〉Chỉ áp dụng cho bài cụ thể

Bước 1. Cứ soạn thảo bình thường.

Bước 2. Chuyển qua chế độ HTML, dán đoạn code sau đây Ở DƯỚI CÙNG HẾT. Từ đây cũng thấy lý do có bước 1 là để đảm bảo cái đoạn code này luôn nằm dưới cùng cho dù bạn chuyển qua chuyển lại giữa hai chế độ viết.

<script type="text/javascript">
$(document).ready(function() {
 // mặc định sẽ ẩn cái cần ẩn
  $('#slickbox').hide();
  
 // Kiểu 1  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });

 // Kiểu 2    
  $('#slick-down').click(function() {
    $('#slickbox').slideDown('slow');
    return false;
  });
  $('#slick-up').click(function() {
    $('#slickbox').slideUp('fast');
    return false;
  });
  $('#slick-slidetoggle').click(function() {
    $('#slickbox').slideToggle(400);
    return false;
  });
});
</script>

Bước 3. Đặt những thứ cần được ẩn ở trong một thẻ div với id="slickbox", ví dụ như đoạn code bên dưới minh hoạ cho cái demo bạn thấy ở đầu bài. Ở đây mình dùng thêm class="dinhly" để có cái khung đẹp đẹp ở trên (xem cách tạo cái khung ấy ở bài viết này).

<div class="dinhly" id="slickbox" style=" text-align: justify;">
Nội dung này sẽ bị ẩn đi
</div>

Bước 4. Tạo một nút hoặc chỉ đơn giản là một liên kết với id là thứ bạn muốn, ví dụ như đoạn code bên dưới minh hoạ cho cái demo đầu bài. Mình dùng class="button" là để có cái "nút".

<div style="text-align: center;">
<a class="button" href="#" id="slick-toggle">Ẩn hoặc Hiện</a>
<a class="button" href="#" id="slick-hide">Chỉ Ẩn</a>
<a class="button" href="#" id="slick-show">Chỉ Hiện</a>
</div>

Bước 5. Xong!

〉Áp dụng cho toàn blog

Bước 1. Vào chỉnh sửa mẫu > Edit HTML, đặt đoạn code sau vào GIỮA hai thẻ <head> và </head>, ở đâu cũng được.

<script type="text/javascript">
$(document).ready(function() {
 // mặc định sẽ ẩn cái cần ẩn
  $('#slickbox').hide();
  
 // Kiểu 1  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });

 // Kiểu 2    
  $('#slick-down').click(function() {
    $('#slickbox').slideDown('slow');
    return false;
  });
  $('#slick-up').click(function() {
    $('#slickbox').slideUp('fast');
    return false;
  });
  $('#slick-slidetoggle').click(function() {
    $('#slickbox').slideToggle(400);
    return false;
  });
});
</script>

Bước 2. Nhấn vào "Lưu mẫu", vậy là xong phần chuẩn bị, sang bước kế để đến phần sử dụng.

Bước 3. Cách sử dụng, mỗi khi bạn tạo một bài viết mới, hãy đặt những thứ cần được ẩn ở trong một thẻ div với id="slickbox", ví dụ như đoạn code bên dưới minh hoạ cho cái demo bạn thấy ở đầu bài. Ở đây mình dùng thêm class="dinhly" để có cái khung đẹp đẹp ở trên.

<div class="dinhly" id="slickbox" style=" text-align: justify;">
Nội dung này sẽ bị ẩn đi
</div>

<div style="text-align: center;">
<a class="button" href="#" id="slick-toggle">Ẩn hoặc Hiện</a>
<a class="button" href="#" id="slick-hide">Chỉ Ẩn</a>
<a class="button" href="#" id="slick-show">Chỉ Hiện</a>
</div>

Bước 5. Xong!

Tin Mới Nhất