HTML5 でinput タグの typeにcolorを指定できるようになりました。
色選択のダイアログ（カラーパレット）を簡単に表示できるので、jQuery で使ってみます。
- 目次 -
スポンサーリンク
デモ
色を選択するとラベルの色が変わります。
選択値 ：
選択値 ：
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<html lang="ja"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#color-dialog").on("change", function(){ $('#label1').css("color", $('#color-dialog').val()) $('#area1').text($('#color-dialog').val()); }); $("#color-list").on("change", function(){ $('#label2').css("color", $('#color-list').val()) $('#area2').text($('#color-list').val()); }); }); </script> </head> <body> <div style="float: left;width: 150px;"> <label id="label1">list属性なし</label></br></br> <input id="color-dialog" type="color" value="#ffffff"></br></br> 選択値 ： <span id="area1"></span> </div> <div style="float: left;"> <label id="label2">list属性あり</label></br></br> <input id="color-list" type="color" value="#ffffff" list="colors"></br></br> <datalist id="colors"> <option value="#ff0000"></option> <option value="#00ff00"></option> <option value="#0000ff"></option> </datalist> 選択値 ： <span id="area2"></span> </div> <div style="clear: both;"></div> </body> </html> |
使い方
HTML 側
type=”color” と指定します。
|
1 |
<input id="color-dialog" type="color" value="#ffffff"> |
list 属性を指定すると、選択候補をしぼって提示できます。
|
1 2 3 4 5 6 7 |
<input id="color-list" type="color" value="#ffffff" list="colors"> <datalist id="colors"> <option value="#ff0000"></option> <option value="#00ff00"></option> <option value="#0000ff"></option> </datalist> |
jQuery 側
色選択時の処理は on メソッドの change に記述します。
|
1 2 3 |
$("#color-dialog").on("change", function(){ ・・・ }); |
選択した色の値は val メソッドで取得します。
|
1 |
$('#color-dialog').val() |
たとえば、黒を選択すると #000000 が返ってきます。
色のセット
色の初期値は value 属性で指定します。もし、なんらかのイベントで色をセットしたい場合は val メソッドに値を渡します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html lang="ja"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // 赤をセット $("#button_1").click(function() { $('#color-palette').val('#ff0000'); }); // 青をセット $("#button_2").click(function() { $('#color-palette').val('#0000ff'); }); }); </script> </head> <body> <input id="color-palette" type="color" value="#ffffff"></br></br> <input id="button_1" type="button" value="赤"> <input id="button_2" type="button" value="青"> </body> </html> |