50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت انتخابگر رنگ با jQuery UI

  • منتشر شده در تاریخ

ساخت انتخابگر رنگ با jQuery UI

پلاگین های colorpicker محبوب و زیادی در مارکت ها و github قابل دسترس است. قبلا, نحوه پیاده سازی یک مثال از ساخت انتخاب گر رنگ با bootstrap را دیدیم.

سایت های زیادی پیشنهاد می کنند که از Bootstrap برای نمایش حالت های UI استفاده کنند که ما از آن استفاده نمی کنیم چراکه بوت استرپ بسیار سنگین است. بنابراین در این آموزش jQuery قصد داریم به شما نحوه ساخت انتخابگر رنگ با jQuery UI را نشان بدیم.

ما از Vandeleee Colorpicker استفاده می کنیم. این کتابخانه براساس jQuery UI themeroller است و به شما یک رابط کاربری قوی برای انتخاب گر رنگ را می دهد.

این پلاگین به شما آپشن هایی را برای کانفیگ Colorpicker با بازنویسی آپشن های پیش فرض را می دهد. هنگام فراخوانی تابع استارتر(init) پلاگین, باید این کانفیگ ها را ست کنیم. این پلاگین آپشن های زیادی را بری کنترل فرمت رنگ ها, فرمت ورودی/خروجی و .. می دهد.

بعضی از قابلیت های انتخاب گر رنگ بصورت زیر است:

  • براساس themeroller است
  • کنترل های بسیار قابل تنظیم, layout, فرمت های ورودی/خروجی
  • مدل رنگ دقیق
  • پشتیبانی از localization یا محلی سازی
  • APIکامل با رویدادها و متدها
  • قابل توسعه
  • فعال/غیرفعال کردن کنترل های Colorpicker
  • پشتیبانی از کیبورد

رابط کاربری انتخاب گر رنگ jQueyr

یک فرم HTML با فیلد input داریم که برای ساخت انتخابگر رنگ با jQuery UI استفاده خواهیم کرد. این پلاگین یک آیکون انتخاب گر رنگ را در کنار فیلد input اضافه می کند. با کلیک روی این آیکون, رابط کاربری انتخابگر رنگ به کاربر نمایش داده می شود. من قابلیت نمایش رابط کاربری colorpicker به صورت modal را فعال کردم.

با انتخاب رنگ ها از پالت رنگ, کد HEX رنگ انتخاب شده در داخل فیلد قرار می گیرد.

پلاگین انتخاب گر رنگ را دانلود و  آن را در فایل HTML خود اینکلود کنید. فراموش نکنید که HTML doctype را برای دریافت بهترین خروجی تعریف کنید.

برای ردیف شدن آیکون انتخابگر رنگ با فیلد input از استایل های زیر استفاده کردیم.

ما از انتخاب گر رنگ jQueryUI برای تغیر رنگ بصورت داینامیک و نمایش کد HEX آن در کنترل باکس input استفاده کردیم.

کد HTML زیر شامل یک المنت input و آیکون است. با کلیک روی این آیکون , رویداد کلیک به شما انتخاب گر رنگ را نمایش می دهد. با انتخاب یک رنگ, به عنوان رنگ آیکون انتخاب می شود و کد HEX آن نیز در فیلد input قرار می گیرد.

و استایل ها بصورت زیر است :

کد ساخت انتخابگر رنگ با jQuery UI

در این اسکریپت, تابع کتابخانه colorpicker به همراه سلکتور المنت input مقدار دهی می شود. در هنگام راه اندازی, آپشن های پیش فرض را بازنویسی می کنیم.

برای مثال, مقدار modal را true قرار دادیم تا انتخابگر رنگ را بصورت پنجره modal نمایش دهد. همچنین colorFormat را HEX قرار دادیم تا کد HEX رنگ را برگشت دهد.

خروجی : ساخت انتخابگر رنگ با jQuery UI

اسکرین شات زیر به شما انتخابگر رنگ را با استفاده از این پلاگین jQuery را نشان می دهد. در این خروجی, کد HEX رنگ انتخاب شده در فیلد input قرار می گیرد.

ساخت انتخابگر رنگ با jQuery UI

امیدوارم از آموزش ساخت انتخابگر رنگ با jQuery UI نهایت استفاده را برده باشید .

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

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

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی