特徴:
- 約8.5kb
- カスタマイズ可能
- 完全フリー
- オープンソース(MITライセンス)
使用例:
クリックすると出てきます。
色を変えるとテキストフィールドにも反映されます。
縁をドラッグアンドドロップすることで移動可能です。
クリックすると出てきます。
色を変えるとテキストフィールドにも反映されます。
縁をドラッグアンドドロップすることで移動可能です。
// <header>
<script type="text/javascript" src="/js/coloro.js"></script>
<script type="text/javascript">
this.coloro = new Coloro();
this.coloro.config({text:"Aあア永",btn:["決定","中止"],imagePath:"/images/coloro.png",isHexEditable:1});
this.coloro.onColorChange = function(c) {
$("coloro_eg1").value = c;
$("coloro_eg1").style.backgroundColor = c;
};
</script>
// <body>
<input id="coloro_eg1" type="text" onclick="coloro.rgb(this.value.toString());coloro.show(event);" style="background-color: #3098DD;width:100px" value="#3098DD"></input>
変更可能なプロパティやファンクションは以下の通りです。
- onColorChange(c): 色が変更されたときに呼ばれます。cは色の文字列です。(例:#FF0000)
- onComplete(c): 色が決定されたときに呼ばれます。
- text: プレビュー用の文字
- bun: 決定と中止ボタンの文字
- imagePath: coloro.pngへの相対パス
- isHexEditable: hexテキストフィールドをユーザーが変更できるかどうか。これがTrueだと、クリック元のフォーカスが失われます。