« チェックボックス | トップページ | コンボボックス »

2007年7月15日 (日)

カラーパレット

カラーパレットを表示して、色をユーザに選択させることができる。カラーパレットを用いるときはdojo.widget.Checkboxをrequireする。

dojo.require("dojo.widget.ColorPalette");

カラーパレットを表示するところで、dojoTypeをColorPaletteとして指定したdiv要素を記述する。

<div dojoType="ColorPalette" id="cp"></div>

デフォルトでは、7x10のカラーパレットだが、属性としてpalette="3x4"を指定することで、3x4のカラーパレットを作ることができる。

<div dojoType="ColorPalette" id="cp" palette="3x4"></div>

ユーザが選択した色の情報を取得するためには、onColorSelectイベントを関数に割り当てる。onColorSelectイベントを割り当てられた関数では、引数として色の情報をRGB指定の文字列('#3366ff'など)として受け取る。

function hello(color){
  alert(color);
}

function init(){
  dojo.event.connect(dojo.widget.byId('sample'), 'onColorSelect', 'hello');
}
dojo.addOnLoad(init);

動的にカラーパレットを作るには以下のように記述する。

dojo.widget.createWidget("dojo:ColorPalette",{palette:"7x10"}, dojo.byId("showPalette"));

以下に、ボタンを押したら、カラーパレットを表示し、色を選択したらカラーパレットを消す例を示す。

<script language="JavaScript" type="text/javascript">
dojo.require("dojo.widget.ColorPalette");

var pt;
function showPalette(){
  pt = dojo.widget.createWidget("dojo:ColorPalette",{palette:"7x10"}, dojo.byId("showPalette"));
  dojo.event.connect(pt, 'onColorSelect', 'selectPalette');
}

function selectPalette(color){
  alert(color);
  pt.hide();
}
</script>

<button onclick="showPalette();">色選択</button>
<p><div id="showPalette"></div></p>

« チェックボックス | トップページ | コンボボックス »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7154835

この記事へのトラックバック一覧です: カラーパレット:

« チェックボックス | トップページ | コンボボックス »