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

دانلود UI Library از وب سایت رسمی آن.

دانلود UI Library از CDNs

دانلود UI Library از وب سایت رسمی آن:

وقتی که لینک http://jqueryui.com/ را باز می کنید، مشاهده خواهید کرد که سه گزینه برای دانلود JqueryUI وجود دارد:

Custom Download: روی این دکمه کلیک کنید تا یک ورژن متعارف از کتابخانه را دانلود کنید.

Stable: روی این دکمه کلیک کنید تا آخرین ورژن و دروافع ورژن ثابت از JqueryUI را دریافت کنید.

Legacy : روی این دکمه کلیک کنید تا انتشار پیشین از کتابخانه ی JqueryUI را دریافت کنید.

دانلود خاص با Download Builder:

با استفاده از Download Builder می توانید یک ساخت سفارشی (custom build) ایجاد کنید که حاوی تنها بخش هایی از کتابخانه ای است که مورد نیاز شما می باشد و این ورژن جدید از JqueryUI را براساس زمینه ی انتخاب شده، دانلود کنید. شما صفحه ای مانند زیر مشاهده خواهید کرد ( همان صفحه در دو تصویر قرار می گیرد.):

این کار برای هنگامی که می خواهید فقط از یک plugin خاص یا یک ویژگی از کتابخانه ی JqueryUI استفاده کنید، مفید می باشد. ساختار مسیر این ورژن در تصویر زیر نمایش داده شده است:

فایل های فشرده نشده در مسیر development-bundle قرار می گیرند. بهترین استفاده از فایل فشرده نشده در هنگام توسعه و یا عیب زدایی می باشد؛ فایل ذخیره شده پهنای باند را ذخیره کرده و اجرا را در تولید بهبود می بخشد.

دانلود پایدار:

روی دکمه ی Stable کلیک کنید که مستقیما شما را به یک فایل ZIP هدایت می کند که حاوی منابع، مثال ها و مستنداتی برای آخرین ورژن از کتابخانه ی JqueryUI می باشد. محتویات فایل ZIP را روی یک مسیر jqueryui باز کنید.

این ورژن حاوی فایل هایی شامل همه ی وابستگی ها، مجموعه ی بزرگی از دموها و حتی مجموعه ی تست واحد کتابخانه می باشد. این ورژن برای شروع کار مفید می باشد.

دانلود legacy:

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

دانلود UILibrary از CDNs:

یک CDN یا Content Delivery Network ( شبکه ی ارائه ی محتوا) شبکه ای از سرورهای طراحی شده برای ارائه ی فایل ها به یوزرها می باشد. اگر از یک لینک CDN در صفحه ی وب خود استفاده کنید، این لینک مسئولیت فایل های میزبان را از سرورهای خود شما به یک مجموعه ی خارجی انتقال می دهد. این لینک همچنین یک مزیت دیگر نیز دارد که اگر بازدید کننده ای از صفحه ی وب شما، یک کپی از JqueryUI را از همان CDN دانلود کرده باشد، نیازی به دانلود مجدد آن نمی باشد.

jQuery Foundation, Google, و Microsoft همه CDN هایی ارائه می دهند که هسته ی jQuery را به همراه jQuery UI میزبانی می کند.

از آنجایی که یک CDN شما را ملزم نمی کند تا میزبانی ورژن خود از jQuery و jQuery UI را انجام دهید، برای دموها و آزمایش عالی می باشد.

ما در حال استفاده از ورژن های CDN از کتابخانه در این آموزش می باشیم.

مثال:

اکنون اجازه دهید مثال ساده ای با استفاده از JqueryUI نگارش کنیم. اجازه بدهید یک فایل HTML ایجاد کنیم، محتوای زیر را به برچسب کپی کنید:

جزئیات مربوط به کد بالا عبارتند از:

اولین خط زمینه ی jQuery UI ( در مورد نمونه ی ما ui-lightness) را از طریق CSS اضافه می کند. این CSS ظاهر UI ما را خواهد ساخت.

دومین خط کتابخانه ی jQuery را اضافه می کند، همانطور که jQuery UI در بالای کتابخانه ی jQuery ساخته شده است.

سومین خط کتابخانه ی jQuery UI را اضافه می کند. این خط jQuery UI را در صفحه ی شما فعال می سازد.

اکنون اجازه بدهید محتوایی را به برچسب اضافه کنیم:

$(function () {

$(‘#dialogMsg’).dialog();

});

در <body> کد زیر را اضافه کنید:

Hello this is my first JqueryUI example.

کد کامل HTML مانند زیر می باشد. آن را با عنوان myfirstexample.html ذخیره کنید.

$(function () {

$(‘#dialogMsg’).dialog();

});

Hello this is my first JqueryUI example.

صفحه ی بالا را در مرورگر خود باز کنید، صفحه ای مانند زیر را مشاهده خواهید کرد: