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

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:

jQuery Popup Plugin Example

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

Bạn thấy bài viết này như thế nào?: 
Average: 10 (2 votes)
Ảnh của Tommy Tran

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

  • Skype ID: tthanhthuy

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Các công ty trả lương hậu hĩnh nhất thung lũng Silicon

Các công ty trả lương hậu hĩnh nhất thung lũng Silicon

Trang web việc làm Glassdoor.com đưa ra danh sách các công ty công nghệ trả lương kĩ sư phần mềm cao nhất tại Thung lũng Silicon (Mỹ).

Dịch vụ rút tiền mặt thẻ tín dụng rút tiền mặt trong 5 phút mất 1%

Dịch vụ rút tiền mặt thẻ tín dụng rút tiền mặt trong 5 phút mất 1%

Dịch vụ rút tiền mặt từ thẻ tín dụng ra đời với tính tiện dụng đã giúp ích cho rất nhiều khách hàng gặp khó khăn trong vấn đề tài chính.

5 Tips giúp bạn trở thành Gitt administer tại drupal.org

5 Tips giúp bạn trở thành Gitt administer tại drupal.org

Tips to become a git administer at drupal.org

Công ty diệt chuột T&C

 

Diet con trung