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

jQuery UI in Action: Build 13 jQuery UI Projects

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: jQuery UI (رابط کاربری) دوره عملی!! مثال‌ها، آزمون‌ها و پروژه‌های jQuery UI. jQuery UI از ابتدا یاد بگیرید jQuery UI از ابتدا درک تعاملات و ویجت های jQuery UI با جزئیات افزایش دانش jQuery و jQuery UI توسعه 13 پروژه دنیای واقعی jQuery UI از ابتدا تبدیل به یک jQuery UI متخصص، HTMLBaptS UI jQuery مفید خواهد بود

*** 23.5 ساعت محتوا***

***کوئیزها، تمرینات، تمرینات عملی و 13 پروژه منحصر به فرد گنجانده شده است***

---------------------------------------------- ------------------------------------------------ --------------------------

آیا می خواهید برنامه های بسیار تعاملی و غنی را به راحتی توسعه دهید؟ jQuery UI مجموعه ای از ویجت ها، تعاملات، جلوه ها و تم های ساخته شده در بالای کتابخانه jQuery است.

" jQuery UI in Action: Build 13 jQuery UI Projects " یک دوره 100% عملی jQuery UI با تعداد زیادی فعالیت کد، آزمون ها، تمرین ها و پروژه ها است. با تکمیل این دوره، به اندازه کافی مطمئن خواهید بود که پروژه های jQuery UI را به تنهایی از ابتدا توسعه دهید.

در این دوره آموزشی، شما یاد می گیرید که jQuery UI چیست، چگونه محیط توسعه jQuery UI را راه اندازی کنید و چگونه از تعاملات، ویجت ها و افکت های مختلف استفاده کنید. فعل و انفعالات مختلفی که در این دوره مورد بحث قرار می‌گیرند عبارتند از: قابل کشیدن، رها کردن، تغییر اندازه، قابل انتخاب و مرتب‌سازی. همچنین ویجت‌های مختلف مانند آکاردئون، زبانه‌ها، تکمیل خودکار، گفتگو، تاریخ‌گزین، نوار پیشرفت، نوار لغزنده، منو، راهنمای ابزار، چرخان، دکمه، چک‌باکس رادیو، منوی انتخاب و گروه کنترل را با جزئیات درک خواهید کرد.

آخرین بخش، بخش Let's Develop است که در آن 13 پروژه jQuery UI را از ابتدا توسعه خواهید داد. این به شما کمک می کند واقعاً اعتماد به نفس خود را در استفاده از دانش jQuery UI خود برای توسعه پروژه های jQuery UI در دنیای واقعی افزایش دهید. پروژه های توسعه یافته به عنوان بخشی از این دوره عبارتند از:

  1. بازی تطبیق میوه ها

  2. قدرت سنج رمز عبور

  3. کنترل کننده سرعت ویدئو

  4. برنامه فهرست کارها

  5. سیستم استعلام قطار

  6. یادداشت های چسبنده آنلاین

  7. کلمه شکار

  8. انتخابگر رنگ

  9. فیلتر محدوده قیمت

  10. ذره بین تصویر

  11. پازل اره منبت کاری اره مویی

  12. انتخابگر هفته

  13. ترتیب جدول تناوبی

پس به این دوره فوق العاده jQuery UI بپیوندید و اوقات خوبی را با یادگیری 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!!!

نمایش نظرات

آموزش jQuery UI in Action: ساخت 13 پروژه jQuery UI
جزییات دوره
23.5 hours
180
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,980
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Crypters Infotech Crypters Infotech

راه حل های آموزشی ارتقای شغلی