摇头效果

类似与wordpress登录失败后登录框可爱的左右晃动效果

// 2011-07-17 更新
artDialog.fn.shake = function (){
var style = this.DOM.wrap[0].style,
p = [4, 8, 4, 0, -4, -8, -4, 0],
fx = function () {
style.marginLeft = p.shift() + 'px';
if (p.length <= 0) {
style.marginLeft = 0;
clearInterval(timerId);
};
};
p = p.concat(p.concat(p));
timerId = setInterval(fx, 13);
return this;
};

调用示例:

var dialog = art.dialog({
content: '<p>"己所不欲"下一句是?</p>'
+ '<input id="demo-labs-input" style="width:15em; padding:4px" />',
fixed: true,
id: 'Fm7',
icon: 'question',
okVal: '回答',
ok: function () {
var input = document.getElementById('demo-labs-input'); if (input.value !== '\u52ff\u65bd\u4e8e\u4eba') {
this.shake && this.shake();// 调用抖动接口
input.select();
input.focus();
return false;
} else {
art.dialog({
content: '恭喜你,回答正确!',
icon: 'succeed',
fixed: true,
lock: true,
time: 1.5
});
};
},
cancel: true
}); dialog.shake && dialog.shake();// 调用抖动接口

右下角滑动通知

artDialog.notice = function (options) {
var opt = options || {},
api, aConfig, hide, wrap, top,
duration = 800; var config = {
id: 'Notice',
left: '100%',
top: '100%',
fixed: true,
drag: false,
resize: false,
follow: null,
lock: false,
init: function(here){
api = this;
aConfig = api.config;
wrap = api.DOM.wrap;
top = parseInt(wrap[0].style.top);
hide = top + wrap[0].offsetHeight; wrap.css('top', hide + 'px')
.animate({top: top + 'px'}, duration, function () {
opt.init && opt.init.call(api, here);
});
},
close: function(here){
wrap.animate({top: hide + 'px'}, duration, function () {
opt.close && opt.close.call(this, here);
aConfig.close = $.noop;
api.close();
}); return false;
}
}; for (var i in opt) {
if (config[i] === undefined) config[i] = opt[i];
}; return artDialog(config);
};

调用示例:

art.dialog.notice({
title: '万象网管',
width: 220,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能导致artDialog收缩
content: '尊敬的顾客朋友,您IQ卡余额不足10元,请及时充值',
icon: 'face-sad',
time: 5
});

简单交互对话框

注意:artDialog iframeTools扩展已经包含这些扩展了

/**
* 警告
* @param {String} 消息内容
*/
artDialog.alert = function (content) {
return artDialog({
id: 'Alert',
icon: 'warning',
fixed: true,
lock: true,
content: content,
ok: true
});
}; /**
* 确认
* @param {String} 消息内容
* @param {Function} 确定按钮回调函数
* @param {Function} 取消按钮回调函数
*/
artDialog.confirm = function (content, yes, no) {
return artDialog({
id: 'Confirm',
icon: 'question',
fixed: true,
lock: true,
opacity: .1,
content: content,
ok: function (here) {
return yes.call(this, here);
},
cancel: function (here) {
return no && no.call(this, here);
}
});
}; /**
* 提问
* @param {String} 提问内容
* @param {Function} 回调函数. 接收参数:输入值
* @param {String} 默认值
*/
artDialog.prompt = function (content, yes, value) {
value = value || '';
var input; return artDialog({
id: 'Prompt',
icon: 'question',
fixed: true,
lock: true,
opacity: .1,
content: [
'<div style="margin-bottom:5px;font-size:12px">',
content,
'</div>',
'<div>',
'<input value="',
value,
'" style="width:18em;padding:6px 4px" />',
'</div>'
].join(''),
init: function () {
input = this.DOM.content.find('input')[0];
input.select();
input.focus();
},
ok: function (here) {
return yes && yes.call(this, input.value, here);
},
cancel: true
});
}; /**
* 短暂提示
* @param {String} 提示内容
* @param {Number} 显示时间 (默认1.5秒)
*/
artDialog.tips = function (content, time) {
return artDialog({
id: 'Tips',
title: false,
cancel: false,
fixed: true,
lock: false
})
.content('<div style="padding: 0 1em;">' + content + '</div>')
.time(time || 1.5);
};

调用范例:

art.dialog.alert('人品越来越不那么稳定了,请检查!');
art.dialog.confirm('你确定要删除这掉消息吗?', function () {
art.dialog.tips('执行确定操作');
}, function () {
art.dialog.tips('执行取消操作');
});
art.dialog.prompt('请输入图片网址', function (val) {
art.dialog.tips(val);
}, 'http://');
art.dialog.tips('数据正在提交..', 2);
// [more code..]
art.dialog.tips('成功!已经保存在服务器');

artdialog对话框 三种样式 网址:http://www.planeart.cn/demo/artDialog/_doc/labs.html的更多相关文章

  1. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  2. CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...

  3. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  4. 转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

  5. HTML三种样式引入方式

    HTML三种样式引入方式   HTML有三种样式引入方式:行内样式(inline Styles).嵌入式样式表(Embedded Style Sheets).外部样式表(External Style ...

  6. 《转载》CSS中的三种样式来源:创作人员、读者和用户代理

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式,很多第一次学习CSS的朋友,对这三种来源可能会存在一些困惑,下面我写一下自己的理解,若有错误的地方还请指正. ...

  7. CSS三种样式

    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...

  8. 大家好,又是新的一天。今天给大家带来一些新的知识:选择器的种类和css的三种样式

    今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...

  9. CSS:概念和三种样式

    简介: CSS(Cascading Style Sheets):层叠样式表,它用来控制HTML标签的样式,给网页结构穿衣服~ CSS的编写格式是键值对的形式  ->  格式:属性名 : 属性值: ...

随机推荐

  1. Vue2.5入门-2

    todolist功能开发 代码 <!DOCTYPE html> <html> <head> <title>vue 入门</title> &l ...

  2. etl是什么

    ETL (数据仓库技术) ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).交互转换(transform).加载(load)至目的 ...

  3. Linux入门进阶第三天——软件安装管理(下)

    一.yum在线安装 之前的rpm包各种依赖性太强!安装复杂,yum的好处就来了: // yum 在redhat是付费服务 1.yum源文件 先进入到yum目录: 我们打开默认生效的Base包 2.光盘 ...

  4. 微信小程序居中代码

    html页面: { text-align:center; } wxss页面: { width: 100%; height: 100%; display: flex; justify-content: ...

  5. OpenCV中对Mat里面depth,dims,channels,step,data,elemSize和数据地址计算的理解

    原文:OpenCV中对Mat里面depth,dims,channels,step,data,elemSize和数据地址计算的理解 Title : cv::Mat depth/dims/channels ...

  6. Airflow使用入门指南

    Airflow能做什么 关注公众号, 查看更多 http://mp.weixin.qq.com/s/xPjXMc_6ssHt16J07BC7jA Airflow是一个工作流分配管理系统,通过有向非循环 ...

  7. PowerDesigner 15学习笔记:十大模型及五大分类

    个人认为PowerDesigner 最大的特点和优势就是1)提供了一整套的解决方案,面向了不同的人员提供不同的模型工具,比如有针对企业架构师的模型,有针对需求分析师的模型,有针对系统分析师和软件架构师 ...

  8. [转]WIN2008 IIS7的日期格式

    最近项目升级服务器从32位升级到64位的WIN2008,日期显示格式非我们所期望的yyyy-M-d格式,原以为修改控制面板的日期格式即可,可是不行. 修改注册表问题解决. 修改方法: 运行注册表编辑器 ...

  9. 第七篇 Postman+Node.js+Newman+Jenkins实现自动化测试

    今天终于不咋忙了,学习整理一下一直想做却没实现的事儿,这事已经折磨团队半年之久了.因为项目是B端业务的测试,测试过程中需要生产大量的测试数据,而且都是跨多个系统的测试,对于后置流程的测试,这些同学往往 ...

  10. Scrapy爬豆瓣电影Top250并存入MySQL数据库

    d:进入D盘 scrapy startproject douban创建豆瓣项目 cd douban进入项目 scrapy genspider douban_spider movie.douban.co ...