特徴:
  • 約8.5kb
  • カスタマイズ可能
  • 完全フリー
  • オープンソース(MITライセンス)
Google Codeプロジェクト
ダウンロード
使用例:

クリックすると出てきます。
色を変えるとテキストフィールドにも反映されます。
縁をドラッグアンドドロップすることで移動可能です。
// <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だと、クリック元のフォーカスが失われます。


© 2009-2011 Yoshiki Okawa All rights reserved. Powered by Google App Engine