با سلام به شما دوستای خوب و محترم، امیدوارمکه حالتون خوب باشه و اموزشهای امروزما براتون مفید واقع بشه.
در این بخش به بحث در مورد دانلود و برقراری کتابخانه ی 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> کد زیر را اضافه کنید:
کد کامل HTML مانند زیر می باشد. آن را با عنوان myfirstexample.html ذخیره کنید.
$(function () {
$(‘#dialogMsg’).dialog();
});
صفحه ی بالا را در مرورگر خود باز کنید، صفحه ای مانند زیر را مشاهده خواهید کرد:
