弹窗（提示、确认）、弹页（悬浮编辑页，新页面）、悬框（指针）

最新推荐文章于 2021-12-21 22:44:59 发布

原创最新推荐文章于 2021-12-21 22:44:59 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

java开发专栏收录该内容

24 篇文章

订阅专栏

本文介绍了前端开发中常见的几种交互设计：提示框使用了art.dialog.tips及$.messager.alert；确认框的实现，包括查看和修改功能；编辑页面弹出方式如top.showWin；新页面的打开方式，如利用<base target="_blank">和window.open；最后讨论了指针悬浮框的创建和控制，涉及onMouseOver和onMouseOut事件及display属性的使用。

一：提示框

1.art.dialog.tips（" ... "）

art.dialog.close()

http://blog.youkuaiyun.com/hougelou/article/details/8133648

2.与上面连用：限时自动提示：success函数中

setTimeout(function(){ alert("Hello"); }, 3000);

http://www.runoob.com/jsref/met-win-settimeout.html

3.$("#id").show()，$("#id").hide()过程等待框

需要有一个<div>,可用于Ajax前和success后

4.$.messager.alert（'title',date.info）显示Ajax结果弹窗

二：确认框

art.dialog.confirm("确认删除？"，function(){

var url=parent.formateUrl("controller/...");

$.ajax({

url,type,dateType,

success:function(data){

if(...){

art.dialog.tips("删除成功");

window.setTimeout(function(){

art.dialog.close();

$("#...").datagrid("relod");

},1500);

}

else{art.dialog.tips("无法删除")}

}，

error:function(){art.dialog.tips("error");}

});

二：编辑页面弹出：查看和修改

1.top.showWin(url,options);

此页面只有取消键，用于查看键点击。

var url=parent.formateUrl("controller/...");

var options={

	w:843,

	h:600,

	title:"title",

	fn:'submitForm',

	id:"id"

}

top.showWin(url,options);

2.art.dialog.open(url，{})