JS中artdialog弹出框控件之提交表单思路详解
2016-04-18 09:54
716 查看
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口。
前言:
自适应内容
artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐――这一切全是XHTML+CSS原生实现。
完善的接口
它的接口完善,可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。
细致的体验
如果不是在输入状态,它支持Esc快捷键关闭;可指定在元素附近弹出,让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;超大响应区域特别为ipad等触屏设备优化;预先缓存皮肤图片更快响应……
跨平台兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。
步入正题:
artdialog 不错的弹出框控件
接触artdialog已经有一段时间了,觉得其用起来还不错,比较轻量级,javascript的插件我比较喜欢轻量级的,加载速度快。
其功能也很不错,功能很齐全,相对于其它弹出插件,这个插件不仅还在维护,而且bug也少,用起来也挺方便,是国内比较出众的插件之一。
调用方法如下:
//说明下面是一段通过artdialog弹出form表单,并通过ajaxform来提交的js(表单可以采用jquery validate验证控件来验证表单) $(document).ready(function() { var options = { target: '#output2', success: showResponse // post-submit callback }; $('#myForm').ajaxForm(options); var alt =null; $("#addHname").click(function(){ alt=art.dialog({ title:'新增花名', content: document.getElementById('g_cn'), width:750, button: [ { name: '保存', focus: true, callback: function () { $('#myForm').submit(); return false; } }, { name: '关闭', callback: function () { } } ] }); }); function showResponse(data){ if(alt !=null){ alt.close(); } if(data=='success'){ artDialog.alert('保存成功'); }else{ art.dialog.close(); artDialog.alert('保存失败'); } } });
以上所述是小编给大家介绍的JS中artdialog弹出框控件之提交表单思路详解,希望对大家有所帮助!
您可能感兴趣的文章:
- 分享2个jQuery插件--jquery.fileupload与artdialog
- artdialog的图片/标题以及关闭按钮不显示的解决方法
- 给artDialog 5.02 增加ajax get功能详细介绍
- artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
- artDialog双击会关闭对话框的修改过程分享
- jQuery validate+artdialog+jquery form实现弹出表单思路详解
- artDialog+plupload实现多文件上传
- plupload+artdialog实现多平台上传文件
- jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法
- Jquery弹出窗口插件 LeanModal的使用方法
- 使用jQuery插件创建常规模态窗口登陆效果
- jQuery插件artDialog.js使用与关闭方法示例
相关文章推荐
- 在线用表单建立文件夹
- Jquery 表单取值赋值的一些基本操作
- javascript 表单的友好用户体现
- js 提交和设置表单的值
- PHP+JS实现大规模数据提交的方法
- 攻克CakePHP系列二 表单数据显示
- JavaScript获取页面中表单(form)数量的方法
- AJAX提交表单数据实例分析
- 网页中表单按回车就自动提交的问题的解决方案
- 分享纯手写漂亮的表单验证
- 超实用的JavaScript表单代码段
- js实现不提交表单获取单选按钮值的方法
- js实现文件上传表单域美化特效
- JavaScript实现重置表单(reset)的方法
- javascript实现自动填写表单实例简析
- JavaScript实现同一页面内两个表单互相传值的方法
- JS中表单的使用小结
- 封装好的一个万能检测表单的方法
- Bootstrap每天必学之表单
- Django表单form ajax简单应用