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

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

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

إنشاء تمديد القطعة

إنشاء القطعة من مكتبة القطعة (القطعة مصنع) من خلال ل $.widget() يتم تمرير اسم القطعة وكائن النموذج لإكمال. المثال التالي هو خلق "superDialog" القطعة في مساحة الاسم "العرف".

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

لدعم التوسع، $.widget() قبول اختياري كعضو لاستخدام منشئ القطعة الأم. عند تحديد عضوا الأم عندما يتم تمرير أنها الوسيطة الثانية، اسم القطعة على ظهره، أمام الكائن القطعة النموذج.

كما في المثال أعلاه، ينبغي أن يلي أيضا إنشاء "superDialog" القطعة في مساحة الاسم "العرف". ولكن هذا النقل مسج واجهة المستخدم الحوار (الحوار) القطعة منشئ ( $.ui.dialog )، يمثل superDialog القطعة يجب استخدام الحوار (الحوار) القطعة مسج واجهة المستخدم كعضو الأم.

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

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

يتم تمرير كائن نموذج القطعة ل $.widget() الوسيطة الأخيرة. وحتى الآن، يستخدم مثالنا كائن فارغة. الآن دعونا نضيف طريقة لالكائن:

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

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

من أجل أن الأم هي طرق التجميع المتاحة، مكتبة عضوا (القطعة مصنع) يوفر طريقتين - _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 );
    }
});

إعادة تعريف القطعة

وأضاف مسج UI 1.9 إعادة تعريف وظيفة القطعة. لذلك، لا يمكنك إنشاء القطعة جديدة، ونحن بحاجة فقط لتمرير $.widget() بحيث اسم القطعة الحالية والبناء. الأمثلة التالية في open() لإضافة نفس السجل، ولكن ليس عن طريق خلق أداة جديدة إلى إكمال.

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

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

الحاجيات (الحاجيات) وتعدد الأشكال (تعدد الأشكال)

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

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

ومن الأمثلة على ما سبق، عضو الوالدين من المكونات، dialog() ، لا يمكنك استدعاء عناصر superDialog على close() الأسلوب. لمزيد من المعلومات الاتصال على طريقة القطعة، راجع استدعاء الأسلوب القطعة (القطعة) .

ومن الأمثلة على العرف شخصية

وحتى الآن، رأينا حالات من طرق الإرشاد القطعة النموذج. على النموذج يؤثر على طريقة طاقتها كافة مثيلات القطعة.

لتوضيح هذه النقطة، والنظر في الأمثلة التالية. الحوار (الحوار) هي القوتين تستخدم نفس 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();

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

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

مثقلة التخصيص الفني هو مثال ممتاز لالتخصيص لمرة واحدة.