jquery - 顏色選擇器

<link href="../../Content/jquery.minicolors.css" rel="stylesheet" />

<input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#ffafac">

<script src="../../Scripts/jquery-1.10.1.min.js"></script>
<script src="../../Scripts/bootstrap.min.js"></script>
<script src="../../Scripts/jquery.minicolors.js"></script>
//顏色選擇器 顯示所選顏色
$('.demo').each( function() {
    $(this).minicolors({
        control: $(this).attr('data-control') || 'hue',
        defaultValue: $(this).attr('data-defaultValue') || '',
        inline: $(this).attr('data-inline') === 'true',
        letterCase: $(this).attr('data-letterCase') || 'lowercase',
        opacity: $(this).attr('data-opacity'),
        position: $(this).attr('data-position') || 'bottom left',
        change: function(hex, opacity) {
            if( !hex ) return;
            if( opacity ) hex += ', ' + opacity;
            try {
                console.log(hex);
            } catch(e) {}
        },
        theme: 'bootstrap'
    });
});