简介

artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。

功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……

优点

  1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
  2. 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮),并且支持消息框大小拖动调节
  3. 智能消息对齐: 如果设置了对话框宽度,文本会自动居中或者居左对齐
  4. 容错: 如果定义的宽度高度小于内容大小不会出现错位,
  5. 智能定位: 使用自定义坐标的时候智能修正位置,确保其在可视范围 (适用于弹出菜单)
  6. 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
  7. 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
  8. 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
  9. IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
  10. IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)

接口

配置参数

  • content: {消息内容,支持HTML}
  • title: {标题.默认:'提示'}
  • lock: {是否锁定屏幕. 默认:false}
  • width: {宽度,支持em等单位. 默认:'auto'}
  • height: {高度,支持em等单位. 默认:'auto'}
  • url: {iframe地址,存在content参数时候,此参数无效}
  • x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
  • y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中,而是使用的黄金比例)}
  • fixed: {是否启用静止定位. 默认:false}
  • time: {多少秒自动关闭}
  • style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
  • yesText: {确定按钮文本. 默认:'确定'}
  • noText: {取消按钮文本. 默认:'取消'}
  • yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
  • id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2',则内容容器id为'my2Content'}
  • artDialog(
    {
    content:'欢迎你来到对话框世界!',
    lock:true,
    style:'succeed noClose'
    },
    function(){
    alert('你点了确定');
    },
    function(){
    alert('你点了取消');
    }
    );
  • artDialog({content:'大多情况下只需要一个content参数就能解决问题'}).
  • http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/
21222
/*
演示脚本
*/ (function(){ //判断IE6
var isIE6 = !+'\v1' && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6); //document.getElementById简化函数
var $ = function (id){
return 'string' == typeof id ? document.getElementById(id) : id;
}; //页面就绪,允许你绑定一个在DOM文档载入完成后执行的函数
var domReady = !+'\v1' ? function(f){(function(){
try{
document.documentElement.doScroll('left');
} catch (error){
setTimeout(arguments.callee, 0);
return;
};
f();
})();
} : function(f){
document.addEventListener('DOMContentLoaded', f, false);
}; //在页面就绪后绑定事件
domReady(function(){
//artDialog({content:'欢迎使用 "artDialog" 对话框组件!'}); //--------------------------ardDialog演示脚本开始------------------------------//
$('btn1').onclick = function(){
artDialog({title:'图片查看', content:'<img width="817" height="479" src="http://www.hunanyishi.cn/images/main.jpg" />', fixed:true});
return false;
}; $('btn2').onclick = function(){
artDialog({title:'google', url:'http://code.google.com/p/artdialog/', width:640, height:320});//url参数其实就是iframe
return false;
}; $('btn3').onclick = function(){
artDialog({title:'功夫兔', content:'<object width="420" height="363"><param name="movie" value="http://www.tudou.com/v/bXwe7XgTxuA"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="opaque"></param><embed src="http://www.tudou.com/v/bXwe7XgTxuA" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="420" height="363"></embed></object>', fixed:true});
return false;
}; $('btn4').onclick = function(){
artDialog({content:'你人品稳定么?', fixed:true, yesText:'我很稳定', style:'confirm'}, function(){alert('你是好人');}, function(){alert('你是坏人');});//style参数可以填写多个,用空格隔开。具体有什么请看皮肤css文件
return false;
}; $('btn5').onclick = function(){
artDialog({content:'你是坏人', style:'alert', lock:true}, function(){});//lock参数就是锁屏,它会中断用户操作,用于显示非常重要的消息。慎用
return false;
}; $('btn6').onclick = function(e){
//获取对象的坐标,让对话框在按钮附近弹出
var e = e || window.event,
_x,
_y;
if(e.pageX || e.pageY){
_x = e.pageX;
_y = e.pageY;
} else {
_x = e.clientX + document.body.clientLeft;
_y = e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop);
}; var _this = this;
artDialog({id:'menu_4834783',content:'<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />',x:_x, y:_y, style:'noTitle noBorder'}, function(){ _this.innerHTML = $('M_dfd').value; });//使用id参数,可以防止点击弹出多个对话框
return false;
}; $('btn7').onclick = function(){
artDialog({content:'您收到 <strong>2</strong> 条消息', x:'right', y:'bottom', time:'100', fixed:true});//x和y坐标可以使用关键字,当然也可以使用数字
return false;
};
//--------------------------ardDialog演示脚本结束------------------------------// //皮肤切换(不支持IE6,因为png皮肤的缘故)
if (!isIE6) {
function mySkin(s){
$('artDialogSkin').href = s;
};
$('skin_0').click();
$('skin_0').onclick = function(){
mySkin('skin/aero/aero.css');
};
$('skin_1').onclick = function(){
mySkin('skin/chrome/chrome.css');
};
$('skin_2').onclick = function(){
mySkin('skin/facebook/facebook.css');
};
$('skin_3').onclick = function(){
mySkin('skin/mini/mini.css');
};
$('skin_4').onclick = function(){
mySkin('skin/aero/aero.css');
$('skin_0').click();
artDialog({content:'自己动手,丰衣足食', lock:true});
};
$('showBg').onclick = function(){
if (!$('test_3544')) {
document.getElementsByTagName('body')[0].className = 'showBg';
artDialog({id:'test_3544', content:'<div id="topMenu" style="background:#000; width:200px; height:2em;line-height:2em;text-align:center; filter:alpha(opacity=70); opacity:0.7;">[<a href="#" style="color:#FFF" onclick="showWin();return false">打开新对话框</a>]  [<a id="bgCloseBtn" href="#" style="color:#FFF" onclick="bgShow();return false">关闭</a>]</div>', x:'left', y:'top', style:'noSkin', fixed:true});
} else {
bgShow();
};
return false;
};
}; //运行代码[不支持Chrome]
$('runCodeBtn').onclick = function(){
var fn = $('runCode').value;
$('runCodeDiv').innerHTML = '<iframe style="display:none" id="runCodeIframe"></iframe>';
var fw = $('runCodeIframe').contentWindow;
var f = fw.document;
f.contentEditable = true;
//f.open();
f.writeln('<!DOCTYPE><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript">try{window.parent.'+fn+'}catch(e){alert(e.description);};</script><body></body></html>');
//f.close();
return false;
}; var mailName = 'admin' + '@' + 'plane' + 'art' + '.cn';
$('myMail').innerHTML = mailName;
}); })(); //显示一个新对话框
function showWin(){
artDialog({content:'欢迎使用 "artDialog" 对话框组件!', fixed:true, lock:false,style:'succeed'}, function(){artDialog({title:' ', content:'谢谢观赏', lock:true, time:2})});
}; //显示背景
function bgShow(){
var body = document.getElementsByTagName('body')[0];
if(body.className != 'showBg') {
body.className = 'showBg';
document.getElementById('bgCloseBtn').innerHTML = '关闭背景';
} else {
body.className = '';
document.getElementById('bgCloseBtn').innerHTML = '打开背景';
};
};

  

artDialog 简单使用!的更多相关文章

  1. ArtDialog简单使用示例

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  2. artDialog 简单几种用法

    $('#btn1').click(function(){        artDialog({title:'图片查看', content:'<img width="817" ...

  3. PHPCMS系统使用的弹出窗口插件artDialog

    来源: http://aui.github.io/artDialog/doc/index.html  (官方) http://lab.seaning.com/ http://www.mb5u.com/ ...

  4. jQuery弹出层---artDialog 文档

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

  5. 推荐一款不错的dialog小工具:artDialog

    推荐一款不错的dialog小工具, 地址:http://www.planeart.cn/demo/artDialog/_doc/labs.html 相关介绍例如以下: artDialog是一个基于ja ...

  6. js库之art.dialog

    自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切 ...

  7. Jquery_artDialog对话框弹出

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口l  自适应内容artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适 ...

  8. ArtDialog V6的简单使用

    artDialog v6 -- 经典的网页对话框组件,内外皆用心雕琢. 兼容性 測试通过:IE6~IE11.Chrome.Firefox.Safari.Opera 授权协议 免费,且开源.基于LGPL ...

  9. artdialog

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

随机推荐

  1. Xcode wifi连接真机调试

    设备环境:Mac OSX 10.12.5.iOS11.Xcode9 或以上版本 PS:这是WWDC2017的新功能,iOS11以上,Xcode9这是刚性要求.这个功能不好找,就记下来了 手机连接上Xc ...

  2. Android Studio 使用笔记:查看类结构和继承关系

    选中类 ,按下F4,可以打开类的源代码 在 Eclipse 中我们可以使用 Ctrl + O 组合热键查看类的结构,Android Studio 中也可以做到. View -> Tool Win ...

  3. UFLDL深度学习笔记 (三)无监督特征学习

    UFLDL深度学习笔记 (三)无监督特征学习 1. 主题思路 "UFLDL 无监督特征学习"本节全称为自我学习与无监督特征学习,和前一节softmax回归很类似,所以本篇笔记会比较 ...

  4. [c++]对象指针,引用的操作

    1.time类保存在"htime.h"中.要求: ⑴ 数据成员包括时(hour).分(minute).秒(second),为私有成员: ⑵ 能给数据成员提供值的成员函数(默认值为0 ...

  5. 一个Lumen多层拆分手记

    这个项目除了最基本的MVC,routes和之前讲过的ServiceProvider(服务商)依赖注入,还有Action (动作) .Repositories(仓储)等... 先讲一下仓储吧, 一般JA ...

  6. Jmeter+Ant+Jenkins接口自动化测试框架搭建

    前言 软件开发的V模型大家都不陌生,其中测试阶段分为单元测试→功能测试→系统测试→验收测试.其中单元测试一般由开发同学们自己完成,大部分测试具体实施(这里不包括用例设计)是从单体功能测试开始着手的. ...

  7. [Catalan数]1086 栈、3112 二叉树计数、3134 Circle

    1086 栈 2003年NOIP全国联赛普及组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 栈是计算机中 ...

  8. 【BZOJ4785】[Zjoi2017]树状数组 树套树(二维线段树)

    [BZOJ4785][Zjoi2017]树状数组 Description 漆黑的晚上,九条可怜躺在床上辗转反侧.难以入眠的她想起了若干年前她的一次悲惨的OI 比赛经历.那是一道基础的树状数组题.给出一 ...

  9. Angular中的$cacheFactory的作用和用法

    1.Angular中的$cacheFactory的作用:    (1)put(key,value); 在缓存对象中插入一个键值对(key,value). (2)get(key); 在缓存对象中通过指定 ...

  10. POJ 2856 Y2K Accounting Bug【简单暴力】

    链接: http://poj.org/problem?id=2586 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26733#probl ...