เครื่องมือ jQuery UI การขยายตัวทางห้องสมุดเครื่องมือ

jQuery UI Widget ห้องสมุด (โรงงาน Widget) ทำให้ง่ายต่อการสร้างเครื่องมือ, เครื่องมือเหล่านั้นขยายการทำงานของเครื่องมือที่มีอยู่ วิธีนี้คุณสามารถสร้างบนพื้นฐานของเครื่องมือที่มีประสิทธิภาพที่มีอยู่คุณยังสามารถปรับฟังก์ชั่นที่มีอยู่วิดเจ็ต

หมายเหตุ: ก่อนเรียนบทนี้คุณจะต้องเข้าใจสิ่งที่ห้องสมุดเครื่องมือ (โรงงาน Widget) และวิธีการทำงาน ถ้าคุณไม่คุ้นเคยกับความรู้นี้ดังนั้นกรุณาตรวจสอบ วิธีการใช้ชิ้นส่วนห้องสมุด (โรงงาน Widget) ส่วน

สร้างส่วนขยายวิดเจ็ต

สร้างเครื่องมือโดยห้องสมุดวิดเจ็ต (Widget โรงงาน) ผ่านไป $.widget() จะถูกส่งชื่อของเครื่องมือและวัตถุต้นแบบที่จะเสร็จสมบูรณ์ ตัวอย่างต่อไปนี้คือการสร้าง "superDialog" วิดเจ็ตใน "กำหนดเอง" namespace

$.widget( "custom.superDialog", {} );

เพื่อรองรับการขยายตัวที่ $.widget() เป็นตัวเลือกได้รับการยอมรับในฐานะสมาชิกที่จะใช้ตัวสร้างเครื่องมือที่ผู้ปกครอง เมื่อระบุสมาชิกผู้ปกครองเมื่อมันจะถูกส่งเป็นอาร์กิวเมนต์ที่สองชื่อวิดเจ็ตที่ด้านหลังในด้านหน้าของวัตถุ Widget ต้นแบบ

เช่นตัวอย่างข้างต้นต่อไปนี้ควรสร้าง "superDialog" วิดเจ็ตใน "กำหนดเอง" namespace แต่การโอนนี้คือ โต้ตอบ jQuery UI ของ (โต้ตอบ) วิดเจ็ต คอนสตรัค ( $.ui.dialog ) หมายถึงเครื่องมือที่ superDialog ควรใช้โต้ตอบ jQuery UI ของ (โต้ตอบ) วิดเจ็ตในฐานะสมาชิกผู้ปกครอง

$.widget( "custom.superDialog", $.ui.dialog, {} );

นี่ superDialog สองและเครื่องมือโต้ตอบเทียบเท่าหลักเพียงชื่อที่แตกต่างกันและ namespace เพียง เพื่อให้เครื่องมือที่มีคุณสมบัติมากขึ้นใหม่ของเราเราสามารถเพิ่มวิธีการบางอย่างกับวัตถุต้นแบบของมัน

วัตถุต้นแบบ Widget ถูกส่งไปยัง $.widget() อาร์กิวเมนต์สุดท้าย เพื่อให้ห่างไกลตัวอย่างของเราใช้วัตถุ null ตอนนี้ขอเพิ่มวิธีการไปยังวัตถุที่:

$.widget( "custom.superDialog", $.ui.dialog, {
    red: function() {
        this.element.css( "color", "red" );
    }
});
 
// Create a new <div>, convert it into a superDialog, and call the red() method.
$( "<div>I am red</div>" )
    .superDialog()
    .superDialog( "red" );

ตอนนี้ superDialog มี red() วิธีการที่จะเปลี่ยนสีแดงข้อความ โปรดทราบว่าห้องสมุดสมาชิก (โรงงาน Widget) เป็นวิธีการตั้งค่าโดยอัตโนมัติ this เป็นวัตถุเช่นวิดเจ็ต สำหรับรายชื่อของคุณสมบัติและวิธีการที่ใช้ได้บนอินสแตนซ์แวะไปที่ ห้องสมุดสมาชิก (โรงงาน Widget) เอกสาร API

ขยายวิธีการที่มีอยู่

บางครั้งคุณจำเป็นต้องปรับเปลี่ยนพฤติกรรมขององค์ประกอบที่มีอยู่หรือเพิ่มวิธีการ คุณสามารถระบุชื่อของชื่อวิธีของวิธีการบนวัตถุต้นแบบจะต้องโหลด ตัวอย่างต่อไปนี้จะแทนที่โต้ตอบ (โต้ตอบ) ของ open() วิธีการ เนื่องจากกล่องโต้ตอบจะเปิดใช้งานโดยค่าเริ่มต้นเมื่อคุณเรียกใช้รหัสนี้ "open" มันจะถูกบันทึกไว้

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
    }
});
 
// Create a new <div>, and convert it into a superDialog.
$( "<div>" ).superDialog();

เมื่อคุณเรียกใช้รหัสนี้มีปัญหา เนื่องจากเรามากเกินไป open() พฤติกรรมเริ่มต้นดังนั้นการโต้ตอบ (โต้ตอบ) จะไม่แสดงบนหน้าจอ

เมื่อเราใช้วัตถุต้นแบบเราเป็นจริงคาบเกี่ยววิธีการเดิมที่ใช้วิธีการใหม่ในห่วงโซ่ต้นแบบ

เพื่อให้ผู้ปกครองวิธีการชุมนุมที่มีอยู่ในห้องสมุดสมาชิก (โรงงาน Widget) ให้สองวิธี - _super() และ _superApply()

ใช้ _super() และ _superApply() ในการเข้าถึงสมาชิกผู้ปกครอง

_super() และ _superApply() เรียกร้องในลักษณะเดียวกันเป็นส่วนประกอบแม่ พิจารณาตัวอย่างต่อไปนี้ เหมือนเช่นที่ผ่านมาซึ่งมีมากเกินไป open() วิธีการบันทึก "open" อย่างไรก็ตามการทำงานนี้ _super() เรียกว่าโต้ตอบ (โต้ตอบ) ของ open() และเปิดกล่องโต้ตอบ

$.widget( "custom.superDialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
 
        // Invoke the parent widget's open().
        return this._super();
    }
});
 
$( "<div>" ).superDialog();

_super() และ _superApply() เป็นจริงเหมือนกับต้นฉบับ Function.prototype.call() และ Function.prototype.apply() วิธีการ ดังนั้น _super() ยอมรับรายชื่อของพารามิเตอร์ที่ _superApply() ยอมรับอาร์เรย์เป็นพารามิเตอร์หนึ่ง ตัวอย่างต่อไปนี้แสดงให้เห็นว่าแตกต่างกันระหว่างคนทั้งสอง

$.widget( "custom.superDialog", $.ui.dialog, {
    _setOption: function( key, value ) {
 
        // Both invoke dialog's setOption() method. _super() requires the arguments
        // be passed as an argument list, _superApply() as a single array.
        this._super( key, value );
        this._superApply( arguments );
    }
});

redefine วิดเจ็ต

jQuery UI 1.9 เพิ่มฟังก์ชั่น redefine วิดเจ็ต ดังนั้นคุณไม่สามารถสร้างเครื่องมือใหม่ที่เราจะต้องผ่าน $.widget() เพื่อให้ชื่อวิดเจ็ตที่มีอยู่และคอนสตรัค ตัวอย่างต่อไปนี้ใน open() เพื่อจัดเก็บเหมือนกัน แต่ไม่ได้โดยการสร้างเครื่องมือใหม่ที่จะเสร็จสมบูรณ์

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
$( "<div>" ).dialog();

ผ่านวิธีการนี้เราสามารถขยายส่วนเล็ก ๆ ของวิธีการที่มีอยู่ แต่คุณยังสามารถใช้ _super() ในการเข้าถึงวิธีการเดิม - เหล่านี้ไม่ได้โดยการสร้างเครื่องมือใหม่ที่จะเสร็จสมบูรณ์ แต่ที่เป็นโดยตรง redefine วิดเจ็ต สามารถ

วิดเจ็ต (วิดเจ็ต) และความแตกต่าง (Polymorphism)

เมื่อขยายระหว่างเครื่องมือและปลั๊กอินในการโต้ตอบกับเวลาของพวกเขาก็เป็นที่น่าสังเกตว่าสมาชิกปลั๊กไม่สามารถใช้ในการเรียกผู้ปกครององค์ประกอบวิธีส่วนประกอบย่อย ตัวอย่างต่อไปนี้แสดงให้เห็นถึงนี้

$.widget( "custom.superDialog", $.ui.dialog, {} );
 
var dialog = $( "<div>" ).superDialog();
 
// This works.
dialog.superDialog( "close" );
 
// This doesn't.
dialog.dialog( "close" );

ตัวอย่างข้างต้นสมาชิกแม่ของ plug-in dialog() คุณจะไม่สามารถเรียกองค์ประกอบ superDialog บน close() วิธีการ สำหรับข้อมูลเพิ่มเติมโทรวิธีวิดเจ็ตให้ดูที่ วิดเจ็ต (Widget) วิธีการโทร

ตัวอย่างของบุคคลที่กำหนดเอง

กรณีที่ทำให้เราได้เห็นวิธีการขยาย Widget ต้นแบบ ต้นแบบวิธีการมากเกินไปส่งผลกระทบต่อทุกกรณีของเครื่องมือ

เพื่อแสดงให้เห็นถึงจุดนี้พิจารณาตัวอย่างต่อไปนี้ โต้ตอบ (โต้ตอบ) กองทัพทั้งสองกำลังใช้เดียวกัน open() วิธีการ

$.widget( "ui.dialog", $.ui.dialog, {
    open: function() {
        console.log( "open" );
        return this._super();
    }
});
 
// Create two dialogs, both use the same open(), therefore "open" is logged twice.
$( "<div>" ).dialog();
$( "<div>" ).dialog();

บางครั้งคุณก็ต้องมีการเปลี่ยนแปลงพฤติกรรมของอินสแตนซ์ของเครื่องมือนั้น การทำเช่นนี้คุณจะต้องใช้ตามปกติที่ได้รับมอบหมายแอตทริบิวต์ JavaScript, ได้รับการอ้างอิงถึงกรณีและแทนที่วิธีนี้ ในฐานะที่เป็นตัวอย่างที่เฉพาะเจาะจงที่แสดงด้านล่าง

var dialogInstance = $( "<div>" )
    .dialog()
    // Retrieve the dialog's instance and store it.
    .data( "ui-dialog" );
 
// Override the close() method for this dialog
dialogInstance.close = function() {
    console.log( "close" );
};
 
// Create a second dialog
$( "<div>" ).dialog();
 
// Select both dialogs and call close() on each of them.
// "close" will only be logged once.
$( ":data(ui-dialog)" ).dialog( "close" );

มากเกินไปส่วนบุคคลทางเทคนิคเป็นตัวอย่างที่สมบูรณ์แบบของการปรับแต่งครั้งเดียว