illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آشنایی با jQuery ui - قسمت اول

7 4625 ۱۴ شهریور ۹۳

به نام خدا

با عرض سلام و درود خدمت کاربران عزیز سون لرن اینبار  نسخه ی 1.11.1 این افزونه ی جی کوئری رو با هم فرا بگیریم.jQuery ui با جی کوئری تفاوت داره و در اصل برای ایجاد رابط های کاربری هست که توسط افراد دیگر نوشته شده اند و شما می توانید براحتی از آنها استفاده کرده و در وقت خود صرفه جویی کنید.

خاطر نشان می کنم که کامل ترین منبع آموزشی برای آموزش سایت اصلی jQuery ui هست که بنده آموزش های این سایت رو با توجه به تجربیات خودم اضافه می کنم و برای شما قرار می دم...

jQuery ui

jQuery ui

امکانات کلی jQuery ui حول سه محور اصلی می چرخد که عبارت اند از :

  1. ابزارک ها:ابزارک های کاربردی مثل تقویم و نوار پیشرفت و پیغام خطا و ....
  2. افکت ها(جلوه ها):که یک سری حرکات انیمیشنی آماده رو برای شما به ارمغان می آورد.
  3. تعامل ها:که شامل حرکات موس و تکان دادن عناصر مختلف می باشند.

در این چند قسمت ما بر آنیم تا با معرفی مثال های ساده استفاده از این پلاگین قدرتمند رو برای شما آسان کنیم.

باید خاطر نشان کنم که یکی از معایب jQuery ui راست چین نبودن آن است که البته فقط در مواردی نادر مشکل ساز می شود که آنرا هم به راحتی می توان با css و یا فریم ورک های آن درست کرد.

فراخوانی jQuery ui

برای فراخوانی jQuery ui یا شما باید فایل jQuery ui را از سایت اصلی آن دانلود کنید و یا از cdn استفاده کنید :

قبل از شروع آموزش بهتون پیشنهاد می کنم که با HTML و CSS و Javascript آشنا شوید و بعد به سراغ این آموزش بیایید.

ابزارک ها

تب های باز و بسته شونده

همونطور که مستحضرید تب های باز و بسته شونده می تونند تو انتقال محتوی زیاد در حجم کم بسیار مفید باشند و کمک کنند و اگر که واکنشگرا و قابل اجرا در مرورگر های مختلف باشند که دیگر عالی است. jQuery ui هم دارای امکاناتی مناسب و سریع برای ساخت همچین تب هایی هست.علی ای حال کدی رو در زیر مشاهده می کنید که ساده ترین شیوه ی ساخت تب هست که به تحلیل آن خواهیم پرداخت :

اگه از کد زیر استفاده کرده باشید درک خواهید کرد شما صاحب دو تب که با کلیک موس باز و بسته می شوند خواهید شد.و تنها شرط استفاده از این قابلیت درج ID مد نظر یعنی accordion در عنصری که می خواهید این قابلیت را داشته باشد و سپس قرار دادن یک تگ h3 برای تیتر و یک div  برای محتوی.

اگر هم بخواهید تنظیمات بیشتر و دقیق تری رو به تب هاتون بدید باید به کد و نکات زیر توجه داشته باشید :

  • active برای گشوده بودن تب nام در اولین لحظه.فقط توجه داشته باشید مقدار n از صفر تا +مثبت بی نهایت است.
  • animate زمان باز و بسته شدن تب ها را مشخص می کند.
  • event تعیین کننده ی بازشدن تب ها با انجام امر خاصی از کاربر است.مثلا هاور شدن یا کلیک کردن موس.که مقادیر زیر را می تونیم بهش نسبت بدیم:

onchange,onclick,onmouseover,onmouseout,onkeydown,onload

تعیین آیکون کوچک هر تب نیز با توجه به کد خط آخر امکان پذیر است.که باید تنها نام آیکون کوچک را وارد کنید.لیست این اسامی را نیز می توانید از این صفحه دنبال کنید.

برای راستچین کردن هم می توانید از بوت استرپ استفاده کنید.

پر کننده ی خودکار فیلد ها


حتما شده تا کنون بخواهید متنی رو تایپ کنید و یا دنبال بخواهید دنبال چیزی بگردید و سپس متوجه شوید که خود سایت یا نرم افزار کلمه ی مدنظر رو شما را حدس زده..حالا اگر بخواهید همچین امکانی رو به سایتتون اضافه کنید باید ازjQuery ui کمک بگیرید.اونهم به روش زیر :

این کد برای سرچ کردن تعدادی از اسامی خداوند هست که با جست و جو برخی از حروف آن اسم مبارک آن نام عظیم نمایش داده خواهد شد.

اگه به کد دقت کنید متوجه می شوید که 5 تا 14 مربوط به اسکرول هست که اگه می خواهید غیر فعال بشه باید این خطوط رو پاک کنید.اگر می خواهید کلمه ی کلیدی برای پیدا شدن در این بخش رو افزایش یا تغییر دهید باید خطوط 18 تا 26 را پاک کرده و کلماتتان را مثل نمونه وارد کنید.در نظر داشته باشید اگر از cms استفاده می کنید می توانید تابعی رو که برچسب ها رو فراخوانی می کنه رو در این بخش استفاده کنید.

حتما شما هم متوجه شده اید که برای نمایش این قابلیت در هرجای سایت باید خطوط 36 تا 38 رو وارد کنید به همین راحتی.

برای تعیین حداقل تعداد حروف برای وارد کردن برای نمایش نتایج نیز می توانید minLength: n را در خط 30پس از یک , وارد کنید و مقدار عدد طبیعی رو برای  n در نظر بگیرید.

پیغام خطا


برای نمایش پیغام باید کد زیر رو بین دو تگ head سایتتون اضافه کنید :

حالا برای فراخوانی و باز شدن این پنجره می تونید از کد زیر استفاده کنید :

برای اضافه کردن ویژگی های بیشتر به پنجره ی خودتون می تونید به نکات زیر توجه کنید؛کد زیر تعدادی از گزینه های پیشنهادی پنجره رو نمایش میده که به بررسی آنها خواهیم پرداخت :

  • resizable برای تغییر سایز پنجره توسط بازدید کننده هست که از دو مقدار بولین true و false پشتیبانی می کنه.
  • height و width که واضح هست برای تغییر اندازه ی پنجره بطور پیش فرض توسط کد نویس می باشد.
  • draggable که برای اجازه دادن به کاربر جهت حرکت یا عدم حرکت پنجره با موس استفاده می شود و بولین است.
  • autoOpen برای باز شدن خودکار است.مثلا پاپ آپ.این هم تابعی بولین است که مقدار false آن زمانی بکار می رود که روی دکمه ای کلیک شود و سپس نمایش داده بشود.(به کمک جی کوئری.)
  • closeOnEscape هم برای بسته شدن پنجره توسط دکمه ی ESC می باشد.
یادآوری : خب حالا ابزارک های نادر رو با هم بررسی کردیم و قسمت بعدی به بررسی افکت ها و تعاملات خواهیم پرداخت....
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 7 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام
    خسته نباشید. استفاده بردیم. فقط اگه دمو هم میداشت عالی میشد 😉

  • ‏‏

    سلام از این جی کوئری میشه در قالب جوملا استفاده کرد؟

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram