YUI中的模块化施用对话框

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

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

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

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

<div 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));}});}

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

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

欢迎指正。

查看更多 下一篇