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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
微信小程序调用后台service教程详解
Nov 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实现对象克隆的方法
2015/06/20 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
jquery选择器使用详解
2014/04/08 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JavaScript运算符小结
2015/06/03 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
详解Node.js项目APM监控之New Relic
2017/05/12 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python科学计算之NumPy入门教程
2017/01/15 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
strstr()的简单实现
2013/09/26 面试题
后勤岗位职责
2013/11/26 职场文书
安全演讲稿大全
2014/05/09 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
办理房产过户的委托书
2014/09/14 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
行政处罚告知书
2015/07/01 职场文书
大学开学感言
2015/08/01 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
阿里云日志过滤器配置日志服务
2022/04/09 Servers