Tạo JQuery Plugin - Viblo

Trang chủ » Cách Viết Plugin Jquery » Tạo JQuery Plugin - Viblo

Có thể bạn quan tâm

Nhân ngày quốc tế lao động, trước khi đi ngủ thì mình lao động 1 tý. Bài này chia sẻ với các bạn về Jquery Plugin.

Chuẩn bị

Tải jquery về và tạo file js plugin của chúng ta vào chung thư mục và include vào file index.html

<script src="jquery-1.12.3.min.js"></script> <script src="jquery.hello.js"></script>

Cấu trúc plugin

Trong file jquery.hello.js ta thêm vào:

$(function () { $.fn.hello = function () { //thêm nội dung sau } });

$.fn: bắt đầu định nghĩa plugin, ở đây ta có plugin hello.

Thêm vài thứ vào plugin

$(function () { $.fn.hello = function () { return this.each( function() { $(this).text("Hello, World!"); }); } });

Có nghĩa plugin này sẽ chọn qua tất cả các selectors và thay nội dung của tag đó bằng Hello, World!

Thử nó trong index.html

<h2>hi hi</h2> <h2>ha ha</h2>

1.JPG

và gọi plugin:

<script> $(document).ready( function() { $('h2').hello(); }); </script>

2.JPG

Có thể thay bằng text khác bất kỳ chúng ta muốn

$(function () { $.fn.hello = function (anyText) { return this.each( function() { $(this).text(anyText); }); } }); <script> $(document).ready( function() { $('h2').hello('Bla bla bla'); }); </script>

3.JPG

Chúng ta có thể thay anyText bằng 1 options hay hơn chẳng hạn

$.fn.hello = function(options) { var settings = $.extend({ text : 'Hello, World!', color : null, fontStyle : null }, options); return this.each( function() { // Thêm sau }); }

Giờ chúng ta có 1 object settings chứa những thứ mà plugin sẽ làm như hiển thị text, màu sắc color, font chữ fontStyle.

Bây giờ thì viết thêm vào this.each:

return this.each( function() { $(this).text(settings.text); if (settings.color) { $(this).css('color', settings.color); } if (settings.fontStyle) { $(this).css('font-style', settings.fontStyle); } });

Và thêm vào index.html

$('h2').hello({ text : 'Hello, haha!', color : '#005dff', fontStyle : 'italic' });

Ta có:

4.JPG

Còn nữa

Chúng ta thêm 1 biến complete vào settings:

var settings = $.extend({ text : 'Hello, World!', color : null, fontStyle : null, complete : null }, options);

Và thêm vào each function:

return this.each( function() { //... if ($.isFunction(settings.complete)) { settings.complete.call(this); } });

Quay lại với index.html:

$('h2').hello({ text : 'Hello, haha!', color : '#005dff', fontStyle : 'italic', complete : function() { alert('Ahihi!'); } });

Và cuối cùng ta được:

5.JPG

1 vài plugin thú vị

Jquery-colorstrip

Sử dụng jquery-colorstrip

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript" src='colorstrip.js'></script> <style type="text/css"> #colorstrip { overflow: hidden; position: relative; height: 10px; width: 100% } </style> <div id="colorstrip"></div> <script type="text/javascript"> jQuery(document).ready( function($) { $('#colorstrip').colorstrip( { minInterval: 6000, maxInterval: 12000, minWidth: 10, maxWidth: 80, opacity: 0.5, colors: ['#f90', '#39c', '#c00', '#090', '#c3f', '#007', '#69f'] } ); } ); </script>

6.gif

funnyText

Github của anh ý

7.gif

BallDrop

Xem tại đây. Dùng chuột để tạo các bức tường cho quả bóng đập vào. mình đã ngồi cả ngày chỉ để kéo cho các quả bóng nó đập theo các cách khác nhau, một cách giết thời gian khá vui.

8.gif

Kết luận

  • Thanks Google
  • And Jquery Plugin
  • À, tiện thể nếu ai dùng windows thì có thể dùng soft này để chụp ảnh màn hình rồi xuất thành gif, rất nhẹ nhàng và tiện lợi. (cảm ơn tác giả đã cung cấp 1 công cụ rất hay và nhẹ 😄)

Từ khóa » Cách Viết Plugin Jquery