公司页面的AJAX用户体验设计
在我们平常使用的Form 之外，添加了一个iframe。<iframe id="yhnh" name="yhnh" src="about:blank" width="0" height="0" frameborder="0" scrolling="no"></iframe>
设置Form的target属性
<html:form action="/yhnhShip.do?method=doAdd" target="yhnh">
这样，提交的时候，页面不会跳转。服务端工作由这个iframe来完成。
提交时将本页面用一个层锁定。并且显示提示信息。
<!-- 锁定层后面所有控件--><div id="ly" style="position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;z-index: 2; left: 0px; display: none;"></div>
!--浮层框架开始 --><div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2); background-color: #fff; display: none;" > <table width="300" border="0" cellpadding="2" cellspacing="2" style="border:0 solid #e7e3e7; border-collapse: collapse"> <tr> <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; font-weight: bold; font-size: 14px;" height="25px" valign="middle">请稍候...</td> </tr> <tr valign="bottom"> <td height="27" align="center">&nbsp;</td> </tr> <tr valign="bottom"> <td align="center" >正在进行服务端处理 ...</td> </tr> <tr valign="bottom"> <td align="center" ><img src="../images/working.gif" /></td> </tr> <tr valign="bottom"> <td height="27" align="center">&nbsp;</td> </tr> </table></div><!-- 浮层框架结束-->
锁定页面JS的方法：
//锁定页面控件，并弹出浮动层function locking_control(){ $('ly').style.display="block"; $('ly').style.width = document.body.clientWidth; $('ly').style.height = document.body.clientHeight; $('Layer2').style.display = 'block';}// 关闭浮动层function close_div () { $('ly').style.display='none';$('Layer2').style.display='none';}
体验效果如下：
http://dl.iteye.com/upload/attachment/222167/3be6a6ff-5a76-3a6d-8760-404256c87193.jpg
返回的页面也在iframe之中。
在这页面加载处理错误信息，返回成功信息等操作。
function init() { var error = $("error").value.strip(); if (error.length > 0) { alert(error); if (window.parent) { window.parent.saveFail(policy); } } else { if (window.parent) { window.parent.saveSuccess(policy); }}}
成功返回后，禁止原页面的表单，成为预览方式。
/* * 禁用表单 */function disableForm() {var form = $('yhnhShipForm');form.disable();form.disabled = true; }
页:
[1]