فیلد انتخابگر رنگ بدون نیاز به افزونه

سلام

شاید نیاز داشته باشید که یک فیلد انتخابگر رنگ یا به اصلاح ColorPicker به فرمتون اضافه کنید. توی این آموزش خیلی ساده یاد میگیرید بدون افزونه فقط با ۲ حرکت این کار رو انجام بدید.

۱ − ابتدا یک “فیلد HTML ” از قسمت “فیلدهای استاندارد” به فرمتون اضافه کنید و کد زیر رو داخلش قرار بدید.

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("li.jscolor input").addClass("jscolor");
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>

با اجرای دستورالعمل بالا باید فیلدی تقریبا مطابق تصویر زیر داشته باشید:

۲− یک “فیلد متن تک خطی” از قسمت “فیلدهای استاندارد” به فرمتون اضافه کنید و مطابق تصویر زیر از تب “نمایش” این فیلد مقدار “کلاس CSS سفارشی” رو به صورت jscolor قرار بدید:

خب کار تمامه و الان “فیلد متن تک خطی” شما تبدیل به یک “فیلد انتخابگر رنگ” میشه. حالا اگه خروجی فرمتون رو مشاهده کنید باید یک انتخابگر رنگ تقریبا مطابق با تصویر زیر داشته باشید:

البته بعضی اوقات بخاطر تداخل جیکوئری قالب یا افزونه هاتون و یا دلایل دیگری ممکنه با خطا مواجه بشید و نتونید خروجی مطلوب رو بگیرید که باید از قسمت Console مرورگر خطایابی کنید. چون این بخش کاملا جیکوئری هست و خطاهای جیکوئری هم به شدت زیاد توی سایت هایی که از پلاگین های زیاد استفاده میکنند رخ میده.

۲ تا نکته تکمیلی:

۱− پیشنهاد میکنم مطابق تصویر زیر از طریق الگوها (قاب ها) برای وارد کردن رنگ الگوی ****** رو ست کنید.

۲− برای قراردادن رنگ پیشفرض هم مطابق تصویر زیر از تب “پیشرفته” این فیلد رنگ پیشفرضتون رو داخل قسمت “مقدار پیشفرض” وارد کنید.

4.6/5 - (44 امتیاز)

جدیدترین مقالات