论坛首页 Web前端技术论坛

YUI中的模块化使用对话框

浏览 1441 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-08-12  
最近在试着用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));
			}
		}
	);
}


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

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

欢迎指正。
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics