Plugins trong jQuery
Plug-in là một phần của code được viết theo một JavaScript file chuẩn. Những file này cung cấp các phương thức jQuery hữu ích mà có thể được sử dụng cùng với các phương thức jQuery Library. Có rất nhiều jQuery plug-in có sẵn để bạn có thể tải về từ kho lưu tại: http://jquery.com/plugins. ...
Plug-in là một phần của code được viết theo một JavaScript file chuẩn. Những file này cung cấp các phương thức jQuery hữu ích mà có thể được sử dụng cùng với các phương thức jQuery Library.
Có rất nhiều jQuery plug-in có sẵn để bạn có thể tải về từ kho lưu tại: http://jquery.com/plugins.
Cách sử dụng Plugins trong jQuery
Để tạo các phương thức của một plugin có sẵn, chúng ta bao plugin file (tương tự như jQuery Library file) vào trong phần tử <head> của tài liệu.
Chúng tôi phải chắc chắn rằng nó xuất hiện sau jQuery file nguồn chính, và trước JavaScript code mà chúng ta custom.
Ví dụ sau chỉ cách để bao jquery.plug-in.js plugin:
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.plug-in.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
.......your custom code.....
});
</script>
</head>
<body>
.............................
</body>
</html>
Cách để phát triển một Plug-in trong jQuery
Đó là đơn giản để viết một plug-in cho riêng bạn. Bạn theo cú pháp sau để tạo một phương thức:
jQuery.fn.methodName = methodDefinition;
Ở đây, Phương thứcNameM là tên của phương thức mới và Phương thứcDefinition là định nghĩa phương thức thực sự.
jQuery team đề nghị một Guideline sau:
Ví dụ, nếu chúng ta viết một plugin mà chúng ta muốn đặt tên là debug, thì tên JavaScript file cho plugin này là:
jquery.debug.js
Sự sử dụng của tiền tố jquery. loại bỏ bất cứ sự xung đột về tên với file dự định để sử dụng với thư viện khác.
Ví dụ
Sau đây là một plug-in nhỏ để có phương thức warning() cho mục đích debug. Bạn giữ code này trong jquery.debug.js file:
jQuery.fn.warning = function() {
return this.each(function() {
alert('Tag Name:"' + $(this).prop("tagName") + '".');
});
};
Ví dụ sau minh họa cách sử dụng phương thức warning(). Giả sử chúng ta đặt jquery.debug.js trong cùng một thư mục với trang HTML.
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.debug.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").warning();
$("p").warning();
});
</script>
</head>
<body>
<p>This is paragraph</p>
<div>This is division</div>
</body>
</html>
Nó sẽ cảnh báo bạn như sau:
Tag Name:"DIV" Tag Name:"P"
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học jQuery khác tại code24h:
