YUI中的模块化使用对话框

最近在试着用YUI 2.8.1，想到一个将对话框模块化的方法，拿出来分享一下。

目的是这样的，假设在我们的应用程序中，有多个页面要使用一个一样的对话框，那么
每个页面引入一样的html和js是很不好的实现方式，这时我们可以将对话框的html存储
为一个单独的文本文件，在页面中动态地加载这段html到适当的位置，然后再展现。进一
步可以将这段js代码抽出来做一个通用的函数，这样要使用该对话框的页面只要调用这个
函数就可以了。

一下是我具体实现的代码，其中显示对话框的js已经做成一个单独的函数了，但是暂时是
放在页面里的。

对话框的html代码如下，文件名是userInfo.dlg:

<div class="hd">Title</div>
<div class="bd">
    <form name="dlgUserInfoForm">
    	<table>
    		<tr>
    			<td width="40%"><label for="lginID">登录ID:</label></td>
    			<td><input type="text" name="lginID" /></td>
    		</tr>
    		<tr>
    			<td><label for="name">姓名:</label></td>
    			<td><input type="text" name="name" /></td>
    		</tr>
    		<tr>
    			<td><label for="password">密码:</label></td>
    			<td><input type="password" name="password" /></td>
    		</tr>
    		<tr>
    			<td><label for="confirmPassword">确认密码:</label></td>
    			<td><input type="text" name="confirmPassword" /></td>
    		</tr>
    		<tr>
    			<td><label for="activity">激活状态:</label></td>
    			<td><input type="text" name="activity" /></td>
    		</tr>
    		<tr>
    			<td><label for="seq">序号:</label></td>
    			<td><input type="text" name="seq" /></td>
    		</tr>
    	</table>
    </form>
</div>

页面中有个新增用户的按钮，按下时调用showAddUserDlg()：

<button onclick="showAddUserDlg()">新增用户</button>

showAddUserDlg定义如下，就是加载相应的YUI的库然后调用loadUserInfoDlg()：

function showAddUserDlg() {
	new YAHOO.util.YUILoader({
		require: ['container', 'dragdrop', 'button'],
		base: '../../js/yui_2.8.1/',
		filter: 'RAW',
		onSuccess: loadUserInfoDlg,
		onFailure: function(o) {
			alert("YUI模块加载错误: " + YAHOO.lang.dump(o));
		}
	}).insert();
}

loadUserInfoDlg定义如下：

function loadUserInfoDlg() {
	YAHOO.util.Connect.asyncRequest(
		"GET",
		"userInfo.dlg",
		{
			success: function(o) {
				YAHOO.util.Dom.get("dlgUserInfo").innerHTML = o.responseText;

				var handleCancel = function() {
				};

				var handleSubmit = function() {
				};

				var btns = [
					{ text: "增加", handler: handleSubmit, isDefault: true },
					{ text: "放弃", handler: handleCancel }
				];

				var cfg = {
					fixedcenter : true,
					constraintoviewport : true,
					visible : false, 
					width : "400px",
					buttons : btns
				}

				var dlg = new YAHOO.widget.Dialog('dlgUserInfo', cfg);
				dlg.setHeader("增加用户");

				dlg.render();
				dlg.show();
			},
			failure: function(o) {
				alert('用户信息模块加载失败' +  + YAHOO.lang.dump(o));
			}
		}
	);
}

其实可以将标题、按钮，大小等配置信息传入，这样每个页面可以显示稍微不同的对话框。

更进一步，利用这种机制，可以用一个对话框做到数据新增、修改、显示等三个常用功能，下
一步实现了这种方式我再把代码贴出来。

欢迎指正。