浏览 1442 次
锁定老帖子 主题:YUI中的模块化使用对话框
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-08-12
目的是这样的,假设在我们的应用程序中,有多个页面要使用一个一样的对话框,那么 每个页面引入一样的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)); } } ); } 其实可以将标题、按钮,大小等配置信息传入,这样每个页面可以显示稍微不同的对话框。 更进一步,利用这种机制,可以用一个对话框做到数据新增、修改、显示等三个常用功能,下 一步实现了这种方式我再把代码贴出来。 欢迎指正。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |