このサンプルでは色選択を行う為のカラーピッカーを作成します。
このサンプルの要件は以下の通りです。
- 選択できる色はWebセーフカラーの216色とする。
- 動作はクライアントサイド（JavaScript）とする。
- カラーピッカーはポップアップし、その動作をPopupControlExtenderを利用して実装する。
以上のように書きましたが、私はWebセーフカラーの216色だけを選択できるカラーピッカーが欲しかったのでこのサンプルを作成しました。
以下のアイコンを選択する事によりカラーピッカーが表示されます。
ここでWebセーフカラーについて記述しておきます。
通常のフルカラーはRGBの各色256諧調の組み合わせ（256×256×256=16,777,216色）ですが、WebセーフカラーはRGB各色を6階調（0,51,102,153,204,255）に制限し、この数値を組合わせて作成した216色を示します。
これはブラウザのもつカラーパレットで使用されている為、OSなどの環境の違いによる”色の置き換え”を防ぐことができます。
カラーピッカーの実装方法は以下の手順で行います。
- カラーピッカーを表示する為のトリガーとなる領域（今回はここにカラーピッカー用アイコンを表示）をPanelコントロールで定義する。
- カラーピッカーで選択された色を表示する領域をPanelコントロールで定義する。
- カラーピッカーを作成（表示）する領域を予めPanelコントロールで作成する。
- PopupControlExtenderを配置し、PopupControlIDに上記３で定義したPanelコントロールを指定する。
- JavaScriptで上記３で定義したPanelの領域にカラー要素を保持したテーブルを動的に作成する。（色選択時のイベントなどもここで定義しておきます。）
カラーピッカー用領域（アイコン用、選択色用、カラーピッカー用）の設定
<table>
<tr>
<td>
<!--カラーピッカーアイコン配置エリア（ここをクリックする事でカラーピッカーがPopUpされます）-->
<asp:Panel ID="pnlColorIconArea" runat="server"></asp:Panel>
</td>
<td>
<!--カラーピッカーで選択された色を表示するエリア-->
<asp:Panel ID="pnlSelectedColorArea" runat="server" Height="16px" Width="30px"></asp:Panel>
</td>
</tr>
</table>
<!--カラーピッカー表示領域-->
<asp:Panel ID="pnlColorPicker" runat="server" CssClass="colorPickerPanel"></asp:Panel>
<cc1:PopupControlExtender ID="PopupControlExtender1" runat="server"
BehaviorID ="colorPickerBehavior"
TargetControlID="pnlColorIconArea"
PopupControlID="pnlColorPicker"
Position="Bottom">
</cc1:PopupControlExtender>
カラーピッカーJavaScript（ColorPicker.js）
var ColorPicker = "";
$addHandler(window, 'load', function(){
ColorPicker = $create(CodeSample.ColorPicker,
{"popupBehaviorID":"colorPickerBehavior",
"parentIconAreaID":"ctl00_ContentPlaceHolder1_pnlColorIconArea",
"selectedAreaID":"ctl00_ContentPlaceHolder1_pnlSelectedColorArea",
"paretnAreaID":"ctl00_ContentPlaceHolder1_pnlColorPicker"}, null, null, null);
});
Type.registerNamespace("CodeSample");
CodeSample.ColorPicker = function(){
CodeSample.ColorPicker.initializeBase(this);
this._hexlist = null; //Webカラー用カラーパレット作成用データ
this._colorPickerTbl = null;//カラーピッカー
this._parentAreaElm = null; //カラーピッカーが属する親のエレメント
this._selectAreaElm = null; //カラーピッカーを表示する為のトリガーを定義する対象（アイコン配置対象）エレメント
this._selectedAreaElm=null; //選択された色を表示する対象エレメント
this._onSelectHandler=null;
this._onHoverHander =null;
this._wFontElm = null;
this._bFontElm = null;
this._selectedColor="";
this._popupBehavior=null;
//property
this.paretnAreaID=""; //カラーピッカーが属する親のエレメントID
this.selectedAreaID=""; //選択結果の色を表示するエリアのID
this.popupBehaviorID=""; //PopupBehaviorID
this.parentIconAreaID=""; //ColorPicerアイコン表示エリアのID
}
CodeSample.ColorPicker.prototype ={
initialize:function() {
CodeSample.ColorPicker.callBaseMethod(this,'initialize');
this._selectedColor="#000000";//default black
this._hexlist = new Array("FF","CC","99","66","33","00");
if(this.paretnAreaID!=""){
this._parentAreaElm = $get(this.paretnAreaID);
}
if(this.selectedAreaID!=""){
this._selectedAreaElm = $get(this.selectedAreaID);
}
//ハンドラーとイベントを定義
this._onSelectHandler=Function.createDelegate(this, this._onSelect);
this._onHoverHander =Function.createDelegate(this, this._onHover);
//カラーピッカーを作成
this._createColorPicker();
//親領域にアイコンを作成
this._createPickerIcon(this.pickerType);
this._popupBehavior = $find(this.popupBehaviorID);
},
_onSelect : function(e){
this._selectedColor = e.target.id;
if(null!=this._selectedAreaElm){
this._selectedAreaElm.style.backgroundColor=this._selectedColor;
}
this._getPopup().hidePopup();
},
getSelectedColor :function(){
return this._selectedColor;
},
setSelectedColor :function(color){
this._selectedColor = color;
if(null!=this._selectedAreaElm){
this._selectedAreaElm.style.backgroundColor=this._selectedColor;
}
},
_getPopup : function(){
if(null==this._popupBehavior){
this._popupBehavior = $find(this.popupBehaviorID);
}
return this._popupBehavior;
},
/**********マウスオーバー時処理****************
・選択色エリアの背景色を設定
・選択色エリアに色情報（16進数色文字）を設定
*/
_onHover : function(e){
var selectID = e.target.id;
if(null!=this._selectAreaElm){
this._selectAreaElm.style.backgroundColor=selectID;
if(null==this._wFontElm){
this._wFontElm = document.createElement("font");
this._wFontElm.setAttribute("color","#ffffff");
this._wFontElm.appendChild(document.createTextNode(selectID));
this._selectAreaElm.appendChild(this._wFontElm);
}else{
this._wFontElm.childNodes[0].data = selectID;
}
if(null==this._bFontElm){
this._bFontElm = document.createElement("font");
this._bFontElm.setAttribute("color","#000000");
this._bFontElm.appendChild(document.createTextNode(" "+selectID));
this._selectAreaElm.appendChild(this._bFontElm);
}else{
this._bFontElm.childNodes[0].data = " "+selectID;
}
}
},
_createColorPicker :function(){
if(null==this._colorPicker){
//選択色表示エリアを作成
this._selectAreaElm = document.createElement("div");
this._selectAreaElm.className = "colorPickerSelectArea";
//カラーピッカーを作成
var tmplist = new Array();
this._colorPickerTbl = document.createElement("table");
this._colorPickerTbl.className="colorPickerTbl";
var tblBody = document.createElement("tbody");
for(var i=0;i<6;i++){
var trelm1 = document.createElement("tr");
var trelm2 = document.createElement("tr");
for(var j=0;j<6;j++){
for(var k=0;k<6;k++){
var hexColor = "#"+this._hexlist[i]+this._hexlist[j]+this._hexlist[k];
var tdelm = document.createElement("td");
tdelm.setAttribute("width","10px");
tdelm.setAttribute("height","10px");
tdelm.style.backgroundColor=hexColor;
tdelm.id=hexColor;
$addHandler(tdelm, "click", this._onSelectHandler);
$addHandler(tdelm, "mousemove", this._onHoverHander);
if(k<3){
trelm1.appendChild(tdelm);
}else{
trelm2.appendChild(tdelm);
}
}
}
tblBody.appendChild(trelm1);
tmplist.push(trelm2);
}
for(i=0;i<tmplist.length;i++){
tblBody.appendChild(tmplist[i]);
}
this._colorPickerTbl.appendChild(tblBody);
if(null!=this._parentAreaElm){
this._parentAreaElm.appendChild(this._selectAreaElm);
this._parentAreaElm.appendChild(this._colorPickerTbl);
}
}
},
_createPickerIcon :function(){
if(this.parentIconAreaID!=""){
var elm = document.createElement("img");
elm.setAttribute("src","../../img/color_swatch.png");
elm.setAttribute("height","24");
elm.setAttribute("width","24");
elm.setAttribute("border","0");
elm.setAttribute("title","色の選択");
elm.className="colorPickerIcon";
this._pickerIconElm = elm;
var parentIconAreaElm = $get(this.parentIconAreaID);
parentIconAreaElm.appendChild(this._pickerIconElm);
parentIconAreaElm.style.width=24;
//↑アイコンを配置した親エリアのサイズをアイコン画像と同じサイズに設定
}
},
dispose: function() {
CodeSample.ColorPicker.callBaseMethod(this, 'dispose');
if(null!=this._colorPickerTbl){
var tdlist = this._colorPickerTbl.getElementsByTagName("td");
for(var i=0;i<tdlist.length;i++){
//イベントの削除
$removeHandler(tdlist[i],"click",this._onSelectHandler);
$removeHandler(tdlist[i],"mousemove",this._onHoverHander);
}
}
}
}
CodeSample.ColorPicker.registerClass('CodeSample.ColorPicker', Sys.Component);
if (typeof(Sys) !== 'undefined')
Sys.Application.notifyScriptLoaded();
このサンプルで使用したスタイルシートの定義は以下の通りです。
カラーピッカー用スタイルシート定義
/*ColorPicker*/
.colorPickerPanel
{
position:absolute;
border-style:solid;
border-width:1px;
border-color:Black;
background-color:#ffffff;
visibility:hidden;
/*070615追加*/
}
.colorPickerTbl
{
margin:10px,10px,10px,10px;
}
.colorPickerSelectArea
{
width:254px;
height:20px;
}
.colorPickerIcon
{
cursor:pointer;
}