日期:2014-05-16  浏览次数:20362 次

[转]很牛的js弹出层-artDialog4.1.2

转自:http://www.iteye.com/topic/1117866

?

Sharpleo 写道
先让我们看看他提供的几种皮肤吧






功能:
1. 传入字符串
art.dialog({
    content: '我支持HTML'
});

效果:2. 传入HTMLElement 备注:1、元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框,会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置,style display属性也将恢复 ******************************************************************************************** 只前这个东东也是朋友完我的,后来经刚刚一位朋友提醒,我google一下,现在完整的教程都在里面,所有包都在里面。 我也不好意思,现在补充下。呵呵,因为不算晚吧。 art.dialog({ content: document.getElementById('demoCode_content_DOM'), id: 'EF893L' });
效果:把指定的div加载到这个弹框上
标题 [title] art.dialog({ title: 'hello world!' });
效果:确定取消按钮 [ok & cancel] 备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭 art.dialog({ content: '如果定义了回调函数才会出现相应的按钮', ok: function () { this.title('3秒后自动关闭').time(3); return false; }, cancelVal: '关闭', cancel: true //为true等价于function(){} });
效果:自定义按钮 [button] 备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭;button参数对应的扩展方法名称也是"button" art.dialog({ id: 'testID', content: 'hello world!', button: [ { name: '同意', callback: function () { this.content('你同意了').time(2); return false; }, focus: true }, { name: '不同意', callback: function () { alert('你不同意') } }, { name: '无效按钮', disabled: true }, { name: '关闭我' } ] });
效果:定时关闭的消息 [time] art.dialog({ time: 2, content: '两秒后关闭' });
效果:2秒后关闭这个只有看才看得到效果截图不行
定义消息图标 [icon] 请查看skin/icons目录下的图标 art.dialog({ icon: 'succeed', content: '我可以定义消息图标哦' });
图标有好几种就拿这个success效果图给大家看下:
锁屏 [lock & background & opacity] art.dialog({ lock: true, background: '#600', // 背景色 opacity: 0.87, // 透明度 content: '中断用户在对话框以外的交互,展示重要操作与消息', icon: 'error', ok: function () { art.dialog({content: '再来一个锁屏', lock: true}); return false; }, cancel: true });
效果:这是个锁屏的你可自定义背景颜色和图标等等一些属性
自定义坐标 [left & top] art.dialog({ left: 100, top: '60%', content: '我改变坐标了' });
效果:自定义坐标 传X,Y就可以啦
创建一个全屏对话框 art.dialog({ width: '100%', height: '100%', left: '0%', top: '0%', fixed: true, resize: false, drag: false })
右下角滑动通知 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){