افزودن ویژگی color picker انتخاب رنگ با JavaScript

افزودن ویژگی color picker انتخاب رنگ با JavaScript

color picker با JavaScript – با استفاده از کتابخانه jscolor می توانید یک انتخاب کننده رنگ با فرمت های مختلفی مثل : rgb , rgba , hex و … داشته باشید .

به راحتی می توانید از این کتابخانه استفاده کنید کافی است از data-jscolor برای تگ html خود استفاده کنید تا دیالوگ رنگ ظاهر شود .


فایل index.html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <input data-jscolor="{}" type="text" id="colorpck" value="rgba(65,105,225,1)">

        <div id="preview">آستالاویستا</div>

       
    </div>



    <script src="static/js/lib/jscolor.min.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>


یک استایل کوچک در main.css

#preview{
    width: 350px;
    height: 150px;
    background-color: royalblue;
    margin: 115px auto;
}


فایل app.js برای تنظیم کتابخانه jscolor

jscolor.presets.default = {
	width: 141,              
	position: 'right',      
	previewPosition: 'right', 
	previewSize: 90,
    onInput : function(){
        document.getElementById("preview").style.backgroundColor = this.toRGBAString();
    }
};


خروجی برنامه ( نتیجه )

color picker با JavaScript

دانلود برنامه دیالوگ رنگ با Js

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

لیست نظرات

  1. مهران توکلی
    مهران توکلی

    سلام دمت گرم فقط چجوری باید وقتی صفحه رفرش میشه پس زمینه عوض نشود؟

    02 دی 1400 | 11:21:42
  • حسین باقری
    حسین باقری

    اگر به خط 14 بالا توجه کنید colorpck مقدار rgba همون مقدار اولیه برای پس زمینه هست هر مقدار کد رنگی که بخواین می تونید اونجا تنظیم کنید .

    13 دی 1400 | 23:57:08
contact us