آموزش جامع JQuery UI

jQuery UI رابط کاربر جیکوئری یک افزونه jQuery است، اما جزئی از هسته jQuery نیست. درواقع یک توسعهی رسمی هسته jQuery است که سعی در فراهم کردن امکانات اضافه برای رابط کاربر ِصفحاتی که بر پایهی jQuery هستند، دارد.
UI jQuery مجموعهای از عناصر هماهنگ است که میتوانند هریک به تنهایی نیز به کار روند. این عناصر در سه دستهی زیر قرار میگیرند.
جلوهها: جلوههای ارتقاءیافته، ورای آنچه در کتابخانهی jQuery هسته فراهم شده است.
تعاملها: تعاملهای موش(Mouse)، مانند کشیدن و رها کردن، مرتب کردن و نظایر آن
ویجتها: مجموعهای از کنترل های مورد نیاز، مانند نوار پیشرفت، لغزندهها، جعبههای گفتگو، زبانهها و
...
آموزش تعامل با JqueryUi

متد draggable() را برای ساخت عنصر قابل جابجایی DOM ارائه می دهد. زمانیکه عنصر قابل جابجایی می باشد، می توانید با کلیک کردن روی بخش و انتقال آن در هر جایی در محدوده ی بخش ویو، آن را جابجا کنید.

متد droppable (options) بیان می کند که یک عنصر HTML می تواند به عنوان عنصری مورد استفاده قرار بگیرد که می توانید در آن عناصر دیگری قرار دهید.

jQueryUI متد resizable() را برای تغییر اندازه ی هر عنصر در DOM می کند. این متد تغییر اندازه ی عنصری را که وقتگیر بود و کد HTML لازم داشت، بسیار ساده کرده است.

jQueryUI متد selectable() را برای انتخاب عنصر DOM به طور مجزا یا در گره، ارائه می دهد. با این متد عناصر با درگ کردن یک باکس با ماوس بر روی آنها انتخاب می شوند.

jQueryUI متد sortable() را ارائه می دهد تا دوباره عناصر را در یک لیست یا گرید با استفاده از ماوس، مرتب سازی کنیم.
آموزش گام به گام Jquery UI

یک کتابخانه ی قدرتمند javascript می باشد که در بالای کتابخانه ی jQuery JavaScript ساخته شده است. UI مخفف User Interface می باشد، که مجموعه ای plug-in ها برای jQuery می باشد که کاربردهای جدید به هسته ی کتابخانه ی jQuery اضافه می کند.

JqueryUI یکی از محبوب ترین چارچوب های front end حاضر می باشد. این برنامه اولین چارچوب front-end براق، بصری و قدرتمند همراه می باشد که برای گسترش سریغتر و راحت تر وب استفاده می شود. این برنامه از HTML، CSS و Javascript استفاده می کند.

در این بخش به بحث در مورد دانلود و برقراری کتابخانه ی JqueryUI خواهیم پرداخت. همچنین به طور مختصر مسیر این ساختار و محتوای آن را مطالعه خواهیم کرد. کتابخانه ی JqueryUI به دو روش در صفحه ی وب شما قابل استفاده می باشد:
آموزش ویجت در JqueryUi

Accordion Widget در jQueryUI یک نگهدارنده ی محتوا قابل ارتقا و پیش ساخته بر اساس jQuery است که به بخش های مختلفی تقسیم می شود که احتمالا شبیه به تب هستند. jQuery متد accordion() را برای دستیابی به این امر ارائه می دهد.

Autocompletion مکانیزمی است که به طور مداوم در وب سایت های مدرن برای ارائه ی لیستی از پیشنهادات به کاربرها برای اولین حرفی که در تکست باکس تایپ کرده، استفاده می شود.

jQueryUI متد button() را ارائه می دهد برای تبدیل عناصر HTML (مانند دکمه ها، ورودی ها و anchorها) به دکمه های دارای موضوع (themeable)، با تنظیم حرکات ماوس روی آنها، ارائه می دهد، که همه به طور واضحی توسط jQuery UI تنظیم شده اند.

Datepickers در jQueryUI به یوزرها اجازه می دهد تا تاریخ ها را به آسانی و به صورت بصری وارد کنند. شما می توانید فرمت تاریخ و زبان را تنظیم کنید، محدوده ی تاریخ انتخابی را تعیین کنید و آن را به آسانی به دکمه ها و گزینه های مسیریابی اضافه کنید.

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

یک منو ویجت معمولا حاوی یک نوار منوی اصلی با منوهای پیش رو می باشد. آیتم های این منوها اغلب دارای منوهای فرعی نیز می باشند.

نوارهای پیشروی (progress bar) میزان پیشروی یک عملکرد یا یک پروسه را نشان می دهد. می توانیم نوتر پیشروی را به دو گروه determinate progress bar و indeterminate progress bar تقسیم بندی کنیم.

Slider زمانی استفاده می شود که یک مقدار عددی در داخل یک محدوده ی خاص به دست می آید. مزیت یک slider برای ورودی یک متن این است که برای کاربر غیر ممکن می شود که یک مقدار بد وارد کند.

Spinner widget فلش های بالا / پایین را به سمت چپ یک باکس ورودی اضافه می کند، بنابراین به یوزر اجازه می ده تا یک مقدار را در باکس ورودی کم و زیاد کند.

Tooltip ها به هر عنصری ضمیمه می شوند. برای نمایش tooltip ها یک تیتر مرتبط به عناصر ورودی و یک تیتر در ارتباط با مقداری که قرار است به عنوان tooltip استفاده شود، اضافه کنید.
آموزش افکت های JqueryUI

متد addClass() یکی ازمتدهایی است که برای مدیریت افکت های بصری jQueryUI استفاده می شود. متد addClass() امکان متحرک سازی تغییرات را برای پراپرتی های CSS فراهم می کند...

jQueryUI چند متد مرکزی jQuery را طوری گسترش می دهد که می توانید انتقال های مختلف برای یک عنصر را متحرک سازی کنید. یکی از آنها متد animate است. jQueryUI متد jQuery animate را برای پشتیبانی از متحرک سازی رنگ، گسترش می دهد...

effect() یکی از متدهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد یک jQueryUI انیمیشن را برای برای عناصری به کار می گیرد که نیازی به نمایش دادن یا پنهان کردن آن نیست...

این فصل به متد hide() خواهد پرداخت که یکی از متدهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد effect() یک افکت انیمیشنی برای پنهان کردن عناصر به کار می برد...

متد removeClass() یکی از متدهایی است که برای افکت های بصری jQueryUI استفاده می شود. متد removeClass() گروه های به کار گرفته از عناصر را حذف می کند...

متد show() یکی از متدهایی است که برای تنظیم افکت های بصری jQueryUI استفاده می شود. متد show() یک آیتم را با استفاده از افکت نمایش داده شده، نشان می دهد...

این فصل به بررسی متد switchClass() خواهد پرداخت که یک گروه جدید و مفید برای اصلاح متد switchClass() است، برای جابه جایی از یک گروه CSS به گروه دیگر و محرک سازی از یک وضعیت به وضعیت دیگر...

متد toggle() متدهای show () یا hide () را با هم تغییر می دهد، بستگی به این دارد که آیا عنصر پنهان شده یا نه...

متد toggleClass() یک یا چند گروه از هر عنصر را در مجموعه ی هماهنگ شده ی عناصر اضافه یا حذف می کند...
آموزش ابزارها در JqueryUi

یک متد position() به شما اجازه می دهد تا موقعیت یک عنصر را با توجه به یک عنصر دیگر یا رویداد ماوس، تعیین کنید.

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