آموزش jQuery UI in Action: ساخت 13 پروژه jQuery UI

سرفصل ها و درس ها

مقدمه ای بر jQuery UI Introduction to jQuery UI

• قرار است چه چیزی را توسعه دهید؟ What are You Going to Develop?

• به چه نرم افزاری نیاز دارید؟ What Software You Need?

• jQuery UI چیست؟ What is jQuery UI?

محیط زیست را تنظیم کنید Set Up the Environment

• به روز رسانی با توجه به آخرین نسخه Update Regarding Latest Version

• دانلود فایل های مورد نیاز jQuery UI Download Required jQuery UI Files

• افزودن مرجع آفلاین Add Offline Reference

• افزودن مرجع آنلاین Add Online Reference

تعامل 1: قابل کشیدن Interaction 1: Draggable

• مقدمه ای بر تعامل قابل کشیدن Introduction to Draggable Interaction

• قابلیت کشیدن را محدود کنید Restrict Draggability

• قابلیت کشیدن روی عناصر خاص را لغو کنید Cancel Draggability on Specific Elements

• نوع، موقعیت و قابلیت کلیک مکان نما را تنظیم کنید Set Type, Position and Click-ability of Cursor

• چند پیکسل برای جابجایی How many Pixels to Move

• به موقعیت اصلی برگردید Return to the Original Position

• یک کمک کننده اضافه کنید Add a Helper

• افزودن اثر مغناطیسی Add Magnetic Effect

• روش های مختلف Different Methods

• مدیریت رویدادها Manage Events

• مسابقه: تعامل قابل کشیدن Quiz: Draggable Interaction

تعامل 2: قابل رها کردن Interaction 2: Droppable

• مقدمه ای بر تعامل Droppable Introduction to Droppable Interaction

• تصمیم بگیرید که کدام عناصر قابل کشیدن توسط Droppable پذیرفته شوند Decide which Draggable Elements to be Accepted by the Droppable

• تصمیم بگیرید که چه زمانی یک عنصر به عنوان حذف شده در نظر گرفته شود Decide when an Element to be Considered as Dropped

• تصمیم بگیرید کدام عنصر Nested Droppable را بپذیرد Decide which Nested Droppable Element to Accept Dropped Element

• ظاهر Droppable را بر اساس حرکت Draggable مدیریت کنید Manage the Look of Droppable Based On Draggable's Movement

• تصمیم بگیرید که آیا برگردید یا نه Decide whether to Revert or Not

• مدیریت رویدادها Manage Events

• مسابقه: تعامل Droppable Quiz: Droppable Interaction

تعامل 3: قابل تغییر اندازه Interaction 3: Resizable

• مقدمه ای بر تعامل قابل تغییر اندازه Introduction to Resizable Interaction

• برای تغییر اندازه عنصر کجا را بکشیم Where to Drag to Resize the Element

• تغییر اندازه همزمان Synchronous Resizing

• تغییر اندازه را محدود کنید Restrict Resizing

• یک روح/کمک کننده اضافه کنید Add a Ghost/Helper

• نسبت ابعاد را حفظ کنید Maintain Aspect Ratio

• تغییر اندازه متحرک Animate Resizing

• گزینه های متفرقه (گزینه هایی که قبلاً بحث شده است) Miscellaneous Options (Options Already Discussed)

• مدیریت رویدادها Manage Events

• امتحان: تعامل قابل تغییر اندازه Quiz: Resizable Interaction

تعامل 4: قابل انتخاب Interaction 4: Selectable

• مقدمه ای بر تعامل قابل انتخاب Introduction to Selectable Interaction

• موارد انتخابی و غیر قابل انتخاب را فیلتر کنید Filter Selectables and Non-Selectables

• مدیریت رویدادها Manage Events

تعامل 5: قابل مرتب سازی Interaction 5: Sortable

• مقدمه ای بر تعامل قابل مرتب سازی Introduction to Sortable Interaction

• فضای سفید را جایگزین کنید Replace the White Space

• اتصال بین Sortable ها Connect between Sortables

• برخی از موارد را قابل مرتب کردن کنید Make Some Items Sortable

• گزینه های متفرقه (گزینه هایی که قبلاً بحث شده است) Miscellaneous Options (Options Already Discussed)

ویجت 1: آکاردئون Widget 1: Accordion

• مقدمه ای بر ابزارک آکاردئون Introduction to Accordion Widget

• اجازه جمع کردن همه پانل ها Allow to Collapse All Panels

• تصمیم بگیرید که کدام پنل به صورت پیش فرض نمایش داده شود Decide which Panel to be Displayed by Default

• انیمیشن را سفارشی کنید Customize the Animation

• زمان پنهان کردن/نمایش پانل های محتوا When to Hide/Show Content Panels

• ارتفاع پانل های محتوا را تنظیم کنید Set the Height of the Content Panels

• هدر را برای آکاردئون تنظیم کنید Set the Header for the Accordion

• نمادهای پیش فرض را در آکاردئون تغییر دهید Change the Default Icons in Accordion

• مدیریت رویدادها Manage Events

• تمرین: پانل جدید را به آکاردئون اضافه کنید Exercise: Add New Panel to the Accordion

ویجت 2: زبانه ها Widget 2: Tabs

• مقدمه ای بر ابزارک Tabs Introduction to Tabs Widget

• نمایش محتوای خارجی Display External Content

• مخفی کردن و نمایش پانل ها را متحرک کنید Animate Hiding and Showing of Panels

• گزینه های متفرقه (گزینه هایی که قبلاً بحث شده است) Miscellaneous Options (Options Already Discussed)

• مدیریت رویدادها Manage Events

• تمرین: برگه انتخاب شده را فعال کنید Exercise: Make the Selected Tab Active

ویجت 3: تکمیل خودکار Widget 3: Autocomplete

• مقدمه ای بر تکمیل خودکار ویجت Introduction to Autocomplete Widget

• یکی را انتخاب کنید و دیگری را نمایش دهید Select One and Display Another

• یک تابع برگشت به تماس را به عنوان منبع تنظیم کنید Set a Callback Function as the Source

• داده های JSON را بارگیری کنید Load JSON Data

• حداقل طول را مشخص کنید و فوکوس را اضافه کنید Specify Minimum Length and Add Focus

• لیست پیشنهادات را با توجه به عنصر ورودی قرار دهید Position the Suggestion List with respect to Input Element

• متن مطابق را برجسته کنید Highlight Matching Text

• مدیریت رویدادها Manage Events

ویجت 4: گفتگو Widget 4: Dialog

• مقدمه ای بر دیالوگ ویجت Introduction to Dialog Widget

• مخفی کردن و نمایش دیالوگ را متحرک کنید Animate Hiding and Showing of Dialog

• اندازه و موقعیت دیالوگ را تنظیم کنید Set the Size and Position of Dialog

• عملکردهای پیش فرض را تغییر دهید Change Default Functionalities

• رفتار معین را اضافه کنید Add Modal Behaviour

• دکمه ها را به دیالوگ اضافه کنید Add Buttons to the Dialog

• مدیریت رویدادها Manage Events

• روش های مختلف Different Methods

• تمرین: دو دیالوگ ایجاد کنید Exercise: Create Two Dialogs

ویجت 5: Datepicker Widget 5: Datepicker

• مقدمه ای بر ویجت Datepicker Introduction to Datepicker Widget

• تاریخ ها را در یک محدوده قابل انتخاب قرار دهید Make Dates in a Range Selectable

• تعطیلات آخر هفته/روزهای هفته را غیر قابل انتخاب کنید Make Weekends/Weekdays Non-Selectable

• تاریخ های خاص را غیر قابل انتخاب کنید Make Specific Dates Non-Selectable

• تاریخ های قبل از امروز (روز فعلی) را غیر قابل انتخاب کنید Make Dates Before Today(Current Day) Non-Selectable

• به سبک تعطیلات در تقویم شما Style Holidays in Your Calendar

• مخفی کردن و نمایش Datepicker را متحرک کنید Animate Hiding and Showing of Datepicker

• فرمت تاریخ و فیلد جایگزین Format Date and Alternate Field

• نمایش Datepicker به روش های مختلف Display Datepicker in Different Ways

• محلی سازی Datepicker - قسمت 1 Localize the Datepicker - Part 1

• محلی سازی Datepicker - قسمت 2 Localize the Datepicker - Part 2

• گزینه های پیش فرض Datepicker را تغییر دهید Change Default Datepicker Options

• کنترل Datepicker به صورت برنامه ریزی شده Control Datepicker Programmatically

ویجت 6: نوار پیشرفت Widget 6: Progressbar

• مقدمه ای بر ابزارک نوار پیشرفت Introduction to Progressbar Widget

• مقدار فعلی و حداکثر نوار پیشرفت را تنظیم کنید Set the Current and Maximum Value of the Progress Bar

• نوار پیشرفت را سفارشی کنید Customize the Progressbar

• مقدار Progressbar را به صورت برنامه ای تغییر دهید Change the Value of the Progressbar Programmatically

ویجت 7: اسلایدر Widget 7: Slider

• مقدمه ای بر ابزارک اسلایدر Introduction to Slider Widget

• حداقل، حداکثر و مقدار فعلی اسلایدر را تنظیم کنید Set the Minimum, Maximum and Current Value of the Slider

• لغزنده برد Range Slider

• گزینه های متفرقه Miscellaneous Options

• مدیریت رویدادها Manage Events

• تمرین: تغییر اندازه قلم Exercise: Change Font Size

ویجت 8: منو Widget 8: Menu

• مقدمه ای بر ابزارک منو Introduction to Menu Widget

• تغییر یا اضافه کردن نمادها Change or Add Icons

• تعیین موقعیت منو Positioning the Menu

• تقسیم‌کننده‌ها و دسته‌ها Dividers and Categories

• مدیریت رویدادها Manage Events

• روش های مختلف - قسمت 1 Different Methods - Part 1

• روش های مختلف - قسمت 2 Different Methods - Part 2

ویجت 9: راهنمای ابزار Widget 9: Tooltip

• مقدمه ای بر ابزارک راهنمای ابزار Introduction to Tooltip Widget

• متحرک سازی مخفی کردن و نمایش راهنمای ابزار Animate Hiding and Showing of Tooltip

• راهنمای ابزار را قرار دهید Position the Tooltip

• ظاهر و احساس Tooltip را سفارشی کنید Customize the Look and Feel of Tooltip

• سفارشی کردن محتوا Customize the Content

• روش ها و رویدادها Methods and Events

ویجت 10: اسپینر Widget 10: Spinner

• مقدمه ای بر ابزارک Spinner Introduction to Spinner Widget

• اسپینر برای ارزها و اعشار Spinner for Currencies and Decimals

ابزارک های متفرقه Miscellaneous Widgets

• ابزارک 11: دکمه Widgets 11: Button

• ویجت 12: چک باکس رادیو Widget 12: Checkbox Radio

• ویجت 13: منو را انتخاب کنید Widget 13: Select Menu

• ویجت 14: گروه کنترل Widget 14: Controlgroup

جلوه ها Effects

• جلوه های مختلف Different Effects

• افزودن/حذف/تغییر کلاس Add/ Remove/ Toggle Class

• انیمیشن رنگی Color Animation

بیایید توسعه دهیم (پروژه های رابط کاربری جی کوئری که از ابتدا توسعه یافته اند) Let's Develop (jQuery UI Projects Developed from Scratch)

• بازی تطبیق میوه ها: قسمت 1 Fruits Matching Game: Part 1

• بازی تطبیق میوه ها: قسمت 2 Fruits Matching Game: Part 2

• بازی تطبیق میوه ها: قسمت 3 Fruits Matching Game: Part 3

• بازی تطبیق میوه: قسمت 4 Fruit Matching Game: Part 4

• بازی تطبیق میوه ها: قسمت 5 Fruits Matching Game: Part 5

• سنج قدرت رمز عبور: قسمت 1 Password Strength Meter: Part 1

• قدرت سنج رمز عبور: قسمت 2 Password Strength Meter: Part 2

• قدرت سنج رمز عبور: قسمت 3 Password Strength Meter: Part 3

• کنترل کننده سرعت ویدئو: قسمت 1 Video Speed Controller: Part 1

• کنترل کننده سرعت ویدئو: قسمت 2 Video Speed Controller: Part 2

• برنامه فهرست کارها: قسمت 1 To-Do List Application: Part 1

• برنامه فهرست کارها: قسمت 2 To-Do List Application: Part 2

• برنامه فهرست کارها: قسمت 3 To-Do List Application: Part 3

• برنامه فهرست کارها: قسمت 4 To-Do List Application: Part 4

• برنامه فهرست کارها: قسمت 5 To-Do List Application: Part 5

• سیستم استعلام قطار: قسمت 1 Train Enquiry System: Part 1

• سیستم استعلام قطار: قسمت 2 Train Enquiry System: Part 2

• سیستم استعلام قطار: قسمت 3 Train Enquiry System: Part 3

• یادداشت های چسبنده آنلاین: قسمت 1 Online Sticky Notes: Part 1

• یادداشت های چسبنده آنلاین: قسمت 2 Online Sticky Notes: Part 2

• یادداشت های چسبنده آنلاین: قسمت 3 Online Sticky Notes: Part 3

• یادداشت های چسبنده آنلاین: قسمت 4 Online Sticky Notes: Part 4

• یادداشت های چسبنده آنلاین: قسمت 5 Online Sticky Notes: Part 5

• کلمه شکار: قسمت 1 Word Hunt: Part 1

• کلمه شکار: قسمت 2 Word Hunt: Part 2

• شکار واژه ها: قسمت 3 Word Hunt: Part 3

• کلمه شکار: قسمت 4 Word Hunt: Part 4

• کلمه شکار: قسمت 5 Word Hunt: Part 5

• کلمه شکار: قسمت 6 Word Hunt: Part 6

• کلمه شکار: قسمت 7 Word Hunt: Part 7

• کلمه شکار: قسمت 8 Word Hunt: Part 8

• شکار واژه ها: قسمت 9 Word Hunt: Part 9

• کلمه شکار: قسمت 10 Word Hunt: Part 10

• کلمه شکار: قسمت 11 Word Hunt: Part 11

• کلمه شکار: قسمت 12 Word Hunt: Part 12

• شکار واژه ها: قسمت 13 Word Hunt: Part 13

• انتخابگر رنگ: قسمت 1 Color Picker: Part 1

• انتخابگر رنگ: قسمت 2 Color Picker: Part 2

• فیلتر محدوده قیمت: قسمت 1 Price Range Filter: Part 1

• فیلتر محدوده قیمت: قسمت 2 Price Range Filter: Part 2

• فیلتر محدوده قیمت: قسمت 3 Price Range Filter: Part 3

• ذره بین تصویر: قسمت 1 Image Magnifier: Part 1

• ذره بین تصویر: قسمت 2 Image Magnifier: Part 2

• پازل اره منبت کاری اره مویی: قسمت 1 Jigsaw Puzzle: Part 1

• پازل اره منبت کاری اره مویی: قسمت 2 Jigsaw Puzzle: Part 2

• پازل اره منبت کاری اره مویی: قسمت 3 Jigsaw Puzzle: Part 3

• پازل اره منبت کاری اره مویی: قسمت 4 Jigsaw Puzzle: Part 4

• پازل اره منبت کاری اره مویی: قسمت 5 Jigsaw Puzzle: Part 5

• پازل اره منبت کاری اره مویی: قسمت 6 Jigsaw Puzzle: Part 6

• پازل اره منبت کاری اره مویی: قسمت 7 Jigsaw Puzzle: Part 7

• انتخاب کننده هفته: قسمت 1 Week Picker: Part 1

• انتخاب کننده هفته: قسمت 2 Week Picker: Part 2

• انتخاب هفته: قسمت 3 Week Picker: Part 3

• تنظیم جدول تناوبی: قسمت 1 Periodic Table Arranging: Part 1

• تنظیم جدول تناوبی: قسمت 2 Periodic Table Arranging: Part 2

• تنظیم جدول تناوبی: قسمت 3 Periodic Table Arranging: Part 3

• تنظیم جدول تناوبی: قسمت 4 Periodic Table Arranging: Part 4

• تنظیم جدول تناوبی: قسمت 5 Periodic Table Arranging: Part 5

• تنظیم جدول تناوبی: قسمت 6 Periodic Table Arranging: Part 6

• تنظیم جدول تناوبی: قسمت 7 Periodic Table Arranging: Part 7

بخش پاداش Bonus Section

• سخنرانی جایزه: پیشنهادات ویژه در دوره های دیگر!!! Bonus Lecture: Special Offers on Other Courses!!!