2010年12月17日


google.load + YUI Loader で、カラーピッカーを設置

最初このブログに直接埋め込んだら、どうもいろんな環境が混ざりすぎて
まともに動いたのは Google Chrome だけでした。仕方ないので IFRAME で
埋め込んでいますが、showModalDialog を使うといいと思います。

基本的には、YUI 2 のサンプルのままなのですが、そのままで使えたら苦労しない
のが YUI でして。。。。

まず、結果のコードの取得方法として3つ用意しましたが、そのうちの一つは
サンプル通りの get メソッドで、あとはこちらで追加実装です。そもそも、
テキストフィールドが変更可能なままなので、readonly にする為にプロパティ
から内部 ID を取得して直接アクセスしています。

また、初期処理のイベント(available)は継承元のイベントを使用しています。

chgValue はこちらで追加した新しいプロパティで、変更された値を picker
から直接アクセスできるようにしました。

後、どういうわけかポインタ用の画像は自分で用意する必要があるみたいですが、
サンプルなので、Yahoo のをそのまま使っています。実際に使う時はダウンロード
してどこかに保存して使います。また、IE ではグラデーションが「標準モード」で
ないと動かないので注意して下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body style='margin:0'>

<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
	require: ['colorpicker','fonts'],
	loadOptional: true,
	onSuccess: function() {
		var Event = YAHOO.util.Event;
		Event.onDOMReady(function() {
			picker = new YAHOO.widget.ColorPicker("color_picker", {
				showhsvcontrols: true,
				showhexcontrols: true,
					images: {
						PICKER_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/picker_thumb.png",
						HUE_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/hue_thumb.png"
					}
				});
	
				picker.on("rgbChange", function(o){
						picker.chgValue = o; 
					}
				);
				picker.on("available", function(o){
						// 初期編集不可
						document.getElementById(picker.ID.HEX).setAttribute("readonly","true") 
						document.getElementById(picker.ID.R).setAttribute("readonly","true") 
						document.getElementById(picker.ID.G).setAttribute("readonly","true") 
						document.getElementById(picker.ID.B).setAttribute("readonly","true") 
						document.getElementById(picker.ID.H).setAttribute("readonly","true") 
						document.getElementById(picker.ID.S).setAttribute("readonly","true") 
						document.getElementById(picker.ID.V).setAttribute("readonly","true") 
						picker.chgValue = {};
						picker.chgValue.newValue = [255, 255, 255];
						picker.chgValue.prevValue= [255, 255, 255];
					}
				);
	
				Event.on("reset", "click", function(e) {
					picker.setValue([255, 255, 255], false);
				});
	
				Event.on("gethex1", "click", function(e) {
					alert(picker.get("hex")); 
				});
				Event.on("gethex2", "click", function(e) {
					alert(document.getElementById(picker.ID.HEX).value); 
				});
				Event.on("gethex3", "click", function(e) {
					alert(picker.chgValue.newValue + " : " + picker.chgValue.prevValue); 
				});
		});
	}
}).insert();
</script>

<div class="yui-skin-sam" style='padding:10px;background-color: #eeeeee;width: 420px; height:220px;'>
<div id="color_picker" style='position: relative;'></div>
</div>

<input type="button" id="reset" value="初期値">
<input type="button" id="gethex1" value="RGB表示(1)">
<input type="button" id="gethex2" value="RGB表示(2)">
<input type="button" id="gethex3" value="RGB表示(3)">

</body>
</html>



posted by at 2010-12-17 22:28 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Loading
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。