Trang chủ > JQuery > Làm quen với jQuery-Bài 3

Làm quen với jQuery-Bài 3


Hôm nay chúng ta sẽ đến với bài viết thứ ba trong chuỗi bài về jQuery, mang những kiến thức cơ bản nhất về jQuery đến với bạn. Trong hai bài viết trước, mình đã đề cập đến một số hàm mà các bạn cần biết trong jQuery. Bài này, chúng ta sẽ áp dụng những kiến thức đó vào thực hành( cũng như làm quen thêm với một vài hàm mới), cụ thể chúng ta sẽ tạo ra một thành phần web khá quen thuộc mà mọi người vẫn hay gọi là accordion.
Accordion là một trong những cách hay để hiển thị một lượng lớn nội dung trong một khoảng giao diện nhỏ. Bạn có thể có 5 hay 6 (nhiều) headers, tương ứng với mỗi header là một paragraph bên dưới nó. Với accordion, chỉ một paragraph được hiển thị tại một thời điểm nhất định, người dùng bấm lên header để xem nội dung liên quan. Chúng ta sẽ xây dựng một accordion đơn giản. Bạn sẽ thấy các hàm xây dựng sẵn trong jQuery khiến cho mọi việc trở nên dễ dàng thế nào.
Đầu tiên ta sẽ xây dựng accordion bằng mã HTML:

Và tạo CSS style đơn giản để phân biệt rõ giữa phần header và content:

p,h3 {margin: 0; padding: 0;}
p {height: 150px; width: 198px; border: 1px solid black;}
h3 {height: 50px; width: 200px; background-color: blue; color:
h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}

Chúng ta sẽ được một component giống như dưới đây. Mình chỉ chụp hai Items để tiết kiệm giao diện, hai Items còn lại ngay bên dưới cũng tương tự như thế.

Bây giờ chúng ta sẽ chuyển sang phần liên quan đến JavaScript. Các bạn include jQuery từ Google CDN, thêm phần thẻ vào cuối trang, và ta bắt đầu:

var headings = $(‘h3’), paras = $(‘p’);

Những gì đoạn code trên làm là chọn tất cả các heading ‘h3’ và tất cả các paragraph ‘p’, lưu chúng vào hai biến mảng headings và paras.
Bây giờ việc cần làm là giẩu tất cả các paragraph đi, chỉ hiển thị paragraph đầu tiên. Ta sẽ làm như sau, sử dụng hàm eq():

paras.hide().eq(0).show();

Đầu tiên ta giấu tất cả các paragraph, sau đó dùng eq(0) để chọn paragraph thứ nhất trong mảng ‘paras’. Ta đều biết trong hầu hết các ngôn ngữ lập trình, các phần tử trong mảng bắt đầu từ 0. Để hiển thị phần tử này ta đã sử dụng hàm show() trong jQuery. Đến đây ta được một thành phần web như hình dưới:

Tiếp theo chúng ta sẽ viết code để phục vụ cho mục đích giấu và hiển thị các paragraphs. Trước hết ta cần thêm sự kiện click cho các headers:

headings.click(function() {
var cur = $(this); //lưu phần tử vừa được clicked vào một biến thuận tiện cho việc tham chiếu
cur.siblings(‘p’).hide(); //giấu tất cả các paragraphs
cur.next(‘p’).show(); //chọn paragraph ngay dưới header vừa được clicked và hiển thị paragraph này
});

Ở đây chúng ta lấy giá trị ‘this’ của đối tượng jQuery trước khi lưu vào biến ‘cur’. ‘this’ tham chiếu đến phần tử hiện thời đang được tương tác. Trong trường hợp này là header mà ta click vào.

cur.siblings(‘p’).hide();

Hàm siblings() trong jQuery tìm tất cả các phần tử cùng cấp trong cây phân cấp với phần tử hiện thời. Ở đây ta tìm tất cả các phần tử cùng cấp với phần tử hiện thời là các paragraphs và giấu chúng đi. Đến đây không có paragraph nào đang được hiển thị.

cur.next(‘p’).show();

Cuối cùng chúng ta sử dụng hàm next() của jQuery.Hàm này tìm phần tử kế với phần tử mà ta đã chọn. Ở đây ta tìm phần tử paragraph kế tiếp với header mà ta vừa click và hiển thị nó.
Chúng ta đã làm xong một accordion đơn giản. Nếu ta thử những gì ta vừa làm trên web browser, accordion của chúng ta hoạt động khá tốt. Tuy nhiên, ta biết rằng jQuery cung cấp rất nhiều hàm để thực hiện các chứng năng animation. Chúng ta sẽ thử dùng một vài hàm trong các hàm này của jQuery.
Hai hàm mà ta sẽ sử dụng là slideUp() và slideDown(). Những hàm này thực hiện đúng những gì mà tên của chúng đã nói lên, chúng từ từ hiển thị một phần tử từ dưới lên trên và từ trên xuống dưới đến khi phần tử đó được hiển thị đầy đủ trên trình duyệt web. Trong hàm click() ta viết đoạn mã sau:

headings.click(function() {
var cur = $(this);
cur.siblings(‘p’).hide();
cur.next(‘p’).show();
});

Thay thế hàm hide() bằng slideUp() và hàm show() bằng slideDown():

headings.click(function() {
var cur = $(this);
cur.siblings(‘p’).slideUp();
cur.next(‘p’).slideDown();
});

Và kiểm tra trên trình duyệt web. Bạn có thấy hiệu ứng của nó có đẹp hơn không?

Chúng ta đã kết thúc bài học thứ ba về jQuery cơ bản.Nếu không muốn viết lại những đoạn code bên trên, bạn có thể download để test thử luôn. Các bạn quan tâm đến jQuery nếu có thắc mắc gì hoặc có các kiến thức hay về jQuery hãy gửi lại phản hồi để ta cùng nhau chia sẻ. Chúc các bạn lập trình vui vẻ!

Chuyên mục:JQuery
  1. Đức
    15/10/2010 lúc 8:15 chiều

    bạn ơi mình có một đoạn mã jquery the nay
    $(document).ready(function(){
    $(‘ul > li’).addlclass(‘highlight’)}
    });
    va css la:
    .highlight{
    border-bottom:1px solid green;
    }
    mà mình chạy không thấy xuất hiện ngạch chân cho các list .Trả lời dùm mình nhe.cái thư viên jquery thì mình viết chuẩn rồi nhé.

    • tuanka
      16/10/2010 lúc 1:32 sáng

      Chào bạn Đức!

      Đoạn code của bạn khi chạy không thấy xuất hiện gạch chân cho các list vì bạn viết sai cú pháp:
      – $(document).ready(function(){
      }); bạn viết thừa một dấu “}”.
      – addClass bạn viết là addlclass <– sai

      Đây là đoạn code mình viết lại cho bạn, mình đã test thử và chạy đúng như bạn mong muốn:

      .highlight{
      border-bottom:1px solid green;
      }
      $(document).ready(function(){
      $(‘ul li’).addClass(‘highlight’);
      });

  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: