با سلام به شمادوستای عزیز ، امیدوارم که حالتون خوب باشه . اموزش امروز ما که در مورد jquery وابزارهای آن هست همراه بمانید.

JqueryUI – Widget Factory

قبلا تنها راه برای نوشتن کنترل های سفارشی (custom controls) در jQuery گسترش فضانام $.fn بود. این کار برای ویجت های ساده موثر بود. تصور کنید که ویجت های دارای وضعیت بیشتری ساخته اید که خیلی سریع سنگین می شود. برای کمک در فرایند ساخت ویجت ها، Widget Factory در jQuery UI معرفی شد که بسیاری از boilerplate ها را حذف می کند که به ویژه با تنظیم یک ویجت در ارتباط هستند.

یک jQueryUI Widget Factory تابعی است که نام یک رشته و یک آبجکت را به عنوان آرگومان ها، گرفته و یک jQuery plugin و یک Class ایجاد می کند تا قابلیت آن را در هم بپیچد.

ترکیب:

در زیر ترکیب مربوط به متد jQueryUI Widget Factory را مشاهده می کنید:

jQuery.widget( name [, base ], prototype )

name: رشته ای است که حاوی یک namespace و widget name از ویجت برای ایجاد می باشد.

base: ویجت پایه برای دریافت فرم و باید یک سازنده باشد که می تواند با لغت کلیدی new نمونه گذاری شود. پیش فرض برای jQuery.Widget.

prototype: یک آبجکت برای اینکه به عنوان یک نمونه ی اولیه برای ویجت برای دریافت فرم، استفاده می شود. برای نمونه jQuery UI دارای یک پلاگین “mouse” است که روی آن بقیه ی تعاملات پلاگین ها بر اساس این مورد می باشند، که برای به دست آوردن draggable, droppable و غیره می باشد. تمام مواردی که از پلاگین های ماوس دریافت می کنند: jQuery.widget( “ui.draggable”, $.ui.mouse, {…} )؛ اگر شما این آرگیومنت را تامین نکنید، ویجت مستقیما از “base widget,” jQuery.Widget دریافت می کند. ( به تفاوت بین widget با w کوچک و Widget با W دقت داشته باشید.)

Base Widget

Base widget ویجتی است که به وسیله ی widget factory استفاده می شود.

گزینه ها:

جدول زیر گزینه های مختلفی را ارائه می دهد که با Base widget استفاده می شوند.

Option

Description

disabledhide

این گزینه اگر روی true تنظیم شده باشد، ویجت را غیرفعال می سازد. مقدار پیش فرض آن false است.

hide

این گزینه چگونگی محرک سازی پنهان کردن عنصر را تعیین می کند. مقدار پیش فرض آن null است.

show

این گزینه چگونگی محرک سازی نمایش عنصر را تعیین می کند. مقدار پیش فرض آن null است.

متدها:

جدول زیر متدهای مختلفی را ارائه می دهد که با base widget مورد استفاده قرار می گیرند:

Action

Description

_create()

این متد سازنده ی widget است. هیچ پارامتری وجود ندارد، اما this.elementand this.options تقریبا تنظیم شده اند.

_delay( fn [, delay ] )

این متد تابع ارائه شده را پس از تاخیر تعیین شده، تحریک می کند. timeout ID را برای استفاده با clearTimeout() بازمی گرداند.

_destroy()

متد عمومی destroy() که همه ی داده های مشترک، رویدادها و غیره را پاک می کند و به این واگذار می کند – متد destroy() برای custom, widget-specific, cleanup.

_focusable( element )

این متد عنصر را برای به کار گرفتن گروه theui-state-focu تنظیم می کند. گرداننده های رویداد به طور خودکار پاک می شوند.

_getCreateEventData()

همه ی ویجت ها رویداد creat را آغاز می کنند. به طور پیش فرض هیچ داده ای در رویداد ارائه نمی شود. اما این متد می تواند یک آبجکتی را بازگرداند که به عنوان داده ی رویداد creat منتقل خواهد شد.

_getCreateOptions()

این متد به ویجت اجازه می دهد تا یک متد custom برای گزینه های تعریف شده در دوره ی نمونه گذاری، تعیین کند. گزینه های ارائه شده توسط یوزر، گزینه های مربوط به این متد را رد می کنند که گزینه های پیش فرض را نیز رد می کنند.

_hide( element, option [, callback ] )

این متد یا با استفاده از متدهای داخلی انیمیشن یا با استفااده از افکت های custom، یک عنصر را فورا پنهان می کند. گزینه ی hide را برای مقادیر ممکن برای گزینه بررسی کنید.

_hoverable( element )

این متد عنصری را تنظیم می کند برای به کار گرفتن گروه ui-state-hover روی hover. این گرداننده های رویداد به طور خودکار تا ازبین رفتن تمیز می شوند.

_init()

هر زمانی که plugin بدون هیچ آرگیومنتی یا تنها با یک گزینه ی hash فرا خوانده می شود، ویجت مقدار دهی می شود. این شامل زمانی است که ویجت ایجاد می شود.

_off( element, eventName )

این متد گرداننده ی رویداد را از عناصر تعیین شده رها می کند.

_on( [suppressDisabledCheck ] [, element ], handlers )

گرداننده های رویداد را در عناصر مخصوصی محدود می کند. انتقال از طریق انتخابگرهای داخل نام های مربوط به رویداد پشتیبانی می شود، به عنوان مثال “click .foo”.

_setOption( key, value )

این متد از متد _setOptions() برای هر گزینه ی مجزایی، فرا خوانده می شود. وضعیت ویجت باید براساس تغییرات آپدیت شود.

_setOptions( options )

زمانی که متد option() فراخوانده می شود، این متد نیز فرا خوانده می شود، بدون توجه به فرمی که متد option() از آن فرا خوانده شد.

_show( element, option [, callback ] )

با استفاده از متدهای انیمیشن داخلی یا با استفاده از افکت های custom، یک عنصر را فورا نشان می دهد. گزینه show را برای مقادیر ممکن گزینه بررسی کنید.

_super( [arg ] [, … ] )

این متد، یک متد هم نام را از ویجت parent، با آرگیومنت های تعیین شده، تحریک می کند. به ویژه call().

_superApply( arguments )

متد هم نام را از ویجت parent با ردیفی از آرگیومنت ها، تحریک می کند.

_trigger( type [, event ] [, data ] )

این متد یک رویداد و کال بک مربوط به آن را آغاز می کند. گزینه ای با نامی به همان مقدار برای تایپ، به عنوان یک کال بک تحریک می شود.

destroy()

این متد قابلیت ویجت را به طور کل حذف می کند. این امر عنصر را به وضعیت pre-init خود باز خواهد گرداند.

disable()

این متد ویجت را غیرفعال می کند.

enable()

این متد ویجت را فعال می کند.

option( optionName )

این متد مقدار کنونی مربوط به optionName مشخص شده را می گیرد.

option()

این متد آبجکتی حاوی جفت های key/value را دریافت می کند که گزینه های hash کنونی مربوط به ویجت را نشان می دهند.

option( optionName, value )

این متد مقدار مربوط به گزینه ی widget که با optionName تعیین شده در ارتباط است، تنظیم می کند.

option( options )

این متد یک یا چند گزینه را برای ویجت تنظیم می کند.

widget()

این گزینه یک آبجکت jQuery را بازمی گرداند که حاوی عنصر اصلی یا دیگر عناصر تولید شده مرتبط می باشد.

Events

Event Method

Description

create( event, ui )

این رویداد با ایجاد یک ویجت آغاز می شود.

jQueryUI widget factory یک روش آبجکت محور برای مدیریت طول دوره ی (lifecycle) یک ویجت، ارائه می دهد. این فعالیت ها عبارتند از:

ایجاد و یا از بین بردن ویجت، به عنوان مثال:

$( “#elem” ).progressbar();

تغییر گزینه های ویجت، به عنوان مثال:

$( “#elem” ).progressbar({ value: 20 });

فراخوانی های super در ویجت های زیر مجموعه، برای مثال:

$( “#elem” ).progressbar( “value” );

Or

$( “#elem” ).progressbar( “value”, 40 );

اطلاعیه های رویداد، برای مثال:

$( “#elem” ).bind( “progressbarchange”, function() {

alert( “The value has changed!” );

});

مثال:

اکنون اجازه بدهید در مثال زیر یک custom widget ایجاد کنیم. ما یک دکمه ی widget ایجاد خواهیم کرد. چگونگی ایجاد گزینه ها، متدها و رویدادها را در یک ویجت در مثال های زیر مشاهده خواهیم کرد:

اجازه بدهید یک custom widget ساده ایجاد کنیم:

$(function () {

$.widget(“iP.myButton”, {

_create: function () {

this._button = $(“