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 相关文章推荐
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 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生成静态页面详解
2006/11/19 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
详解Python with/as使用说明
2018/12/13 Python
Python饼状图的绘制实例
2019/01/15 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python selenium操作cookie的实现
2020/03/18 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
英国高街电视:High Street TV
2018/05/22 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
美术教师岗位职责
2014/03/18 职场文书
经典禁毒标语
2014/06/16 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技