Button Control: Color Picker Button
カラーピッカー（Color Picker；カラーサンプルから色をピックアップするためのモジュール）のExampleである。
一風変わったサンプルになっていて、橋の映った半透過pngの背景色をカラーピッカーで選ぶという例になっている。
初期画面は以下。背景は白（IE5.5-6では、半透過pngが扱えないので、FilterでDirectXのAlphaImageLoaderを使うように設定している）となっている。
この画面でボタンを押すと、以下のようなカラー・ピッカーが現れる。
ここで色を選ぶと、ボタンに選んだ色が表示されるので、それをクリックすると画面の背景食がその色となる。
以下にJavascriptを含むhtmlの全体をしめす。
戦略はこれまでの「Button Control: Simple Calendar Menu Button」や「Button Control: Calendar Menu Button with Date on Button Face」と同じで、Overlayオブジェクト（この例ではその子孫のMenuオブジェクトが使われている）をコンテナとしてインスタンス化して、そこにカラー・ピッカーのインスタンスを生成する。カラーピッカーのインスタンス生成は１回しか行われない。
このサンプルも、module patternで書き直しをおこなった。
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>Ajax_Sampling</TITLE> <style type="text/css"> body { margin:0; padding:0; } </style> <link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/colorpicker/assets/skins/sam/colorpicker.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="scripts/yui/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="scripts/yui/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="scripts/yui/slider/slider-min.js"></script> <script type="text/javascript" src="scripts/yui/element/element-beta-min.js"></script> <script type="text/javascript" src="scripts/yui/colorpicker/colorpicker-min.js"></script> <script type="text/javascript" src="scripts/yui/container/container_core-min.js"></script> <script type="text/javascript" src="scripts/yui/menu/menu-min.js"></script> <script type="text/javascript" src="scripts/yui/button/button-min.js"></script> <style type="text/css" id="defaultstyle"> #container { margin: 2px; padding: 3px; width: 500px; height: auto; border:1px dashed #999999; } /* Set the "zoom" property to "normal" since it is set to "1" by the ".example-container .bd" rule in yui.css and this causes a Menu instance's width to expand to 100% of the browser viewport. */ div.yuimenu .bd { zoom: normal; } #button-container { padding: .5em; } #color-picker-button { vertical-align: baseline; } #color-picker-button button { outline: none; /* Safari */ line-height: 1.5; } /* Style the Button instance's label as a square whose background color represents the current value of the ColorPicker instance. */ #current-color { display: block; display: inline-block; *display: block; /* For IE */ margin-top: .5em; *margin: .25em 0; /* For IE */ width: 1em; height: 1em; overflow: hidden; text-indent: 1em; background-color: #fff; white-space: nowrap; border: solid 1px #000; } /* Hide default colors for the ColorPicker instance. */ #color-picker-container .yui-picker-controls, #color-picker-container .yui-picker-swatch, #color-picker-container .yui-picker-websafe-swatch { display: none; } /* Size the body element of the Menu instance to match the dimensions of the ColorPicker instance. */ #color-picker-menu .bd { width: 220px; height: 190px; } #photo { background: #fff url(http://developer.yahoo.com/yui/examples/button/assets/ggbridge.png) top left no-repeat; /* インターネットエクスプローラ6までは、PNGのアルファチャンネルによる透過（半透明）がサポートされていない。 DirectXのAlphaImageLoaderをfilterに設定して半透明にする。（IE5.5以上）。 参考；http://amenti.usamimi.info/ie6png.html */ _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://developer.yahoo.com/yui/examples/button/assets/ggbridge.png', sizingMethod='image');; border: solid 1px #000; width: 400px; height: 300px; _width: 398px; /* For IE 6 */ _height: 298px; /* For IE 6 */ } #button-container { border-top: solid 1px #000; padding: .5em .25em; margin-top: .5em; } </style> <script type="text/javascript"> // //モジュールパターンで実装する。 // YAHOO.namespace("EGP"); YAHOO.EGP.ColorButton = function() { var Event = YAHOO.util.Event; var Dom = YAHOO.util.Dom; var oColorPickerMenu; var oButton; // Create a Calendar instance and render it into the body // element of the Overlay. // OVerlayインスタンスのボディー部にid=buttoncalendarでカレンダーインスタンス // を作る。 // （※）colorpickerインスタンスは1回しか作成されない。 var onButtonOption= function() { // ColorPickerMenuのBody分にColorPickerインスタンスを生成する。 var oColorPicker = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, { showcontrols: false, images: { // ○印 PICKER_THUMB: "scripts/yui/build/colorpicker/assets/picker_thumb.png", // 上下させるスライダーイメージ HUE_THUMB: "scripts/yui/build/colorpicker/assets/hue_thumb.png" } }); // ColorPickerのrbgChangeイベントをlistenして、 oColorPicker.on("rgbChange", function (p_oEvent) { // カラーピッカーからhex値（rbg値）を取得する。 var sColor = "#" + this.get("hex"); // ボタンの値にrbg値を入れる。（あとで、ボタンクリック時に使う） oButton.set("value", sColor); // current-color（ボタンの中の四角）の色をセット YAHOO.util.Dom.setStyle("current-color", "backgroundColor", sColor); YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor; }); // この後のボタンクリックは、ボタンインスタンスを再表示してMenu処理をするだけ。 // （これは、oButton生成時に設定される） this.unsubscribe("option", onButtonOption); }; return{ init: function() { // ColorPickerの箱として、Menuインスタンスを生成する。 oColorPickerMenu = new YAHOO.widget.Menu("color-picker-menu"); // Button type = splitでボタンインスタンスを生成 oButton = new YAHOO.widget.Button({ type: "split", id: "color-picker-button", label: "<em id=\"current-color\">Current color is #FFFFFF.</em>", menu: oColorPickerMenu, container: "button-container" }); oButton.on("appendTo", function () { // ボタンのappendToイベントに対して、Calendarインスタンスを入れるための // 空のbodyをセットする。 // このbodyのidをcalendarcontainerとする。 oColorPickerMenu.setBody(" "); oColorPickerMenu.body.id = "color-picker-container"; // ボタンのコンテナ（button-container）にoColorPickerMenu // Menu領域をrenderする。 oColorPickerMenu.render(this.get("container")); }); // 初回の処理 // optionイベントをListenし、カラーピッカーの生成と表示など行う。 oButton.on("option", onButtonOption); // ボタンがクリックされたら、ボタンの値（RGB値）を取得し、 // 写真のバックグラウンドカラーにセットする。 oButton.on("click", function () { YAHOO.util.Dom.setStyle("photo", "backgroundColor", this.get("value")); }); } }; }(); //DOMが完全にloadされたら、サンプルを初期化する。 YAHOO.util.Event.onDOMReady( //DomReadyイベントで発火するハンドラ YAHOO.EGP.ColorButton.init, //ハンドラに渡すオブジェクト（関数） YAHOO.EGP.ColorButton, //ハンドラは、上記のオブジェクトのスコープをもつ。 true ); </script> </HEAD> <BODY class="yui-skin-sam"> <div id="container"> <p> ColorPicker Buttonの作り方のサンプルです。<br/> ColorPickerで色を選んで、ボタンを押してください。写真の背景色が変わります。 </p> <div id="photo"></div> <div id="button-container"> <label for="color-picker-button">Background Color: </label> </div> </div> </BODY> </HTML>
