artdialog对话框 三种样式 网址:http://www.planeart.cn/demo/artDialog/_doc/labs.html
时间:2014-04-29 16:37:46
收藏:0
阅读:725
摇头效果
类似与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,布布扣,bubuko.com
评论(0)