كيفية استخدام مكتبة القطعة مسج واجهة المستخدم

سنقوم إنشاء شريط التقدم. كما هو مبين في الأمثلة التالية، والتي من خلال الدعوة jQuery.widget() لإكمال، فإنه يأخذ معلمتين: المكونات في الاسم المراد إنشاؤها، وهو النص الذي يحتوي على وجوه هي وظيفة من المكونات في دعم. عندما يتم استدعاء المكونات، فإنه يخلق مثيل جديد في المكونات، وسيتم تنفيذ جميع المهام في سياق هذا المثال. هذا ناحيتين هامتين معايير مختلفة مسج المساعد. أولا، والسياق هو كائن، وليس عنصر DOM. ثانيا، فإن السياق هو دائما كائن واحد، وليس جمع.

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

يجب أن تحتوي على اسم مساحة الاسم البرنامج المساعد، في هذا المثال، نستخدم custom مساحة الاسم. يمكنك فقط إنشاء طبقة واحدة مساحة العميق، لذلك، custom.progressbar هو في المكونات الفعالة الاسم، very.custom.progressbar لا أحد المكونات في صحيح اسم.

شاهدنا أجزاء المكتبة (القطعة مصنع) توفر لنا مع اثنين من الخصائص. this.element هو كائن مسج تحتوي على عنصر واحد. إذا نسميه المكونات في مسج الكائن الذي يحتوي على عناصر متعددة، فإنه سيتم إنشاء نسخة منفصلة في المكونات لكل عنصر، وسوف كل حالة يكون به this.element . الخاصية الثانية، this.options ، هو وتشمل المكونات في الخيارات كافة أزواج الاسم / القيمة مفتاح الشباك (التجزئة). يمكن أن تنتقل هذه الخيارات لفي المكونات، على النحو التالي:

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

عندما ندعو jQuery.widget() ، والذي من خلال إعطاء jQuery.fn (التي تستخدم لإنشاء المكونات في نظام قياسي) إضافة وظيفة لتمديد مسج. يضاف اسم وظيفة على أساس تمرير الخاص بك jQuery.widget() اسم بدون مساحة الاسم - "progressbar". الخيار المكونات تمرير هو الحصول على القيمة المعينة في المقام المساعد. كما هو موضح في المثال التالي، يمكننا تحديد قيمة افتراضية إلى أي خيار. عند تصميم واجهة برمجة التطبيقات الخاصة بك، يجب أن تكون على بينة من الاستخدام الأكثر شيوعا لبك في المكونات، بحيث يمكنك تعيين الافتراضي المناسب، والتأكد من أن جميع الخيارات اختياري حقا.

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

استدعاء الأساليب في المكونات

الآن يمكننا تهيئة شريط التقدم، فإننا سوف تنفيذ إجراء بواسطة استدعاء الأسلوب على سبيل المثال في المكونات. لتحديد طريقة في المكونات، ونحن فقط نعبر 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;
    }
});

استدعاء الأسلوب على سبيل المثال في المكونات، يمكنك تمرير اسم الأسلوب إلى البرنامج المساعد مسج. إذا كنت استدعاء أسلوب لقبول المعلمات، يمكنك ببساطة تمرير اسم الأسلوب وراء هذه المعايير.

ملاحظة: يتم تمرير وظيفة مسج لنفس اسم الطريقة المستخدمة لتهيئة المكونات في لأداء الأسلوب. ويتم ذلك لمنع تلوث مساحة مسج مع الحفاظ على استدعاءات الأسلوب السلسلة. في الفصول اللاحقة، وسوف نرى استخدامات أخرى تبدو أكثر طبيعية.

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() وتقدم طريقة تلقائيا إلى المكونات. option() الأسلوب يسمح لك للحصول على وخيارات مجموعة بعد التهيئة. الأسلوب كما مسج ل .css() و .attr() الأسلوب: يمكنك تمرير اسم فقط كحجة لاستخدام، يمكنك أيضا تمرير اسم وقيمة كمجموعة استخدام أو تمرير اسم الرئيسية / قيمة أزواج تجزئة لتعيين قيم متعددة. عندما تستخدم على النحو قيمة، والمكونات في إرجاع اسم الخيار القادم الموافق القيمة الحالية. عندما تستخدم على النحو اضع القطعه _setOption سوف يطلق طريقة لتعيين كل خيار. يمكننا تحديد المكونات الإضافية في موقعنا _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;
    }
});

إضافة رد

أبسط التمديد هو لإضافة رد بحيث يمكن للمستخدمين الرد عند حدوث تغييرات في ولاية قابس في. يمكننا أن ننظر إلى المثال التالي كيفية إضافة رد على شريط التقدم عندما يصل شريط التقدم إلى 100 في المئة. _trigger() طريقة يأخذ ثلاث حجج: اسم الاستدعاء، بدأ رد مسج حدث الأجسام، وتجزئة البيانات المرتبطة مع الحدث. اسم الاستدعاء هو الوحيد المطلوب المعلمة، ولكن يريد لتنفيذ مخصص يتميز المستخدمين على المكونات، وغيرها من المعالم مفيدة جدا. على سبيل المثال، إذا كان لنا أن إنشاء المساعد القابل للسحب، ونحن يمكن أن تمر الحدث السحب mousemove عندما أثار رد الاتصال، والتي سوف تسمح للمستخدمين للرد على هذا الحدث على أساس الكائن التي تقدمها س / ص إحداثيات من السحب. يرجى ملاحظة تمريرها إلى _trigger() من الحدث الأصلي يجب أن يكون الحدث مسج بدلا من الأحداث متصفح الأم.

$.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;
    }
});

وظيفة رد أساسا مجرد خيار إضافي، حتى تتمكن من الحصول على نفس الخيارات الأخرى، ومجموعة منهم. كلما الاستدعاء، وسوف تكون هناك أثار الحدث المقابلة. نوع الحدث بالاسم واسم وظيفة الإستدعاء لتحديد المكونات الاتصال. رد والحدث تقبل نفس الحجج اثنين: كائن حدث وتجزئة البيانات المرتبطة مع الحدث، لا سيما وهو مبين في الأمثلة التالية. قد تحتاج إلى تضمين ميزات المكونات في منع المستخدمين، من أجل القيام بذلك، فإن أفضل طريقة هي لخلق الحب قد تلغي رد. يمكن للمستخدمين إلغاء الاستدعاء أو حدث ذات الصلة من مواليد إلغاء أي حدث معها، فهي من خلال الدعوة 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 );

طبيعة

الآن وقد رأينا كيفية استخدام المكتبة القطعة (القطعة مصنع) لإنشاء المكونات، دعونا ننظر كيف يعمل فعلا. عند استدعاء jQuery.widget() ، فإنه يخلق وظيفة منشئ للفي المكونات ووضع يتم تمرير المثال المساعد الخاص بك ككائن النموذج. تضاف جميع المهام تلقائيا إلى القطعة تأتي من القطعة الأساسية في النموذج، الذي يعرف بأنه jQuery.Widget.prototype . عند إنشاء مثيل وسوف تستخدم في سد jQuery.data يخزنها على عنصر DOM الأصلي، والمكونات في اسم كاسم أساسي.

منذ المثال المساعد مرتبطة مباشرة إلى عنصر DOM، يمكنك الوصول مباشرة إلى المكونات في المثال، دون الحاجة إلى اجتياز الطرق في المكونات. وهذه الطريقة تسمح لك دعوة مباشرة على سبيل المثال في المكونات، من دون الحاجة إلى تمرير اسم طريقة سلسلة، ويمكنك أيضا الوصول إلى خصائص المكونات مباشرة.

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 );

يمكنك أيضا إنشاء مثيل من المكونات في دون طرق اجتياز، والخيار لاستدعاء عناصر منشئ مباشرة:

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

تمديد النموذج الأولي

الصانعين القطعة ونماذج أكبر ميزة هي ملحقات سهلة. عن طريق إضافة أو تعديل النموذج طريقة المكونات، يمكننا تعديل السلوك القطعة من جميع الحالات. على سبيل المثال، إذا أردنا أن نضيف طريقة لشريط التقدم لإعادة تعيين إلى التقدم 0٪، ويمكننا أن نضيف هذه الطريقة إلى النموذج، الذي أطلق عليه اسم على كل سبيل المثال في المكونات.

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

لالحاجيات الموسعة لمزيد من التفاصيل وكيفية إنشاء واجهة مستخدم جديد على القائمة أكثر القطعة من التفاصيل، انظر القطعة الموسعة (القطعة) من خلال المكتبات الأعضاء (مصنع القطعة ل) .

توضيح

في بعض الحالات، وتطبيق يسمح للمستخدم المكونات الإضافية، ومن ثم إلغاء الطلب. يمكنك _destroy() أن تفعل هذا الأسلوب. في _destroy() داخل أسلوب، يجب إلغاء جميع الإجراءات أثناء التهيئة وبعد استخدام المكونات الإضافية القيام به. _destroy() بواسطة .destroy() يتم استدعاء أسلوب، .destroy() الأسلوب هو أحد المكونات في الحالات عند إزالة عنصر من الارتباطات DOM دعا تلقائيا، لذلك يمكن استخدامها لجمع القمامة. الأساسية .destroy() وأيضا يستخدم طريقة شائعة للتعامل مع بعض عمليات تنظيف، مثل إزالة عنصر DOM من مثيل التطبيق المصغر المذكورة، إلغاء التوثيق مساحة القطعة كافة الأحداث من العناصر، استخدام إلغاء ربط جميع _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( "" );
    }
});

الملاحظات وثيقة

مكتبة العنصر (القطعة مصنع) هو وسيلة لخلق دولة للسد. وهناك نماذج أخرى مختلفة يمكن استخدامها، ولكل منها مزاياه وعيوبه. مكتبة العنصر (القطعة مصنع) يحل العديد من المشاكل المشتركة، ويحسن إلى حد كبير كفاءة، ولكن أيضا يعزز كثيرا من إعادة استخدام التعليمات البرمجية، مما يجعلها مناسبة للمسج واجهة المستخدم وغيرها من الدولة من المكونات الإضافية.

لاحظ أن نستخدمها في هذا القسم custom مساحة الاسم. ui محجوز مساحة المساعد الرسمي مسج واجهة المستخدم. عند إنشاء الخاصة بك المكونات الإضافية، يجب عليك إنشاء مساحة خاصة بك. وذلك لأكثر وضوحا من حيث المكونات، الذي ينتمي الى طائفة.