JS中artdialog弹出框控件之提交表单思路详解


Posted in Javascript onApril 18, 2016

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弹出框控件之提交表单思路详解,希望对大家有所帮助!

Javascript 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 #Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 #Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 #Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 #Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 #Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 #Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 #Javascript
You might like
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
PHP webshell检查工具 python实现代码
2009/09/15 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决
2019/04/29 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python调用C/C++的方法解析
2020/08/05 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
保留意见审计报告
2015/06/05 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
教你怎么用python selenium实现自动化测试
2021/05/27 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server