Plugin jQuery: Phương pháp cài đặt và sử dụng

Bài viết này có một tiêu đề cực kỳ “cao siêu và to tát”. Thế nhưng, theo kinh nghiệm, việc sử dụng một plugin jQuery không quá khó nếu có tài liệu hướng dẫn. Tuy nhiên, với các bạn chưa có kinh nghiệm thì quả là cả một vấn đề: thấy người ta sử dụng nhưng không biết cài áp dụng. Mình viết bài này nhằm mục đích giải quyết điều đó.

Nếu bạn hỏi plugin jQuery là gì thì đó là nội dung của một bài viết khác và mình không giải thích ở đây. Việc sử dụng một plugin jQuery nó có khuôn mẫu chung, vì hầu hết plugin đều viết theo chuẩn. Tuy nhiên, mỗi người một cách viết (code) khác nhau, do đó nhiều lúc, đối với mình, cũng rất khó khăn để sử dụng plugin nếu tác giả không có hướng dẫn gì.

Plugin jQuery: Phương pháp cài đặt và sử dụng

Plugin jQuery: Phương pháp cài đặt và sử dụng

Việc cài đặt một plugin rất đơn giản, bạn chỉ việc tham chiếu tới tập tin JavaScript chứa thư viện cần dùng. Ít nhất có hai tập tin .js cần dùng đến. Một là thư viện jQuery, hai là tập tin plugin. Cách thức khai báo như sau:

<!-- Thư viện jQuery --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<!-- Thư viện plugin --><script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script><script type="text/javascript" src="js/jquery.RotateImageMenu.js"></script>

Phần khai báo nên đặt trong thẻ <head>. Một số plugin cần khai báo thêm tập tin CSS (Style Sheet).

Tiếp theo, bạn soạn nội dung HTML. Tùy mục đích, tùy plugin mà các thẻ HTMLcó cấu trúc khác nhau. Và thẻ “bao trùm” (tức là thẻ cha, chứa tất cả nội dung của thành phần cần thao tác) luôn có một id hoặc class, nhưng tốt nhất là id. Ví dụ:

<!-- Đặt ID cho thẻ cha -->
<section id="dg-container" class="dg-container">
<div class="dg-wrapper"><a href="#"> <img src="images/1.jpg" alt="image01" /></a>
<div>http://www.colazionedamichy.it/</div>
<a href="#">
 </a> <a href="#"> <!-- ... --> </a> <!-- ... --></div>
</section>

Trong một số trường hợp, các thẻ con cần đặt tên cho id hay class, và id hay class phải chính xác theo quy định của plugin. Vì JavaScript sẽ thao tác với các thành phần này, nên nó cần xác định đúng các đối tượng. Ví dụ:

</pre>
<div id="da-slider" class="da-slider"><!-- Thẻ con cần có ID theo chuẩn -->
<div class="da-slide">
<h2>Some headline</h2>
Some description

 <!-- Thẻ con cần có ID theo chuẩn --> <a class="da-link" href="#">Read more</a>
<div class="da-img"><img src="images/1.png" alt="image01" /></div>
</div>

<div class="da-slide"><!-- ... --></div>
 <!-- ... -->
<nav class="da-arrows"></nav></div>
<pre>

Sau phần html là phần “khởi chạy”. Phần này thường là một hoặc một vài câu lệnh JavaScript giúp plugin nhận diện đối tượng cần thao tác và bắt đầu hoạt động. Ví dụ:

$('#dg-container').gallery();
Plugin jQuery: Phương pháp cài đặt và sử dụng

Plugin jQuery: Phương pháp cài đặt và sử dụng

Phần thiết lập. Tùy nhà phát triển quy định mà bạn có thể thiết lập các thuộc tính khác nhau. Việc thiết lập thường được đơn giản hóa bằng cách khai báo chồng (ghi đè) ngay trong hàm khởi tạo. Ví dụ:

$('#da-slider').cslider({

    current     : 0,
    // index of current slide

    bgincrement : 50,
    // increment the background position
    // (parallax effect) when sliding

    autoplay    : false,
    // slideshow on / off

    interval    : 4000
    // time between transitions

});

Tuy nhiên, một số nhà phát triển “non tay” lại không quy định sẵn cách thức này. Đôi lúc mình phải tự mò mẫm và chỉnh sửa ngay trong source code của plugin để nó hoạt động như ý. Việc này khá phức tạp và đòi hỏi bạn phải hiểu rõ JavaScript và jQuery.

Cuối cùng là thiết lập CSS. Việc thiết lập nào tương đối hạn chế hơn. Và rất nhiều thuộc tính CSS sẽ bị các lệnh JavaScript ghi đè giá trị lên. Hầu hết mã CSS được quy định sẵn trong code của plugin. Bạn có thể chỉnh sửa ngay trong code này.

Nói nghe rất dễ, nhưng các bạn cần nhiều lần thao tác, dần dần sẽ hiểu rõ và có kinh nghiệm xử lý, sử dụng các plugin.

Một vài trang web cung cấp plugin kèm hướng dẫn chi tiết:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s