วิธีการใช้ห้องสมุดเครื่องมือ jQuery UI

เราจะสร้างแถบความคืบหน้า ดังแสดงในตัวอย่างต่อไปนี้ซึ่งโดยการเรียก jQuery.widget() ที่จะเสร็จสมบูรณ์ก็จะใช้เวลาสองพารามิเตอร์: plug-in ชื่อที่จะสร้างข้อความที่มีวัตถุเป็นหน้าที่ของ plug-in ที่สนับสนุน เมื่อเสียบที่เรียกว่ามันจะสร้าง plug-in ตัวอย่างใหม่ฟังก์ชั่นทั้งหมดจะถูกดำเนินการในบริบทของตัวอย่างนี้ นี้สองวิธีที่แตกต่างกันที่สำคัญปลั๊กอิน jQuery มาตรฐาน ครั้งแรกในบริบทที่วัตถุไม่ได้เป็นองค์ประกอบ DOM ประการที่สองบริบทอยู่เสมอเป็นวัตถุเดียวไม่คอลเลกชัน

$.widget( "custom.progressbar", {
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

จะต้องมีชื่อของ namespace ปลั๊กอินในตัวอย่างนี้เราจะใช้ custom namespace คุณสามารถสร้างชั้นหนึ่ง namespace ลึกจึง custom.progressbar เป็น plug-in ที่มีประสิทธิภาพชื่อ very.custom.progressbar ไม่ได้ชื่อที่ถูกต้องปลั๊กอิน

เราเห็นส่วนห้องสมุด (โรงงาน Widget) ให้เรามีสองคุณสมบัติ this.element เป็นวัตถุ jQuery มีองค์ประกอบหนึ่ง ถ้าเราเรียกปลั๊กอิน jQuery วัตถุที่มีหลายองค์ประกอบก็จะสร้าง plug-in อินสแตนซ์ที่แยกต่างหากสำหรับแต่ละองค์ประกอบและแต่ละกรณีจะมีของตัวเอง this.element สถานที่ให้บริการที่สอง this.options เป็น plug-in ตัวเลือกรวมทั้งหมดชื่อ / คู่ค่าคีย์กัญชา (กัญชา) ตัวเลือกเหล่านี้สามารถส่งผ่านไป plug-in ดังนี้

$( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });

เมื่อเราเรียก jQuery.widget() ซึ่งโดยให้ jQuery.fn (ใช้ในการสร้างมาตรฐานระบบ plug-in) เพิ่มฟังก์ชั่นที่จะขยาย jQuery ชื่อฟังก์ชั่นจะมีการเพิ่มขึ้นอยู่กับการผ่านของคุณ jQuery.widget() ชื่อโดยไม่ต้อง namespace - "ProgressBar" ตัวเลือก plug-Pass เพื่อให้ได้ค่าที่ตั้งในกรณีปลั๊กอิน ดังแสดงในตัวอย่างต่อไปนี้เราสามารถระบุค่าเริ่มต้นไปที่ตัวเลือกใด ๆ เมื่อมีการออกแบบ API ของคุณคุณควรจะตระหนักถึงการใช้งานที่พบมากที่สุดของ Plug-in ของคุณเพื่อให้คุณสามารถตั้งค่าเริ่มต้นที่เหมาะสมและให้แน่ใจว่าตัวเลือกทั้งหมดที่ไม่จำเป็นอย่างแท้จริง

$.widget( "custom.progressbar", {
 
    // Default options.
    options: {
        value: 0
    },
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    }
});

โทร plug-in วิธีการ

ตอนนี้เราสามารถเริ่มต้นแถบความคืบหน้าของเราเราจะดำเนินการโดยการเรียกวิธีการใน plug-in อินสแตนซ์ เพื่อกำหนดวิธีการ plug-in ที่เราเพียง แต่เราผ่าน jQuery.widget() การอ้างอิงไปยังวัตถุที่ฟังก์ชั่น นอกจากนี้เรายังสามารถกำหนดวิธีการ "ส่วนตัว" กับชื่อของฟังก์ชั่นที่มีคำนำหน้าขีด

$.widget( "custom.progressbar", {
 
    options: {
        value: 0
    },
 
    _create: function() {
        var progress = this.options.value + "%";
        this.element
            .addClass( "progressbar" )
            .text( progress );
    },
 
    // Create a public method.
    value: function( value ) {
 
        // No value passed, act as a getter.
        if ( value === undefined ) {
            return this.options.value;
        }
 
        // Value passed, act as a setter.
        this.options.value = this._constrain( value );
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
 
    // Create a private method.
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

เรียกวิธีการใน plug-in เช่นคุณสามารถส่งชื่อของวิธีที่จะปลั๊กอิน jQuery ถ้าคุณเรียกวิธีการที่จะยอมรับพารามิเตอร์คุณก็ส่งชื่อวิธีการที่อยู่เบื้องหลังพารามิเตอร์เหล่านี้

หมายเหตุ: ฟังก์ชั่น jQuery ถูกส่งไปยังชื่อวิธีเดียวกับที่ใช้ในการเริ่มต้น plug-in ที่จะดำเนินการวิธีการ นี้จะทำเพื่อป้องกันไม่ให้เกิดมลพิษ namespace jQuery ขณะที่การรักษาวิธีห่วงโซ่สาย ในบทต่อ ๆ มาเราจะเห็นความหมายอื่นดูเป็นธรรมชาติมากขึ้น

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({ value: 20 });
 
// Get the current value.
alert( bar.progressbar( "value" ) );
 
// Update the value.
bar.progressbar( "value", 50 );
 
// Get the current value again.
alert( bar.progressbar( "value" ) );

ใช้ตัวเลือก

option() วิธีการที่มีให้โดยอัตโนมัติ plug-in option() วิธีการช่วยให้คุณสามารถที่จะได้รับและการตั้งค่าตัวเลือกหลังจากการเริ่มต้น วิธีการที่เป็นของ jQuery .css() และ .attr() วิธีการ: คุณสามารถส่งชื่อเป็นอาร์กิวเมนต์คือการใช้คุณยังสามารถส่งชื่อและค่าเป็นชุดการใช้หรือผ่านชื่อคีย์ / คู่ค่า กัญชาในการตั้งค่าหลายค่า เมื่อใช้เป็นค่า plug-in ส่งกลับชื่อของตัวเลือกที่เข้ามาค่าปัจจุบันที่สอดคล้องกัน เมื่อใช้เป็นหมาที่ Widget _setOption วิธีการจะได้รับการเรียกร้องให้แต่ละตัวเลือกการตั้งค่า เราสามารถระบุ plug-in ของเรา _setOption วิธีการที่จะสะท้อนให้เห็นถึงการเปลี่ยนแปลงตัวเลือก เปลี่ยนตัวเลือกสำหรับการดำเนินการที่จะดำเนินการเป็นอิสระเราสามารถแทนที่ _setOptions

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

เพิ่มการติดต่อกลับ

ส่วนขยายที่ง่ายที่สุดคือการเพิ่มการเรียกกลับเพื่อให้ผู้ใช้สามารถตอบสนองเมื่อมีการเปลี่ยนแปลงเกิดขึ้นใน plug-in ของรัฐ เราสามารถดูตัวอย่างต่อไปนี้ของวิธีการที่จะเพิ่มการเรียกกลับไปยังแถบความคืบหน้าเมื่อแถบความคืบหน้าถึงร้อยละ 100 _trigger() วิธีการใช้เวลาสามข้อโต้แย้ง: ชื่อของโทรกลับให้โทรกลับ jQuery เหตุการณ์เริ่มวัตถุและกัญชาของข้อมูลที่เกี่ยวข้องกับเหตุการณ์ที่เกิดขึ้น ชื่อเรียกกลับเป็นเพียงคนเดียวที่ต้องการพารามิเตอร์ แต่ต้องการที่จะใช้กำหนดเองมีผู้ใช้ใน plug-in พารามิเตอร์อื่น ๆ ที่มีประโยชน์มาก ตัวอย่างเช่นถ้าเราจะสร้างปลั๊กอินที่ลากเราสามารถผ่านเหตุการณ์ลาก MouseMove เมื่อมีการเรียกโทรกลับซึ่งจะช่วยให้ผู้ใช้เพื่อตอบสนองต่อเหตุการณ์ที่เกิดขึ้นอยู่กับวัตถุที่มีให้โดยพิกัด X / Y ลาก โปรดทราบผ่านไป _trigger() ของเหตุการณ์เดิมจะต้องเป็นเหตุการณ์ jQuery แทนเหตุการณ์ที่เบราว์เซอร์

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    }
});

ฟังก์ชั่นการโทรกลับหลักเพียงตัวเลือกเพิ่มเติมเพื่อให้คุณสามารถได้รับเช่นเดียวกับตัวเลือกอื่น ๆ และพวกเขาตั้ง เมื่อใดก็ตามที่โทรกลับจะมีกิจกรรมที่เกี่ยวข้องจะถูกเรียก ประเภทเหตุการณ์เป็นตามชื่อและชื่อของฟังก์ชันการเรียกกลับเพื่อตรวจสอบปลั๊กเชื่อมต่อ โทรกลับและเหตุการณ์การยอมรับเดียวกันสองอาร์กิวเมนต์: วัตถุเหตุการณ์และกัญชาของข้อมูลที่เกี่ยวข้องกับเหตุการณ์ที่เกิดขึ้นโดยเฉพาะอย่างยิ่งตามที่แสดงในตัวอย่างต่อไปนี้ คุณอาจจะต้องรวม plug-in คุณสมบัติในการป้องกันผู้ใช้ในการสั่งซื้อการทำเช่นนี้วิธีที่ดีที่สุดคือการสร้างความรักคุณอาจเพิกถอนการเรียกกลับ ผู้ใช้สามารถยกเลิกการโทรกลับหรือเหตุการณ์ที่เกี่ยวข้องกับพื้นเมืองเพิกถอนกรณีใด ๆ กับพวกเขาพวกเขาจะโดยการเรียก event.preventDefault() หรือกลับ false เพื่อให้บรรลุ หากคุณยกเลิกการโทรกลับ _trigger() วิธีการจะกลับมา false เพื่อให้คุณสามารถบรรลุฟังก์ชั่นที่เหมาะสมในปลั๊กอิน

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar({
        complete: function( event, data ) {
            alert( "Callbacks are great!" );
        }
    })
    .bind( "progressbarcomplete", function( event, data ) {
        alert( "Events bubble and support many handlers for extreme flexibility." );
        alert( "The progress bar value is " + data.value );
    });
 
bar.progressbar( "option", "value", 100 );

ธรรมชาติ

ตอนนี้เราได้เห็นวิธีการใช้เครื่องมือที่ห้องสมุด (โรงงาน Widget) เพื่อสร้าง plug-in ให้ดูที่วิธีการที่จะใช้งานได้จริง เมื่อคุณเรียก jQuery.widget() จะสร้างฟังก์ชั่นคอนสตรัคสำหรับ plug-in และการตั้งค่าเช่นปลั๊กอินของคุณจะถูกส่งเป็นวัตถุต้นแบบ ฟังก์ชั่นทั้งหมดจะถูกเพิ่มโดยอัตโนมัติไปยังเครื่องมือที่มาจากเครื่องมือพื้นฐานต้นแบบที่กำหนดไว้ jQuery.Widget.prototype เมื่อคุณสร้าง plug-in เช่นจะใช้ jQuery.data เก็บไว้ในองค์ประกอบ DOM เดิม plug-in ชื่อเป็นชื่อคีย์

ตั้งแต่เช่นปลั๊กอินเชื่อมโยงโดยตรงกับองค์ประกอบ DOM คุณโดยตรงสามารถเข้าถึง plug-in เช่นโดยไม่จำเป็นต้องสำรวจ plug-in วิธีการ วิธีนี้จะช่วยให้คุณสามารถโทรโดยตรงบน plug-in เช่นโดยไม่จำเป็นต้องส่งชื่อวิธีสตริงและคุณยังสามารถเข้าถึงคุณสมบัติเชื่อมต่อโดยตรง

var bar = $( "<div></div>" )
    .appendTo( "body" )
    .progressbar()
    .data( "progressbar" );
 
// Call a method directly on the plugin instance.
bar.option( "value", 50 );
 
// Access properties on the plugin instance.
alert( bar.options.value );

นอกจากนี้คุณยังสามารถสร้างตัวอย่างของ plug-in โดยไม่ต้องใช้วิธีการสำรวจเส้นทางและตัวเลือกที่จะเรียกองค์ประกอบสร้างโดยตรง:

var bar = $.custom.progressbar( {}, $( "<div></div>" ).appendTo( "body") );
 
// Same result as before.
alert( bar.options.value );

ส่วนขยายของต้นแบบ

ก่อสร้าง Widget และต้นแบบประโยชน์ที่ใหญ่ที่สุดคือส่วนขยายง่าย โดยการเพิ่มหรือปรับเปลี่ยนวิธีการต้นแบบปลั๊กเราสามารถปรับเปลี่ยนพฤติกรรม Widget ทุกกรณี ตัวอย่างเช่นถ้าเราต้องการที่จะเพิ่มวิธีการที่จะแถบความคืบหน้าการตั้งค่าใหม่เพื่อความก้าวหน้า 0% เราสามารถเพิ่มวิธีการนี้เพื่อต้นแบบซึ่งจะถูกเรียกในทุก plug-in ที่อินสแตนซ์

$.custom.progressbar.prototype.reset = function() {
    this._setOption( "value", 0 );
};

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

กำจัด

ในบางกรณีโปรแกรมที่ช่วยให้ผู้ใช้สามารถปลั๊กอินแล้วยกเลิกการสมัคร คุณสามารถ _destroy() จะทำวิธีนี้ ใน _destroy() ภายในวิธีที่คุณควรเพิกถอนการกระทำทั้งหมดในช่วงเริ่มต้นและหลังการใช้ปลั๊กอินทำ _destroy() โดย .destroy() วิธีการที่เรียกว่า .destroy() วิธีการเป็นปลั๊กอินในกรณีเมื่อเอาองค์ประกอบจากการผูก DOM ที่เรียกว่าโดยอัตโนมัติเพื่อที่จะสามารถนำมาใช้สำหรับการเก็บขยะ พื้นฐาน .destroy() วิธีการนี้ยังเป็นที่นิยมใช้ในการจัดการกับการดำเนินงานบางส่วนการทำความสะอาดเช่นการลบองค์ประกอบ DOM จากอินสแตนซ์ Widget อ้าง namespace Widget ยกเลิกการเชื่อมโยงเหตุการณ์ทั้งหมดจากองค์ประกอบใช้ยกเลิกการเชื่อมโยงทั้งหมด _bind() เพิ่มกิจกรรม

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

ปิดบันทึก

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

โปรดทราบว่าในส่วนนี้เราจะใช้ custom namespace ui namespace อย่างเป็นทางการสงวนปลั๊กอิน jQuery UI เมื่อมีการสร้างของคุณเองปลั๊กอินคุณควรสร้าง namespace ของคุณเอง เพื่อให้เป็นไปอย่างชัดเจนมากขึ้นจากที่เสียบซึ่งเป็นช่วง