ArtDialog简单使用示例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>art</title>
<link id="artDialogSkin" href="skins/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://f3.v.veimg.cn/f2e/gallery/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="artDialog.js"></script>
<script type="text/javascript" src="plugins/iframeTools.js"></script>
</head>
<body >
<script type="text/javascript">
function a(){
art.dialog({content:'hello world!历史'})
}
function b(){
art.dialog(
{
content:'欢迎你来到对话框世界！',
lock:true,
style:'succeed noClose'
},
function(){
alert('你点了确定'); //不管点了确定还是取消默认都会关闭artdialog，除非在这里面返回false
},
function(){
alert('你点了取消');
}
);
}
function c(){
art.dialog(
{
title:'图片查看',
fixed:true,
content:'<img width="817" height="479" src="butterfly.jpg" />'
});
//return false;
};
function d(){
// art.dialog({title:'dialog内嵌iframe', iframe:'http://www.baidu.com', width:'900', height:'500'});
//已经没有了直接的iframe属性 通过下面的方式内嵌iframe 第二种效果不佳
art.dialog.open("http://www.baidu.com", {width: 320, height: 400});
// art.dialog({title:'dialog内嵌iframe', width:'900px',height:'500px', content:"<iframe align='right' src='http://www.baidu.com' width:'100%' height:'100%' />"});
return false;
};
function e(){
art.dialog(
{
title:'动画',
fixed:true,
content:'<embed src="ddd.rm" type="audio/x-pn-realaudio-plugin" autostart="true" width="420" height="363"></embed>'
});
}; //播放avi总是只有声音，没有画面，哎！
function f(){
art.dialog({content:'你人品稳定么？', fixed:true, yesText:'我很稳定', style:'confirm', id:'bnt4_test'},
function(){
art.dialog({id:'bnt4_test'}).content('你骗人！');
return false;//这样对话框才不会关闭
},
function(){alert('你是坏人');}//按右上角的叉关闭对话框也会执行这个函数
);
};
function g(){
art.dialog({mouse:true, id:'dg_test34243', content:'您收到 <strong>2</strong> 条消息',left:'right',width:'15em', top:'bottom', fixed:true});
};
function h(){
art.dialog({id:'dg_test34243'}).close();
};
function i(){
var _this = document.getElementById('btn7');
if (document.getElementById('menu_4834783')) {//如果已经打开了对话框，按这个按钮还能把它关闭
art.dialog({id:'menu_4834783'}).close();
_this.innerHTML = '弹出菜单'; //button上显示的内容
return;
};
art.dialog({id:'menu_4834783', title:'菜单', content:'请输入：<input style="width:200px;" id="M_dfd" type="text" value="hello world!" />',
button:[{name:'确定',callback:function(){
var a=document.getElementById('M_dfd').value;
art.dialog({content:a, lock:true, time:1});
}
},
{name:'关闭我',callback:function(){_this.innerHTML = '弹出菜单';}}
]
}
);
_this.innerHTML = '关闭菜单';
return false;
};
</script>
<input type="button" style="width: 100px" onClick="a()" value="最简单的对话框"/><br/>
<button id="btn0" onClick="b()">基本示例</button><br/>
<button id="btn1" onClick="c()">显示图片</button><br/>
<button id="btn2" onClick="d()">外部页面</button><br/>
<button id="btn3" onClick="e()">视频</button><br/>
<button id="btn4" onClick="f()">询问</button><br/>
<button id="btn5" onClick="g()">广告</button>
<button id="btn6" onClick="h()">关闭</button><br/>
<button id="btn7" onClick="i()">弹出菜单</button><br/>
</body>
</html>
引自http://blog.csdn.net/weinierbian/article/details/7566459
1 属性
1.11 autoOpen ，这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。默认为：true。
1.12 初始化例：请注意，$('.selector')是dialog 的类名，在本例中.selector=#dialoag,以后不再说明。
$('.selector').dialog({ autoOpen: false });
1.13 初始化后，得到和设置此属性例：
//获得
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//设置
$('.selector').dialog('option', 'autoOpen', false);
1.21 bgiframe 默认为false ，When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.
在IE6下，让后面那个灰屏盖住select。
1.22 初始化例：
$('.selector').dialog({ bgiframe: true });
1.23 初始化后，得到和设置：
//获取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//设置
$('.selector').dialog('option', 'bgiframe', true);
1.31 buttons 显示一个按钮，并写上按钮的文本，设置按钮点击函数。默认为{}，没有按钮。
最上面的例子中已经有buttons属性的用法，请注意。
1.32 初始化例：
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
1.33 初始化后，得到和设置：
//获取
var buttons = $('.selector').dialog('option', 'buttons');
//设置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });
1.41 closeOnEscape 为true的时候，点击键盘ESC键关闭dialog，默认为true；
1.42 初始化例：
$('.selector').dialog({ closeOnEscape: false });
1.43 初始化后，得到和设置：
//获取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//设置
$('.selector').dialog('option', 'closeOnEscape', false);
1.51 dialogClass 类型将被添加到dialog，默认为空
1.52 初始化例：
$('.selector').dialog({ dialogClass: 'alert' });
1.53 初始化后，得到和设置：
//获取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//设置
$('.selector').dialog('option', 'dialogClass', 'alert');
1.61 draggable、resizable : draggable是否可以使用标题头进行拖动，默认为true，可以拖动;resizable是否可以改变dialog的大小，默认为true，可以改变大小。
1.62 初始化例：
$('.selector').dialog({ draggable: false,resizable:false });
1.63 初始化后，得到和设置：
//获取
var draggable = $('.selector').dialog('option', 'draggable');
//设置
$('.selector').dialog('option', 'draggable', false);
1.71 width、height ，dialog的宽和高，默认为auto，自动。
1.72 初始化例：
$('.selector').dialog({ height: 530,width:200 });
1.73 初始化后，得到和设置：请参考1.63
1.81 maxWidth、maxHeight、minWidth、minHeight ，dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false，为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。
1.82 初始化例：
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });
1.83 初始化后，得到和设置：请参考1.63
1.91 hide、show ，当dialog关闭和打开时候的效果。默认为null，无效果
1.92 初始化例：最上面的实例中用到，请自己看吧。
1.93 初始化后，得到和设置：请参考1.63
1.101 modal,是否使用模式窗口，模式窗口打开后，页面其他元素将不能点击，直到关闭模式窗口。默认为false不是模式窗口。
1.102 初始化例：$('.selector').dialog({ modal: true });
1.103 初始化后，得到和设置：请参考1.63
1.111 title，dialog的标题文字，默认为空。
1.112 初始化例：见最上面的实例。1.113 初始化后，得到和设置：请参考1.63
1.121 position ，dialog的显示位置：可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
1.122 初始化例：$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后，得到和设置：请参考1.63
1.131 zIndex, dialog的zindex值，默认值为1000.
1.132 初始化例：$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后，得到和设置：请参考1.63
1.141 stack 默认值为true，当dialog获得焦点是，dialog将在最上面。
1.142 初始化例：$('.selector').dialog({ stack: false }); 1.143 初始化后，得到和设置：请参考1.63
2 事件
2.11 beforeclose 类型dialogbeforeclose ， 当dialog尝试关闭的时候此事件将被触发，如果返回false，那么关闭将被阻止。
2.12 初始化例：$('.selector').dialog({
beforeclose: function(event, ui) { ... }
});
2.13 使用类型绑定此事件例：$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});
2.21 close 类型：dialogclose ，当dialog被关闭后触发此事件。
2.22 初始化例：$('.selector').dialog({
close: function(event, ui) { ... }
});
2.23 使用类型绑定此事件例：$('.selector').bind('dialogclose', function(event, ui) {
...
});
2.3 open 类型：dialogopen ，当dialog打开时触发。（篇幅有限，该省略的就省略了啊，初始化例和使用类型绑定事件可以向上参考。）
2.4 focus 类型：dialogfocus ，当dialog获得焦点时触发。
2.5 dragStart 类型：dragStart，当dialog拖动开始时触发。
2.6 drag 类型：drag ，当dialog被拖动时触发。
2.7 dragStop 类型：dragStop ，当dialog拖动完成时触发。
2.8 resizeStart 类型：resizeStart ，当dialog开始改变窗体大小时触发。
2.9 resize 类型：resize，当dialog被改变大小时触发。
2.10 resizeStop 类型：resizeStop，当改变完大小时触发。
3 方法
3.1 destroy ，我喜欢这个哦，摧毁地球。。。 例：.dialog( 'destroy' )
3.2 disable，dialog不可用，例：.dialog('disable');
3.3 enable,dialog可用，例，如3.2
3.4 close，open，关闭、打开dialog
3.5 option ，设置和获取dialog属性，例如：.dialog( 'option' , optionName , [value] ) ，如果没有value，将是获取。
3.6 isOpen ，如果dialog打开则返回true，例如：.dialog('isOpen')
3.7 moveToTop ,将dialog移到最上层，例如：.dialog( 'moveToTop' )
ArtDialog简单使用示例的更多相关文章
- 【java开发系列】—— spring简单入门示例
1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...
- Springmvc整合tiles框架简单入门示例（maven）
Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...
- hadoop环境安装及简单Map-Reduce示例
说明:这篇博客来自我的csdn博客,http://blog.csdn.net/lxxgreat/article/details/7753511 一.参考书:<hadoop权威指南--第二版(中文 ...
- EasyHook远注简单监控示例 z
http://www.csdn 123.com/html/itweb/20130827/83559_83558_83544.htm 免费开源库EasyHook(inline hook),下面是下载地址 ...
- Web Service简单入门示例
Web Service简单入门示例 我们一般实现Web Service的方法有非常多种.当中我主要使用了CXF Apache插件和Axis 2两种. Web Service是应用服务商为了解决 ...
- Ext简单demo示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- GDAL中MEM格式的简单使用示例
GDAL库中提供了一种内存文件格式--MEM.如何使用MEM文件格式,主要有两种,一种是通过别的文件使用CreateCopy方法来创建一个MEM:另外一种是图像数据都已经存储在内存中了,然后使用内存数 ...
- html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...
- hydra简单使用示例
本内容为网上收集整理,仅作为备忘!! hydra简单使用示例: 破解https: # hydra -m /index.php -l muts -P pass.txt 10.36.16.18 https ...
随机推荐
- QS2016年全球高等教育系统实力排名 中国排名世界第八亚洲第一
2016年5月18日,QS发布"2016年全球高等教育系统实力排名",中国在此榜单表现优异,排名世界第八亚洲第一. 排名指标 排名指标及计算方法如下: 系统实力:QS大学排名前70 ...
- Android与Dalvik
自学android的同事说:Android 这个妈蛋!! 当初就应该选择c++/c 来开发.现在为了效率又搞ART.简直是折腾,art在android5.0 的时候就是默认了.前段时间还在学习andr ...
- lua操作json，mysql，redis等
==========================example for lua json======================= local cjson = require("cj ...
- Java之properties文件读取
1.工程结构 2.ConfigFileTest.java package com.configfile; import java.io.IOException; import java.io.Inpu ...
- Sublime多行编辑快捷键
鼠标选中多行,按下 Ctrl Shift L (Command Shift L) 即可同时编辑这些行: 鼠标选中文本,反复按 CTRL D (Command D) 即可继续向下同时选中下一个相同的文本 ...
- Effective Java 读书笔记之十 序列化
一.谨慎地实现Serializable接口 1.一旦一个类被发布,就大大地降低了“改变这个类的实现”的灵活性. 2.仔细设计类的序列化形式而不是接受类的默认虚拟化形式. 3.反序列化机制是一个“隐藏的 ...
- hdu4747——Mex
1.题目大意:对一个序列的每一个区间求Mex,最后所有的mex相加(mex就是SG的那个),力求nlogn... 2.分析:最近开始刷线段树了,还是有很多不会啊 首先把1-1 1-2 1-- 1-n这 ...
- java项目导入IntelliJ IDEA
(0)之所以有第0步,是因为第一次倒入失败,所以从删除上次倒入的数据开始- 开始删除数据. 启动Intelli J,点击右键删除上次的导入的项目 把配置拷贝到.m2文件夹下,并且删除上次下载的一些依赖 ...
- JAVA正则表达式：Pattern类与Matcher类详解
java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包.它包括两个类:Pattern和Matcher Pattern 一个Pattern是一个正则表达式经编译后的表 ...
- C++关键字:mutable（转）
参考:http://blog.csdn.net/hxz_qlh/article/details/14475573 修饰成员变量,在const成员函数中可修改它,在C++中还从未用过这个关键字.