انتخابگر رنگ در جی کوئری (Color Picker)


انتخابگر رنگ در جی کوئری (Color Picker)

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

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

پلاگین های زیادی برای افزودن قابلیت انتخابگر رنگ در جی کوئری که آنها را Color Picker می نامیم, وجود دارند.

در این آموزش قصد داریم یک نمونه کد از مثال ساده برای ساخت پلاگین Color Picker شخصی خود, در اختیار شما قرار بدیم.

در این مثال, ما از سلکتور های CSS برای نمایش پالت های رنگی استفاده می کنیم. با کلیک بر روی هر یک از این پالت ها (palette), ما رنگ انتخاب شده را در یک اشاره گر (EventListener) که روی تگ DIV اعمال شده, ذخیره می کنیم.

ما از متد CSS جی کوئری برای انتخاب و اعمال رنگ به DIV هدف استفاده می کنیم.

انتخابگر رنگ در جی کوئری (Color Picker)

خب سناریوی کار مشخص شد, شروع می کنیم به ساخت انتخابگر رنگ در جی کوئری :

 

کد HTML برای پالت رنگ

این کد HTML برای نمایش پالت های رنگی به منظور انتخاب رنگ ها استفاده شده است. این کد به شما چهار رنگ را در تگ های DIV جداگانه نمایش می دهد.

و استایل های مورد نظر :

اسکریپت انتخابگر رنگ در جی کوئری (Color Picker)

کد jQuery زیر شامل چند خط کد بسیار ساده برای پیاده سازی انتخابگر رنگ در جی کوئری است. ما یک اشاره گر (EventListener) برای ردیابی حرکت ماوس (mousemove) داریم.

حتما بخوانید  عملیات CRUD دیتابیس با AJAX

با کلیک بر روی پالت رنگی, ما کد رنگ را انتخاب و در آبجکت اشاره گر ذخیره می کنیم. این کد رنگی بر روی پس زمینه تگ Divی که روی آن کلیک می شود, اعمال خواهد شد.

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

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

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

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-enamd
logo-samandehi

دانلود کتاب

عضویت در خبرنامه