แจก!!! Color picker เลือกสี บนเว็บไซต์ เอาไปติดใช้งานบนหน้าเว็บได้เลย

Download 

ตัวอย่างการใช้งาน Color Picker เลือกสี บนเว็บไซต์ โดยท่านสามารถทดลองใช้งานตัวอย่างด้านล่างนี้ได้เลยครับ

ตัวอย่างการตั้งค่า Text Autocomplete

เริ่มที่ เรียกใช้งาน StyleSheet และ Javascript ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin = "anonymous">
<link type="text/css" rel="stylesheet" href="css/wheelcolorpicker.css" />
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin = "anonymous"></script>
<script type="text/javascript" src="js/jquery.wheelcolorpicker.js"></script>

ส่วน Stylesheet กำหนดค่า css ของ Color Picker

<style>
    h1{
        padding-left: 15px;
        font-size: 20px !important;
        font-weight: bold;
        margin: 0 0 15px 0;
    }

    .example-box{
        float:left;
        width: 300px;
        margin: 25px auto;
    }

    .card{
        padding: 10px 0;
    }

    .form-group{
        padding: 8px 15px;
        margin: 0;
    }

    div.preview_picker{
        float: left;
        background: url(img/select.png) repeat scroll center center transparent;
        border-radius: 3px;
        box-shadow: 2px 2px 2px #444444;
        cursor: pointer;
        height: 30px;
        width: 30px;
    }

    input.colorpicker{
        width: calc(100% - 40px);
        float: left;
        margin-left: 8px;
        height: 33px;

    }

</style>

ในส่วนของ Body สร้าง Input Fields สำหรับ Color picker

<div class="container1">
    <div class="row example-box">
        <h1>ตัวอย่าง Color picker</h1>
        <div class='col-sm-12'>
            <div class="card">
                <div class="form-group">
                    <div class="preview_picker"></div>
                    <input type="text" id="colorpicker" class="colorpicker form-control" />
                </div>
                <div class="form-group">
                    <div class="preview_picker"></div>
                    <input type="text" id="colorpicker2" class="colorpicker form-control" />
                </div>
                <div class="form-group">
                    <div class="preview_picker"></div>
                    <input type="text" id="colorpicker3" class="colorpicker form-control" />
                </div>
            </div>
        </div>
    </div>
</div>

ในส่วนของ Script กำหนดค่าตัวแปรเริ่มต้นสี ของแต่ละ Input ในรูปแบบของ Array (ส่วนโค้ดสีแดง) เรียกใช้งาน Function colorpicker (ส่วนโค้ดสีส้ม) และส่วนควบคุม (ส่วนโค้ดสีฟ้า) ตามกรอบด้านล่าง

<script>
        $(document).ready(function(){
            var defaultColor = ['#ff0000','#ffe100','#0F0'];
            var cnt = 0;
            $('.colorpicker').each(function () {
                $(this).wheelColorPicker('setColor',defaultColor[cnt]);
                $(this).closest('div').find('.preview_picker').css('background-color',defaultColor[cnt]);
                cnt++;
            })

            $('.colorpicker').on('keyup',function(){
                $(this).closest('div').find('.preview_picker').css('background-color', $(this).wheelColorPicker('getValue', 'rgb'))
            });
            $('.colorpicker').on('colorchange', function() {
                $(this).closest('div').find('.preview_picker').css('background-color', $(this).wheelColorPicker('getValue', 'rgb'));
            });
            $('.preview_picker').on('click',function(){
                $(this).closest('.form-group').find('input').focus();
            });
        });
</script>

ขอบคุณความรู้ดี ๆ จาก https://github.com/fujaru/jquery-wheelcolorpicker/