Tạo một plugin đơn giản: jQuery

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Tommy Tran
Tue, 18/12/2012, 16:03 (GMT+7)
0 Bình luận

Tạo một plugin đơn giản: jQuery

Dựa vào những khả năng lập trình linh hoạt của javascript, jQuery cho phép lập trình viên tạo ra các plugin để đính kèm vào thư viện chính. Đây là những phương thức được định nghĩa bên ngoài nhưng có thể sử dụng như các phương thức có sẵn của jQuery.

Khai báo plugin

Một phương thức plugin trong jQuery được khai báo như sau:

$.fn.myPlugin = function() {

  // Do your awesome plugin stuff here

};

Do một vài nguyên nhân, việc sử dụng kí tự ‘$’ của jQuery có thể trùng với các tên biến khác, vì thế để tránh việc này, bạn có thể sử dụng tên biến jQuery. Tuy nhiên, cách bạn nên sử dụng là tạo một phương thức vô danh và truyền vào đối tượng jQuery. Trong thân phương thức vô danh này, ta sẽ định nghĩa các phương thức plugin cần thiết:

(function( $ ) {

  $.fn.myPlugin = function() {

    // Do your awesome plugin stuff here

  };

})( jQuery );

Một đặc điểm quan trọng của jQuery là tính năng method chaining, tức là khả năng gọi liên tục các phương thức trên một đối tượng query. Hãy đảm bảo điều này được duy trì khi bạn tạo ra các plugin của mình bằng cách thêm câu lệnh ‘return this’ vào mỗi phương thức mà không trả về giá trị nào cần thiết.

Tùy chọn

Mỗi phương thức trong jQuery cho phép truyền vào một mảng các tham số tùy chọn. Các giá trị tham số không được xác định sẽ lấy giá trị mặc định. Để thực hiện điều này một cách dễ dàng, ta sẽ dùng phương thức $.extend(). Phương thức này có tác dụng trộn các đối tượng với nhau và gán kết quả vào đối tượng đầu tiên truyền vào tham số. Các thuộc tính bị trùng của đối tượng đầu tiên sẽ bị ghi đè bởi các đối tượng phía sau.

Ví dụ:

$.fn.myPlugin = function(options) {

    var defaults = {

        width: "300px",

        height: "200px",

        title: "Title"

    };

    var options = $.extend(defaults, options);

    // …

    return this;

 };

 // example

$("#popup3").popup({title:"Abc", width:"200px"});

Khi thực hiện câu lệnh ví dụ cuối cùng trên, mảng defaults sẽ có giá trị là {title:”Abc”, width:”200px”;height:”200px”}.

Ví dụ hoàn chỉnh

Ý tưởng của tôi là tạo một plugin cho phép lập trình viên có thể dễ dàng tạo ra một popup từ một thẻ HTML có sẵn, tương tự như ví dụ tôi làm trong bài jQuery – Tạo cửa sổ popup đơn giản. Ví dụ này cần ba tập tin là .js, .css và .html:

popup.jquery.js:

(function($){

 $.fn.popup = function(options) {

    var defaults = {

        width: "300px",

        height: "200px",

        title: "Title"

    };

    var options = $.extend(defaults, options);


    $("body").append("<div id='background'></div>");


    var $this=$(this);


    $this.prepend("<div class='popuptitle'>"+options.title+"<a href='#' class='close'>x</a></div>");


    $this.addClass("popup");

    $this.width(options.width).height(options.height);

    $this.hide();


    $(".close").click(function (e) {

        closePopup();

        e.preventDefault();

    });


    $("#background").click(function () {

        closePopup();

    });

    return this;

 };


 $.fn.openPopup = function() {

    var dheight = document.body.clientHeight;

    var dwidth = document.body.clientWidth;


    $("#background").width(dwidth).height(dheight);


    $("#background").fadeTo("slow",0.8);


    $(this).css("top", (dheight-$(this).height())/2);

    $(this).css("left",(dwidth-$(this).width())/2);


    $(this).fadeIn();

    return this;

 };

})(jQuery);


 function closePopup(){

    $("#background").fadeOut();

    $(".popup").hide();

}

popup.css:

.popup{

    position: absolute;

    background: white;

    border: 1px solid gray;

    z-index: 10000;

    box-shadow: 3px 3px gray;

    border-radius: 5px;

}

.popuptitle{

    border-radius: 5px;

    background:lavender;

}

#background{

    position: absolute;

    background: gray;

    left: 0px;

    top: 0px;

}

a.close{

    text-decoration: none;

    float: right;

}

Example.html:

<html>

<head>

<title>jQuery Plugin Popup Example</title>

<link rel="stylesheet" type="text/css" href="popup.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script type="text/javascript" src="popup.jquery.js"></script>

<script>


$(document).ready(function() {


    jQuery("#popup1").popup();

    $("#popup2").popup({title:"Abc"});

    $("#popup3").popup({title:"Abc", width:"200px",height:"300px"});


    $("button").click(function(e) {

        var popupid=this.getAttribute("popup");

        $("#"+popupid).openPopup();

    });

});


</script>

</head>

<body>


<button popup="popup1">Open Popup1</button>

<button popup="popup2">Open Popup2</button>

<button popup="popup3">Open Popup3</button>


<div id="popup1"></div>

<div id="popup2"></div>

<div id="popup3"></div>


</body>

</html>

YinYang’s Programming Blog

Tags:

Ảnh hưởng của ma túy

Bạn thấy bài viết này như thế nào?:

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies