مسج API واجهة المستخدم - الجزء حافظة (القطعة مصنع)
فئة
فائدة (المرافق) | الحاجيات (الحاجيات)
jQuery.widget (اسم [قاعدة]، والنموذج) الاستخدام
الوصف: استخدام جميع الحاجيات مسج واجهة المستخدم مع نفس التجريد لخلق جليل مسج المساعد.
参数 | 类型 | 类型 |
---|---|---|
name | String | 要创建的小部件名称,包括命名空间。 |
base | Function() | 要继承的基础小部件。必须是一个可以使用 `new` 关键词实例化的构造函数。默认为 jQuery.Widget。 |
prototype | PlainObject | 要作为小部件原型使用的对象。 |
يمكنك استخدام $.Widget
الكائن كما أن أساس الميراث، أو قد يكون صراحة أو مسج واجهة المستخدم من عنصر تحكم طرف ثالث القائمة، التي تم إنشاؤها من الصفر القطعة الجديدة. تعريف القطعة بنفس الاسم في وراثة عضو القاعدة، وحتى يسمح لك لتوسيع صحيح القطعة.
مسج واجهة المستخدم يتضمن العديد عقد أجزاء صغيرة، لذلك من مسج نموذجي المساعد أنماط الاستخدام مختلفة قليلا. جميع الحاجيات مسج واجهة المستخدم باستخدام نفس النموذج، الذي يتكون من المكتبات الأعضاء (القطعة مصنع) التعريف. لذلك، طالما كنت تعلم كيفية استخدام واحد، وانت تعرف كيفية استخدام الحاجيات الأخرى (القطعة).
ملاحظة: هذا القسم يستخدم عضو شريط التقدم (Progressbar القطعة) المظاهرة، ولكن يتم تطبيق جملة لكل القطعة.
التهيئة
من أجل تتبع حالة القطعة، يجب أن نقدم دورة حياة كاملة من القطعة. دورة الحياة تبدأ عند التهيئة القطعة. تهيئة القطعة، ونحن ببساطة الحاجة إلى سد العجز في مكالمة أو تعدد العناصر.
$ ( "#elem") .progressbar ()؛
هذا وسوف تهيئة الكائن مسج لكل عنصر. أمثلة من العناصر المذكورة أعلاه مع معرف "elem"
.
خيارات
منذ progressbar()
مع أية معلمات عند استدعاء، يتم تهيئة القطعة باستخدام الخيارات الافتراضية. يمكننا تمرير مجموعة من الخيارات لتجاوز الافتراضي في خيارات التهيئة:
$ ( "#elem") .progressbar ({القيمة: 20})؛
قد نحتاج لتمرير وفقا لعدد من الخيارات، ونحن لم يمر أي من الخيارات لاستخدام القيم الافتراضية.
يمكنك تمرير خيارات متعددة من المعلمات التي سيتم دمجها في كائن واحد (مثل $.extend( true, target, object1, objectN )
). تم تعيين هذا العدد لتغطية جميع الحالات، تبادل المعلومات بين الحالات الخيار مفيد:
خيارات فار = {مشروط: صحيح، العرض: "بطيء"}؛ $ ( "# Dialog1") .dialog (خيارات)؛ $ ( "# Dialog2") .dialog (خيارات، {autoOpen: كاذبة})؛
يتم تسليم جميع الخيارات خلال نسخة عميق التهيئة، وضمان المتابعة لا يؤثر على جزء صغير من حالة لتعديل الكائن. مجموعة هو الاستثناء الوحيد، لأنها حسب المرجع. استثناء لهذا هو من أجل دعم البيانات بشكل صحيح ملزم، حيث يجب استخدام مصدر البيانات كمرجع.
يتم تخزين القيمة الافتراضية في خصائص القطعة، حتى نتمكن من تغطية قيمة إعدادات مسج واجهة المستخدم. على سبيل المثال، بعد الإعدادات التالية، جميع الحالات المستقبلية من شريط التقدم سوف الافتراضية إلى القيمة 80:
$ .ui.progressbar.prototype.options.value = 80؛
الخيارات هي جزء من دولة عضو صغيرة، ولذا فإننا يمكن أيضا تعيين خيارات بعد التهيئة. سنرى الخيار في طرق لاحقة.
الطريق
الآن وقد تم تهيئة القطعة، فإننا يمكن الاستعلام مكانتها، أو تنفيذ إجراءات على القطعة. وتستند جميع الإجراءات على بعد استدعاء أسلوب التهيئة لأداء. استدعاء الأسلوب على القطعة، ونحن تمرير اسم الأسلوب إلى البرنامج المساعد مسج. على سبيل المثال، داعيا أعضاء شريط التقدم (Progressbar على القطعة) value()
طريقة، يمكننا استخدام:
$ ( "#elem") .progressbar ( "القيمة")؛
إذا يأخذ طريقة المعلمات، ونحن يمكن أن تمر المعلمات بعد اسم الأسلوب. على سبيل المثال، لتمرير معلمة 40
إلى value()
طريقة، يمكننا استخدام:
$ ( "#elem") .progressbar ( "القيمة"، 40)؛
مثل مسج بطرق أخرى، طريقة معظم الحاجيات بإرجاع كائن مسج:
$ ( "#elem") .progressbar ( "قيمة"، 90) .addClass ( "على وشك الانتهاء")؛
كل القطعة إعداداتها طريقة الخاصة، والتي تقوم على وظيفة المقدمة من القطعة. ومع ذلك، هناك بعض الطرق هو موجود على جميع أجزاء صغيرة، والتي سيتم شرحها بالتفصيل أدناه.
حدث
جميع الحاجيات ولديهم مجموعة متنوعة من الأحداث ذات الصلة السلوك من أجل إعلامك عند تغيير حالة. بالنسبة لمعظم أجزاء صغيرة، وعندما يتم تشغيل الحدث، واسم بأحرف صغيرة في شكل اسم القطعة كما بادئة. على سبيل المثال، يمكننا ربط شريط التقدم change
الحدث، الذي يتم تشغيل عند تغيير قيمة.
$ ( "#elem") .bind ( "Progressbarchange"، وظيفة () { تنبيه ( "لقد تغير قيمة!")؛ })؛
كل حدث له الانسحاب المقابلة، التي كخيار. إذا لزم الأمر، يمكننا فهم التقدم لل change
الاستدعاء، وليس ملزما progressbarchange
الحدث.
$ ( "#elem") .progressbar ({ تغيير: وظيفة () { تنبيه ( "لقد تغير قيمة!")؛ } })؛
جميع الحاجيات لها change
الحدث، الذي يتم تشغيل عندما مثيل.
مثيل
أمثلة من الحاجيات هي استخدام الاسم الكامل مع جزء صغير كمفتاح jQuery.data()
المخزن. لذلك، يمكنك استخدام التعليمات البرمجية التالية من عنصر لاسترداد الكائن المثال عضوا شريط التقدم (Progressbar القطعة).
$ ( "#elem") .data ( "أوي progressbar")؛
سواء لا بد من عنصر لتطبيق مصغر معين، يمكنك استخدام :data
الاختيار للكشف.
$ ( "#elem"). هل ( ": البيانات (" واجهة المستخدم progressbar ') ")؛ // صحيح $ ( "#elem"). هل ( ": البيانات (" واجهة المستخدم، القابل للسحب ') ")؛ // كاذبة
يمكنك أيضا استخدام :data
للحصول على قائمة من القطعة نظرا كمثال على جميع العناصر.
$ ( ": البيانات (" واجهة المستخدم progressbar ') ")؛
ممتلكات
كل الحاجيات لديها السمات التالية:
- defaultElement: عناصر عند بناء المقام التطبيق المصغر العناصر غير متوفرة للاستخدام. على سبيل المثال، لأن شريط التقدم
defaultElement
هو"<div>
"،$.ui.progressbar({ value: 50 })
بشكل جديد<div>
على سبيل المثال مثيل القطعة شريط التقدم. - الوثيقة: تحتوي على أجزاء صغيرة داخل العنصر
document
. مفيدة إذا كنت بحاجة إلى التفاعل معها في إطار القطعة. - العنصر: كائن مسج الذي يحتوي على العناصر المستخدمة في إنشاء مثيل الحاجيات. إذا قمت بتحديد عناصر متعددة، وندعو
.myWidget()
، سوف تقوم بإنشاء مثيل التطبيق المصغر واحد من كل عنصر. ولذلك، فإن الملكية يحتوي دائما عنصر. - مساحة الاسم: الموقع القطعة نموذج مخزن كائن مسج العالمي. على سبيل المثال،
"ui"
علىnamespace
يمثل يتم تخزين أجزاء النموذج صغيرة في$.ui
. - خيارات: الخيار لاستخدام كائن يحتوي حاليا الحاجيات. عندما مثيل، أي من الخيارات المقدمة من قبل المستخدم سوف يكون تلقائيا و
$.myNamespace.myWidget.prototype.options
دمج الافتراضات المحددة. الخيارات المحددة من قبل المستخدم تجاوز القيم الافتراضية. - UUID: معرف عدد صحيح فريد يشير السيطرة.
- النسخة: النسخة سلسلة من القطعة. لالحاجيات مسج واجهة المستخدم، وسوف يتم تعيين الخاصية إلى إصدار الحاجيات مسج واجهة المستخدم. يجب أن مطوري المكونات في تعيين صراحة ممتلكات على النموذج.
- widgetEventPrefix: إضافة الحاجيات إلى اسم بادئة لهذا الحدث. على سبيل المثال، يمكنك سحب وإسقاط الحاجيات (قابل للسحب القطعة) من
widgetEventPrefix
هي"drag"
، وذلك عند إنشاء القابلة للسحب اسم الحدث هو"dragcreate"
. افتراضيا، القطعةwidgetEventPrefix
هو اسمها. ملاحظة: لقد تم التخلي عن هذه المنشأة السياحية، في إصدار مستقبلي جدا. تم تغيير اسم الحدث لwidgetName: eventName (مثل"draggable:create"
). - widgetFullName: القطعة تحتوي على الاسم الكامل للمساحة. ل
$.widget( "myNamespace.myWidget", {} )
،widgetFullName
سيكون"myNamespace-myWidget"
. - widgetName: اسم القطعة. ل
$.widget( "myNamespace.myWidget", {} )
،widgetName
سيكون"myWidget"
. - نافذة: أنه يحتوي على أجزاء صغيرة داخل العنصر
window
. مفيدة إذا كنت بحاجة إلى التفاعل معها في إطار القطعة.
jQuery.Widget استخدام أساس القطعة
الوصف: المكتبة قاعدة ويدجت (القطعة مصنع) الاستخدام.
الإنتقال السريع
选项 | 方法 | 事件 |
---|---|---|
选项 | 类型 | 描述 | 默认值 |
---|---|---|---|
disabled | Boolean | 如果设置为 true ,则禁用该小部件。代码实例: 初始化带有指定 $( ".selector" ).widget({ disabled: true }); 在初始化后,获取或设置 // getter var disabled = $( ".selector" ).widget( "option", "disabled" ); // setter $( ".selector" ).widget( "option", "disabled", true ); |
false |
hide | Boolean 或 Number 或 String 或 Object | 是否使用动画隐藏元素,以及如何动画隐藏元素。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).widget({ hide: { effect: "explode", duration: 1000 } }); 在初始化后,获取或设置 // getter var hide = $( ".selector" ).widget( "option", "hide" ); // setter $( ".selector" ).widget( "option", "hide", { effect: "explode", duration: 1000 } ); |
null |
show | Boolean 或 Number 或 String 或 Object | 是否使用动画显示元素,以及如何动画显示元素。 支持多个类型:
代码实例: 初始化带有指定 $( ".selector" ).widget({ show: { effect: "blind", duration: 800 } }); 在初始化后,获取或设置 // getter var show = $( ".selector" ).widget( "option", "show" ); // setter $( ".selector" ).widget( "option", "show", { effect: "blind", duration: 800 } ); |
null |
方法 | 返回 | 描述 |
---|---|---|
_create() | jQuery (plugin only) | _create() 方法是小部件的构造函数。没有参数,但是 this.element 和 this.options 已经设置。
代码实例: 基于一个选项设置小部件元素的背景颜色。 _create: function() { this.element.css( "background-color", this.options.color ); } |
_delay( fn [, delay ] ) | Number | 在指定延迟后调用提供的函数。保持 this 上下文正确。本质上是 setTimeout() 。使用 clearTimeout() 返回超时 ID。
代码实例: 100 毫秒后在小部件上调用 this._delay( this._foo, 100 ); |
_destroy() | jQuery (plugin only) | 公共的 destroy() 方法清除所有的公共数据、事件等等。代表了定制、指定小部件、清理的 _destroy() 。
代码实例: 当小部件被销毁时,从小部件的元素移除一个 class。 _destroy: function() { this.element.removeClass( "my-widget" ); } |
_focusable( element ) | jQuery (plugin only) | 建立聚焦在元素上时要应用 ui-state-focus class 的 element 。
代码实例: 向小部件内的一组元素应用 focusable 样式: this._focusable( this.element.find( ".my-items" ) ); |
_getCreateEventData() | Object | 所有的小部件触发 create 事件。默认情况下,事件中不提供任何的数据,但是该方法会返回一个对象,作为 create 事件的数据被传递。
代码实例: 向 _getCreateEventData: function() { return this.options; } |
_getCreateOptions() | Object | 该方法允许小部件在初始化期间为定义选项定义一个自定义的方法。用户提供的选项会覆盖该方法返回的选项,即会覆盖默认的选项。
代码实例: 让小部件元素的 id 属性作为选项可用。 _getCreateOptions: function() { return { id: this.element.attr( "id" ) }; } |
_hide( element, option [, callback ] ) | jQuery (plugin only) | 使用内置的动画方法或使用自定义的特效隐藏一个元素。如需了解可能的 option 值,请查看 hide 。
代码实例: 为自定义动画传递 this._hide( this.element, this.options.hide, function() { // Remove the element from the DOM when it's fully hidden. $( this ).remove(); }); |
_hoverable( element ) | jQuery (plugin only) | 建立悬浮在元素上时要应用 ui-state-hover class 的 element 。事件处理程序在销毁时自动清理。
代码实例: 当悬浮在元素上时,向元素内所有的 this._hoverable( this.element.find( "div" ) ); |
_init() | jQuery (plugin only) | 小部件初始化的理念与创建不同。任何时候不带参数的调用插件或者只带一个选项哈希的调用插件,初始化小部件。当小部件被创建时会包含这个方法。
注释:如果存在不带参数成功调用小部件时要执行的逻辑动作,初始化只能在这时处理。
代码实例: 如果设置了 _init: function() { if ( this.options.autoOpen ) { this.open(); } } |
_off( element, eventName ) | jQuery (plugin only) | 从指定的元素取消绑定事件处理程序。
代码实例: 从小部件的元素上取消绑定所有 click 事件。 this._off( this.element, "click" ); |
_on( [suppressDisabledCheck ] [, element ], handlers ) | jQuery (plugin only) | 授权通过事件名称内的选择器被支持,例如 "click .foo" 。 _on() 方法提供了一些直接事件绑定的好处:
代码实例: 放置小部件元素内所有被点击的链接的默认行为。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); } }); |
_setOption( key, value ) | jQuery (plugin only) | 为每个独立的选项调用 _setOptions() 方法。小部件状态随着改变而更新。
代码实例: 当小部件的 _setOption: function( key, value ) { if ( key === "width" ) { this.element.width( value ); } if ( key === "height" ) { this.element.height( value ); } this._super( key, value ); } |
_setOptions( options ) | jQuery (plugin only) | 当调用 option() 方法时调用,无论以什么形式调用 option() 。如果您要根据多个选项的改变而改变处理器密集型,重载该方法是很有用的。
代码实例: 如果小部件的 _setOptions: function( options ) { var that = this, resize = false; $.each( options, function( key, value ) { that._setOption( key, value ); if ( key === "height" || key === "width" ) { resize = true; } }); if ( resize ) { this.resize(); } } |
_show( element, option [, callback ] ) | jQuery (plugin only) | 使用内置的动画方法或使用自定义的特效显示一个元素。如需了解可能的 option 值,请查看 show 。
代码实例: 为自定义动画传递 this._show( this.element, this.options.show, function() { // Focus the element when it's fully visible. this.focus(); } |
_super( [arg ] [, ... ] ) | jQuery (plugin only) | 从父部件中调用相同名称的方法,带有任意指定的参数。本质上是 .call() 。
代码实例: 处理 _setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._super( key, value ); } |
_superApply( arguments ) | jQuery (plugin only) | 从父部件中调用相同名称的方法,带有参数的数组。本质上是 .apply() 。
代码实例: 处理 _setOption: function( key, value ) { if ( key === "title" ) { this.element.find( "h3" ).text( value ); } this._superApply( arguments ); } |
_trigger( type [, event ] [, data ] ) | Boolean | 触发一个事件及其相关的回调。带有该名称的选项与作为回调被调用的类型相等。 事件名称是小部件名称和类型的小写字母串。 注释:当提供数据时,您必须提供所有三个参数。如果没有传递事件,则传递 如果默认行为是阻止的,则返回
代码实例: 当按下一个键时,触发 this._on( this.element, { keydown: function( event ) { // Pass the original event so that the custom search event has // useful information, such as keyCode this._trigger( "search", event, { // Pass additional information unique to this event value: this.element.val() }); } }); |
destroy() | jQuery (plugin only) | 完全移除小部件功能。这会把元素返回到它的预初始化状态。
代码实例: 当点击小部件的任意锚点时销毁小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.destroy(); } }); |
disable() | jQuery (plugin only) | 禁用小部件。
代码实例: 当点击小部件的任意锚点时禁用小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.disable(); } }); |
enable() | jQuery (plugin only) | 启用小部件。
代码实例: 当点击小部件的任意锚点时启用小部件。 this._on( this.element, { "click a": function( event ) { event.preventDefault(); this.enable(); } }); |
option( optionName ) | Object | 获取当前与指定的 optionName 关联的值。
代码实例: 获得 this.option( "width" ); |
option() | PlainObject | 获取一个包含键/值对的对象,键/值对表示当前小部件选项哈希。
代码实例: 记录每个小部件选项的键/值对,用于调试。 var options = this.option(); for ( var key in options ) { console.log( key, options[ key ] ); } |
option( optionName, value ) | jQuery (plugin only) | 设置与指定的 optionName 关联的小部件选项的值。
代码实例: 设置 this.option( "width", 500 ); |
option( options ) | jQuery (plugin only) | 为小部件设置一个或多个选项。
代码实例: 设置 this.option({ width: 500, height: 500 }); |
widget() | jQuery | 返回一个包含原始元素或其他相关的生成元素的 jQuery 对象。
代码实例: 当创建小部件时,在小部件的原始元素周围放置一个红色的边框。 _create: function() { this.widget().css( "border", "2px solid red" ); } |
事件 | 类型 | 描述 |
---|---|---|
create( event, ui ) | widgetcreate | 当小部件被创建时触发。
注意: 代码实例: 初始化带有指定 create 回调的小部件: $( ".selector" ).widget({ create: function( event, ui ) {} }); 绑定一个事件监听器到 widgetcreate 事件: $( ".selector" ).on( "widgetcreate", function( event, ui ) {} ); |