آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

دانلود کتابخانه Jquery UI

دوره های مرتبط با این مقاله

JqueryUI - Environment Setup
برقراری محیط JqueryUI

در این بخش به بحث در مورد دانلود و برقراری کتابخانه ی 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 ایجاد کنیم، محتوای زیر را به برچسب< head> کپی کنید:






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

اولین خط زمینه ی jQuery UI ( در مورد نمونه ی ما ui-lightness) را از طریق CSS اضافه می کند. این CSS ظاهر UI ما را خواهد ساخت.
دومین خط کتابخانه ی jQuery را اضافه می کند، همانطور که jQuery UI در بالای کتابخانه ی jQuery ساخته شده است.
سومین خط کتابخانه ی jQuery UI را اضافه می کند. این خط jQuery UI را در صفحه ی شما فعال می سازد.
اکنون اجازه بدهید محتوایی را به برچسب< head>اضافه کنیم:


< script type="text/javascript">

    $(function () {

        $('#dialogMsg').dialog();
< /script>
    });

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

< body>

Hello this is my first JqueryUI example.
< /body>

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


< DOCTYPE html>
< head>
< link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

< script src="http://code.jquery.com/jquery-1.10.2.js">< /script>
< script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">< /script>
< script type="text/javascript">

    $(function () {

        $('#dialogMsg').dialog();

    });

    < /script>
< /head>
< body>
< form id="form1" runat="server">
< div id="dialogMsg" title="First JqueryUI Example">
            Hello this is my first JqueryUI example.
        < /div>
    < /form>
< /body>
< html>

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

  • 14971
  •    846
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .