簡単なフローティングダイアログ

簡単なフローティングダイアログクラスを試作してみました。
Html内の要素をクリックすると指定したurlで得られる内容を表示するようなかたちのものです。
prototype1.6に依存した実装になっています。

var FloatingDialog = Class.create({
	initialize: function(doc) {
		this.document = doc;
		this.idContainer = "dlg-container";
		this.idContents = "dlg-contents";
		this.idHeader = "dlg-header";
		this.idFooter = "dlg-footer";
		this.idCloseButton = "close-button";
		var args = arguments.length > 0 ? $A(arguments) : new Array();
		if(args.size() > 1 )  {
			ids = ids = args[1];
			if(ids.get('container'))
				this.idContainer = ids.get('container');
			if( ids.get('contents'))
				this.idContents = ids.get('contents');
			if(ids.get('header'))
				this.idHeader = ids.get('header');
			if(ids.get('footer'))
				this.idFooter = ids.get('footer');
			if(ids.get('closeButton'))
				this.idCloseButton = ids.get('closeButton');
		}
		doc.body.appendChild(this._build(doc));
	},
	
	_build: function(doc) {
		this.container = doc.createElement("div");
		this.container.id = this.idContainer;
		this.contents = doc.createElement("div");
		this.contents.id = this.idContents;
		this.header = doc.createElement("div");
		this.header.id = this.idHeader;
		this.footer = doc.createElement("div");
		this.footer.id = this.idFooter;
		this.container.appendChild(this.header);
		this.container.appendChild(this.contents);
		this.container.appendChild(this.footer);
		this.closeButton = doc.createElement("div");
		this.closeButton.id = this.idCloseButton;
		this._attachCloseEvent(this.closeButton);
		this.header.appendChild(this.closeButton);
		this.container.style.visibility = "hidden";
		return this.container;
	},
	
	_attachCloseEvent: function(elem) {
		elem.observe("click", function(e) {
			this.container.style.visibility = "hidden";
		}.bindAsEventListener(this)
		);
	},

	appendTarget: function(elem, url) {
		elem.observe("click", function(e) {
  		        this.contents.innerHTML = "";
			this.container.style.position = "absolute";
			this.container.style.left = e.pointer().x + "px";
			this.container.style.top = e.pointer().y + "px";
			this.container.style.visibility = "visible";
			var params = {};
			params['id'] = elem.id;
			new Ajax.Request(url, { parameters: params, 
					onComplete: this._onComplete.bindAsEventListener(this) });
		}.bindAsEventListener(this) );
	},

	_onComplete: function(response) {
		this.contents.innerHTML = response.responseText;
	},

});

使用例

ドキュメントとダイアログ内の各要素につけるid属性(htmlタグのid属性）名を指定してオブジェトを生成。そしてappendTargetというメソッドで起動元のHtml要素とダイアログで表示する内容を取得する先のurlの組を追加していきます。

    var ids = $H({
		container: 'dlg-container',
		contents: 'dlg-contents',
		header: 'dlg-header',
		footer: 'dlg-footer',
		closeButton: 'close-button'
	});
	var dialog = new FloatingDialog(document, ids);
	dialog.appendTarget($('row-1'), './data/test1.xml');
	dialog.appendTarget($('row-2'), './data/test2.xml');
	dialog.appendTarget($('row-3'), './data/test3.xml');

1. 1. prototypeのハッシュのかたちでフローティングダイアログ内の各div要素(container,contents, header,footer)と閉じるボタンのid属性名を指定します。
   2. appendTargetメソッドでクリックのよりダイアログを表示する元になるHtml要素と内容を取得先する先のurlを指定しています。そのurlの対してAjaxでのリクエストで得られた結果(通常Htmlのコンテンツ)をフローティングダイアログ内の表示することになります。

css例

各div要素(container,contents, header,footer)と閉じるボタンのidに対応するスタイルを定義しています。

div#dlg-container {
  width:300px;
  position:absolute;
  left:10px;
  top:0px;
  border-style:solid;
  border-width:thin;
}

div#close-button {
  background-image: url(../images/close.gif);
  float: right;
  width:20px;
  height:20px;
}

div#dlg-header {
  background-color: #FFDDCC;
  text-align:right;
  height:20px;
}

div#dlg-contents {
  height:300px;
  background-color: #FFFFFF;
}

div#dlg-footer {
  background-color: #FFDDCC;
  height:20px;
}