参考URLにあるColorPickerの実装を試してみました。
--------------------------------------------------------------
Microsoft Office 2010のような色選択コントロールを実装します。
【実装コード】
１、jQuery (v1.7 or greater), jQuery UI (v1.8 or greater)をダウンロードして、実装する
HTMLにコード追加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
２、使うCSSを記述HTMLにコード追加
<link
rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css"
/>
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css" />
３、inputタブに、colorpickerの実装
HTMLにコード追加
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
４、オプション設定
(1) 初期色設定
$("#mycolor").colorpicker({
color: "#ffffff"
});
(2) ColorPickerのパレットデフォルト表示
$("#mycolor").colorpicker({
defaultPalette: 'web'
});
(3) プレート内で色クリック及びマウスオーバー時の情報を下段に表示しない
$("#mycolor").colorpicker({
displayIndicator: false
});
(4) ボタン非表示
$("#mycolor").colorpicker({
hideButton: true
});
(5) パレットはボタンのみで表示
このオプションをしないと、inputのfocusを受けた時にパレット表示される。
デフォルトは、inputフォーカス時とボタンクリック時に表示されます。
$('#mycolor').colorpicker({showOn:'button'});
(6) パレット内表示文字変更
$("#mycolor").colorpicker({
strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
});
(7) パレットに透明色("#0000ffff")選択可能にする
$("#mycolor").colorpicker({
transparentColor: true
});
５、イベント処理
(1) 色選択時
$("#mycolor").on("change.color", function(event, color){
$("#title").attr("style", "background-color:" + color);
})
(2) パレット内のカラーボックスマウスオーバー時
$("#mycolor").on("mouseover.color", function(event, color){
$('#title').attr("style", "background-color:" + color);
})
６、メソッド
(1) 色クリア
$("#mycolor").colorpicker("clear");
(2) グレーアウト（パレット表示できないようにする）
$('#mycolor').colorpicker("disable");
反対(パレット表示可能）の場合
$("#mycolor").colorpicker("enable");
(3) パレットの選択色設定・取得
var color = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");
(4) パレット表示（ボタンやinputから表示以外の方法）
$("#mycolor").colorpicker("showPalette");
(5) パレット非表示（ボタンやinputから表示以外の方法）
$("#mycolor").colorpicker("hidePalette");
７、カラーパレットテーマ（デザイン色）変更
jQuery UI widgetと同じテーマで変更できます
独自のテーマ作成もきます
http://jqueryui.com/themeroller/#!themeGallery=undefined
<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
の"ui-lightness"を変更します。
またはプログラム内で行う場合は、以下のような感じで行います。
var theme = "ui-darkness";
$('#jquiCSS').attr('href','http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/'+ theme +'/jquery-ui.css');
$('.css').removeClass('sel');
$(this).addClass('sel');
８、実装例
<div class="demoPanel" style="width:130px">
<input id="cpButton" value="#92cddc" />
</div>
<script type="text/javascript">
$('#cpButton').colorpicker({ showOn: 'button' });
$("#cpButton").colorpicker({
strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
});
$("#cpButton").colorpicker({
displayIndicator: false
});
$("#cpButton").colorpicker({
color: "#ffffff"
});
var theme = "ui-darkness";
$('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
$('.css').removeClass('sel');
$(this).addClass('sel');
</script>
９、実装例をTypeScriptで実装
JavaScriptファイル(test.js)を作成して、8で記載したコードを追加する
function SetColorPicker() {
$('#cpButton').colorpicker({ showOn: 'button' });
$("#cpButton").colorpicker({
strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
});
$("#cpButton").colorpicker({
displayIndicator: false
});
$("#cpButton").colorpicker({
color: "#ffffff"
});
var theme = "ui-darkness";
$('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
$('.css').removeClass('sel');
$(this).addClass('sel');
}
TypeScriptファイル(app.ts)で以下のコードを追加する 。
（declare宣言（アンビエント）で、JavaScriptで定義した関数を宣言する）
declare function SetColorPicker();
$(document.body).ready(function () {
SetColorPicker();
}
【参考URL】
http://www.codeproject.com/Articles/452401/ColorPicker-a-jQuery-UI-Widget
