显示以及加载数据
1.
Content 作为页面代码隐藏到页面中,
Dialog显示后,将数据(
Json对象)赋值到
Dialog
1)
优点:实现最为简单
2)
缺点:加载页面时,页面代码多,如果未发生
Dialog操作,这部分
Dom不会被用到,如果弹出的
Dialog种类过多,那么页面的隐藏代码会大大增加页面大小;
2.
Contetn作为单独的页面(代码块,类似于
MVC中的
partialView)
, 在
Dialog第一次弹出时,请求页面显示在
Dialog中,并将数(
Json对象)据赋值到
Dialog
1)
优点:可以减少页面大小,仅在需要弹出
Dialog时加载对应的内容。
2)
缺点:首次打开一个
Dialog时,需要加载页面,有延迟效果,降低用户体验。
3.
Contetn作为单独的页面(代码块,类似于
MVC中的
partialView),每一次弹出
Dialog时请求页面,数据连同页面一起渲染,然后显示在
Dialog中
1)
优点:几乎所有的后台框架都有数据渲染机制,可以方便的渲染编辑的内容,降低前端代码的耦合。
2)
缺点:每次弹出
Dialog需要重新加载对应的内容和数据。
提交
1.
异步提交,将数据序列化,使用
Ajax(或者
iframe)方式提交到后台,然后返回
json表示成功或者失败。根据结果改变
List记录
1)
优点:使用
Ajax进行数据传输,不刷新页面
,可以保留页面状态。
2)
缺点
: 需要跟后台进行耦合,根据后台结果显示成功或错误信息。需要协调前后台的验证和错误显示。
2.
Form表单提交,直接将表单提交到后台,刷新整个页面
1)
优点:直接刷新页面,逻辑简单。
2)
缺点
: 页面状态丢失,如果在搜索页面,需要回写各项输入;错误回显复杂,因为
Dialog是前台
js弹出,如果在
Dialog上显示数据,那么需要弹出
Dialog
隐藏
1.
Dialog 关闭后,
Dialog仅仅是隐藏
1)
优点:实现简单,显示
Dialog的逻辑也会变简单。
2)
缺点:多个
Dialog状态下,页面以及内存中有多个
Dialog对象,依赖于加载数据和内容方式,如果每次打开
Dialog都加载新的内容(
DOM),那么也会增加复杂度。
2.
Dialog 关闭后,释放
Dialog对象
1)
优点:每次打开新的
Dialog,都是独立的操作,逻辑上简单
2)
缺点:增加了复杂度,每次关闭
Dialog时,需要将内容(
DOM)缓存起来,清除状态,在下一次显示
Dialog时重新加载,如果每次打开
Dialog都加载新的内容(
DOM),可直接释放
Dialog中的内容(DOM)
实践
1.
加载的第一种,将
Dialog内容(
DOM)事先隐藏在页面中,编辑完数据后异步提交数据,这种方式我们在项目中使用的最多,只要处理好显示数据,错误回传显示,基本能满足日常应用。
2.
加载的第三种方式,在一些框架的支持下会非常的自然,在
.net的
MVC框架中,
View和
Model的集成,验证规则的统一性处理,可以是开发成本降到最低。
3.
数据的异步提交还是
Form提交,需要看具体情况,如果是搜索页面,需要回传大量页面状态则最好使用异步提交方式,否则只是刷新页面,表单提交方式更为自然。
总结
1.
如果你是控件的编写者,最好
Dialog全部实现上述功能,能满足更多的场景
2.
如果你是控件的使用者,根据具体情况,配置
Dialog,得到自己的效果。
3.
错误处理和显示将是你在这个过程中遇到最麻烦的事情。
分享到:
相关推荐
使用纯javascript实现dialog
原生js Dialog对话框插件制作19种对话框弹出层拖动
非常给力的JavaScript Dialog,功能、样式多多
1. Dialog的生命周期: 2. Dialog的结构:标题、内容(DOM)、数据、提交栏、关闭按钮 显示以及加载数据 1. Content 作为页面代码隐藏到页面中,Dialog显示后,将数据(Json对象)赋值到Dialog 1) 优点:实现...
asp.net mvc core 使用js dialog对话框 asp.net mvc core 使用js dialog对话框
js Dialog 最新版 绝对强大 js Dialog 兼容主流浏览器ff ie6/ie7/ie8 /opera ..
dialog.js
自己写了js实现dialog,弹出框后1秒钟自己消失, 源码放上来供大家参考
一个非常有用的js弹出对话框,内容可以自行修改. 注释和例子完整。
比较有参考价值
Collect some very practical and beautiful pop-up layer effect (compatible with the mainstream browsers) can be some of the the window contents or functions
bootstrap的dialog.js、bootstrap的dialog.js、bootstrap的dialog.js
dialog.js 前端JavaScript,简易的弹窗插件 用于弹出自定义的弹窗,内部对于常见的滚动穿透,输入法遮挡输入框都有相应的处理。 精简小巧,压缩后仅有5k.
各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果...
js dialog 框架包 weebox
版本:MyJS_DIVDialogV1.10.js(支持换肤和自定义内容) 支持浏览器:IE所有系列 ******************************************* 参数介绍: innerDivId:依附层ID divBlotId:遮罩层ID divMessageId:消息层ID ...
F7Dialog.min.js ①设置DIV ;"> ;">X 加载中。。。</h2> ②开:Dialog({id:'showBlockDiv', lock:true}); ③关:Dialog.close("showBlockDiv");
jquery.dialogBox.js动画对话框插件是一款适合初学者学习的简单网页对话框代码,提供9种不同类型的对话框效果。
Dialog对话框,包括选择项Dialog,进度条Dialog,下载进度条Dialog