update
This commit is contained in:
hanjian
@@ -0,0 +1,796 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="demo.js"></script>
|
||||
<script src="highlight/highlight.pack.js"></script>
|
||||
<script src="highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="highlight/styles/magula.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="../index.html">artDialog</a></h1>
|
||||
<ul id="nav" class="nav">
|
||||
<li><a href="../index.html" class="home">首页</a></li>
|
||||
<li><a href="./API.html" class="api">文档</a></li>
|
||||
<li><a href="./down.html" class="down">下载</a></li>
|
||||
<li><a href="./log.html" class="log">更新</a></li>
|
||||
<li><a href="./labs.html" class="labs">实验</a></li>
|
||||
<li><a href="./license.html" class="license">授权</a></li>
|
||||
|
|
||||
<li><a href="#" id="nav-skin">皮肤</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<h2 id="options">配置参数</h2>
|
||||
<table class="zebra">
|
||||
<colgroup>
|
||||
<col class="col1" />
|
||||
<col class="col2" />
|
||||
<col class="col3" />
|
||||
<col class="col4" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="parameter">名称</th>
|
||||
<th class="type">类型</th>
|
||||
<th class="default">默认值</th>
|
||||
<th class="note">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>内容</abbrev></th>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#title">title</a></th>
|
||||
<td>String</td>
|
||||
<td>'消息'</td>
|
||||
<td>标题内容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2"><a href="#content">content</a></th>
|
||||
<td>String</td>
|
||||
<td rowspan="2">'loading..'</td>
|
||||
<td rowspan="2">消息内容。<br />
|
||||
1、如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置<br />
|
||||
2、如果没有设定content的值则会有loading的动画</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>HTMLElement</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>按钮</abbrev></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2"><a href="#ok">ok</a></th>
|
||||
<td>Function</td>
|
||||
<td rowspan="2">null</td>
|
||||
<td rowspan="2">确定按钮回调函数。<br />
|
||||
函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Boolean</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th rowspan="2"><a href="#cancel">cancel</a></th>
|
||||
<td>Function</td>
|
||||
<td rowspan="2">null</td>
|
||||
<td rowspan="2">取消按钮回调函数。<br />
|
||||
函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮<br />
|
||||
对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发cancel事件</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Boolean</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#okText">okVal</a></th>
|
||||
<td>String</td>
|
||||
<td>'确定'</td>
|
||||
<td>"确定按钮"文字</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#cancelText">cancelVal</a></th>
|
||||
<td>String</td>
|
||||
<td>'取消'</td>
|
||||
<td>"取消按钮"文字</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#button">button</a></th>
|
||||
<td>Array</td>
|
||||
<td>null</td>
|
||||
<td>自定义按钮。<br />
|
||||
配置参数成员：
|
||||
<div>name —— 按钮名称</div>
|
||||
<div>callback —— 按下后执行的函数</div>
|
||||
<div>focus —— 是否聚焦点</div>
|
||||
<div>disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）</div>
|
||||
<br />
|
||||
<div>示例：</div>
|
||||
参数如：[{name: '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>尺寸</abbrev></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2"><a href="#width">width</a></th>
|
||||
<td>Number</td>
|
||||
<td rowspan="2">'auto'</td>
|
||||
<td rowspan="2">设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。<br />
|
||||
如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>String</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th rowspan="2"><a href="#height">height</a></th>
|
||||
<td>Number</td>
|
||||
<td rowspan="2">'auto'</td>
|
||||
<td rowspan="2">设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。<br />
|
||||
如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>String</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>位置</abbrev></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#fixed">fixed</a></th>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6 fixed）</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th rowspan="2"><a href="#follow">follow</a></th>
|
||||
<td>HTMLElement</td>
|
||||
<td rowspan="2">null</td>
|
||||
<td rowspan="2">让对话框依附在指定元素附近。<br />
|
||||
可传入元素ID名称，注意ID名称需要以“#”号作为前缀</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>String</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th rowspan="2"><a href="#left">left</a></th>
|
||||
<td>Number</td>
|
||||
<td rowspan="2">'50%'</td>
|
||||
<td rowspan="2">相对于可视区域的X轴的坐标。<br />
|
||||
可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>String</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th rowspan="2"><a href="#top">top</a></th>
|
||||
<td>Number</td>
|
||||
<td rowspan="2">'38.2%'</td>
|
||||
<td rowspan="2">相对于可视区域的Y轴的坐标。<br />
|
||||
可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>String</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4">视觉</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#lock">lock</a></th>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>开启锁屏。<br />
|
||||
中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#background">background</a></th>
|
||||
<td>String</td>
|
||||
<td>'#000'</td>
|
||||
<td>锁屏遮罩颜色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#opacity">opacity</a></th>
|
||||
<td>Number</td>
|
||||
<td>0.7</td>
|
||||
<td>锁屏遮罩透明度</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#icon">icon</a></th>
|
||||
<td>String</td>
|
||||
<td>null</td>
|
||||
<td>定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#padding">padding</a></th>
|
||||
<td>String</td>
|
||||
<td>'20px 25px'</td>
|
||||
<td>内容与边界填充边距(即css padding)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>交互</abbrev></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#time">time</a></th>
|
||||
<td>Number</td>
|
||||
<td>null</td>
|
||||
<td>设置对话框显示时间。以秒为单位</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#resize">resize</a></th>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>是否允许用户调节尺寸</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#drag">drag</a></th>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>是否允许用户拖动位置</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#esc">esc</a></th>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>是否允许用户按Esc键关闭对话框</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>高级</abbrev></th>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th rowspan="2"><a href="#id">id</a></th>
|
||||
<td>String</td>
|
||||
<td rowspan="2">null</td>
|
||||
<td rowspan="2">设定对话框唯一标识。用途：<br />
|
||||
1、防止重复弹出<br />
|
||||
2、定义id后可以使用art.dialog.list[youID]获取扩展方法</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>Number</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#zIndex">zIndex</a></th>
|
||||
<td>Number</td>
|
||||
<td>1987</td>
|
||||
<td>重置全局zIndex初始值。<br />
|
||||
用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件，但是它们可能默认zIndex没有artDialog高，导致无法浮动到artDialog之上，这个时候你就可以给对话框指定一个较小的zIndex值。<br />
|
||||
请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#init">init</a></th>
|
||||
<td>Function</td>
|
||||
<td>null</td>
|
||||
<td>对话框弹出后执行的函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#close">close</a></th>
|
||||
<td>Function</td>
|
||||
<td>null</td>
|
||||
<td>对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。<br />
|
||||
请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#show">show</a></th>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>是否显示对话框</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2 id="API">扩展方法</h2>
|
||||
<table class="zebra">
|
||||
<colgroup>
|
||||
<col class="col1" />
|
||||
<col class="col2" />
|
||||
<col class="col3" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="name">名称</th>
|
||||
<th class="note" colspan="3">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>close()</th>
|
||||
<td colspan="3">关闭对话框</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>show()</th>
|
||||
<td colspan="3">显示对话框</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>hide()</th>
|
||||
<td colspan="3">隐藏对话框</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>title(value)</th>
|
||||
<td colspan="3">写入标题。无参数则返回标题容器元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>content(value)</th>
|
||||
<td colspan="3">向消息容器中写入内容。参数支持字符串、DOM对象，无参数则返回内容容器元素</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>button(arguments)</th>
|
||||
<td colspan="3">插入一个自定义按钮。<br />
|
||||
配置参数成员：
|
||||
<div>name —— 按钮名称</div>
|
||||
<div>callback —— 按下后执行的函数</div>
|
||||
<div>focus —— 是否聚焦点</div>
|
||||
<div>disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）</div>
|
||||
<br />
|
||||
<div>示例：</div>
|
||||
<pre style="background:none; border:none 0;">button({
|
||||
name: '登录',
|
||||
focus: true,
|
||||
callback: function () {}
|
||||
}, {
|
||||
name: '取消'
|
||||
})</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>follow(element)</th>
|
||||
<td colspan="3">让对话框吸附到指定元素附近</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>position(left, top)</th>
|
||||
<td colspan="3">重新定位对话框</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>size(width, height)</th>
|
||||
<td colspan="3">重新设定对话框大小</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>lock()</th>
|
||||
<td colspan="3">锁屏</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>unlock()</th>
|
||||
<td colspan="3">解锁</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>time(val)</th>
|
||||
<td colspan="3">定时关闭（单位秒）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>配置参数演示</h2>
|
||||
<h3 id="content">内容 [content]</h3>
|
||||
<h4>1. 传入字符串</h4>
|
||||
<div id="demoCode_content">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
content: '我支持HTML'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_content">运行»</button>
|
||||
</p>
|
||||
<h4>2. 传入HTMLElement</h4>
|
||||
<p>备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框，会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复</p>
|
||||
<div id="demoCode_content_DOM">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
content: document.getElementById('demoCode_content_DOM'),
|
||||
id: 'EF893L'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_content_DOM">运行»</button>
|
||||
</p>
|
||||
<h3 id="title">标题 [title]</h3>
|
||||
<div id="demoCode_title">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
title: 'hello world!'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_title">运行»</button>
|
||||
</p>
|
||||
<h3>确定取消按钮 [ok & cancel]<span id="ok"></span><span id="cancel"></span><span id="okText"></span><span id="cancelText"></span></h3>
|
||||
<p>备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭</p>
|
||||
<div id="demoCode_yes_no">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
content: '如果定义了回调函数才会出现相应的按钮',
|
||||
ok: function () {
|
||||
this.title('3秒后自动关闭').time(3);
|
||||
return false;
|
||||
},
|
||||
cancelVal: '关闭',
|
||||
cancel: true //为true等价于function(){}
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_yes_no">运行»</button>
|
||||
</p>
|
||||
<h3 id="button">自定义按钮 [button]</h3>
|
||||
<p>备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的扩展方法名称也是"button"</p>
|
||||
<div id="demoCode_button">
|
||||
<pre><code class="javascript">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: '关闭我'
|
||||
}
|
||||
]
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_button">运行»</button>
|
||||
</p>
|
||||
<h3 id="time">定时关闭的消息 [time]</h3>
|
||||
<div id="demoCode_time">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
time: 2,
|
||||
content: '两秒后关闭'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_time">运行»</button>
|
||||
</p>
|
||||
<h3 id="id">防止重复弹出 [id]</h3>
|
||||
<div id="demoCode_id">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
id: 'testID2',
|
||||
content: '再次点击运行看看'
|
||||
});
|
||||
art.dialog({id: 'testID2'}).title('3秒后关闭').time(3);
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_id">运行»</button>
|
||||
</p>
|
||||
<h3 id="icon">定义消息图标 [icon]</h3>
|
||||
<p>请查看skins/icons目录下的图标</p>
|
||||
<div id="demoCode_icon">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
icon: 'succeed',
|
||||
content: '我可以定义消息图标哦'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_icon">运行»</button>
|
||||
</p>
|
||||
<h3 id="padding">内容与边界填充边距 [padding]</h3>
|
||||
<p>有时候并不需要默认的内容填充边距，如展示图片与视频</p>
|
||||
<div id="demoCode_padding">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
padding: 0,
|
||||
title: '照片',
|
||||
content: '<img src="./images/photo.jpg" width="379" height="500" />',
|
||||
lock: true
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_padding">运行»</button>
|
||||
</p>
|
||||
<h3 id="lock">锁屏 [lock & background & opacity] <span id="background"></span><span id="opacity"></span><span id="duration"></span></h3>
|
||||
<div id="demoCode_lock">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
lock: true,
|
||||
background: '#600', // 背景色
|
||||
opacity: 0.87, // 透明度
|
||||
content: '中断用户在对话框以外的交互，展示重要操作与消息',
|
||||
icon: 'error',
|
||||
ok: function () {
|
||||
art.dialog({content: '再来一个锁屏', lock: true});
|
||||
return false;
|
||||
},
|
||||
cancel: true
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_lock">运行»</button>
|
||||
</p>
|
||||
<h3 id="follow">跟随元素 [follw]</h3>
|
||||
<h4>1、标准形式</h4>
|
||||
<div id="demoCode_follow">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
follow: document.getElementById('followTestBtn'),
|
||||
content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="followTestBtn" title="id=followTestBtn" name="demoCode_follow">运行»</button>
|
||||
</p>
|
||||
<h4>2、使用简写形式 （已经绑定onclick事件，注意此返回值不再是对话框扩展方法）</h4>
|
||||
<div id="demoCode_follow_fn">
|
||||
<pre><code class="javascript">art('#demoCode_follow_a').dialog({
|
||||
content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons"><a href="javascript:alert('点击运行后再来点击我！');void(0)" id="demoCode_follow_a" style="margin-right:10px; text-decoration:underline">元素触发</a>
|
||||
<button class="runCode" id="followTestBtn" title="id=followTestBtn" name="demoCode_follow_fn">运行»</button>
|
||||
</p>
|
||||
<h3>自定义坐标 [left & top]<span id="left"></span><span id="top"></span></h3>
|
||||
<div id="demoCode_position">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
left: 100,
|
||||
top: '60%',
|
||||
content: '我改变坐标了'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_position">运行»</button>
|
||||
</p>
|
||||
<h4>创建一个右下角浮动的消息窗口</h4>
|
||||
<div id="demoCode_position2">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
id: 'msg',
|
||||
title: '公告',
|
||||
content: 'hello world!',
|
||||
width: 320,
|
||||
height: 240,
|
||||
left: '100%',
|
||||
top: '100%',
|
||||
fixed: true,
|
||||
drag: false,
|
||||
resize: false
|
||||
})</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_position2">运行»</button>
|
||||
</p>
|
||||
<h3>设置大小 [width & height]<span id="width"></span><span id="height"></span></h3>
|
||||
<div id="demoCode_size">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
width: '20em',
|
||||
height: 55,
|
||||
content: '尺寸可以带单位'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_size">运行»</button>
|
||||
</p>
|
||||
<h4>创建一个全屏对话框</h4>
|
||||
<div id="demoCode_size_full">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: '0%',
|
||||
top: '0%',
|
||||
fixed: true,
|
||||
resize: false,
|
||||
drag: false
|
||||
})</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_size_full">运行»</button>
|
||||
</p>
|
||||
<h3 id="fixed">静止定位 [fixed]</h3>
|
||||
<div id="demoCode_fixed">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
fixed: true,
|
||||
content: '请拖动滚动条查看'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_fixed">运行»</button>
|
||||
</p>
|
||||
<h3 id="drag">不许拖拽 [drag & resize] <span id="resize"></span></h3>
|
||||
<div id="demoCode_drag">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
drag: false,
|
||||
resize: false,
|
||||
content: '禁止拖拽'
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_drag">运行»</button>
|
||||
</p>
|
||||
|
||||
<h2>扩展方法演示</h2>
|
||||
<p>特别说明：扩展方法支持链式操作</p>
|
||||
<h3>获取扩展方法一：直接引用返回</h3>
|
||||
<div id="demoCode_api_1">
|
||||
<pre><code class="javascript">var dialog = art.dialog({
|
||||
title: '我是对话框',
|
||||
content: '我是初始化的内容'
|
||||
});
|
||||
|
||||
dialog.content('对话框内容被扩展方法改变了').title('提示');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_1">运行»</button>
|
||||
</p>
|
||||
<h3>获取扩展方法二：通过对话框ID</h3>
|
||||
<div id="demoCode_api_2">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
id: 'KDf435',
|
||||
title: '警告',
|
||||
content: '我是初始化的内容'
|
||||
});
|
||||
|
||||
art.dialog.list['KDf435'].content('对话框内容被扩展方法改变了');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_2">运行»</button>
|
||||
</p>
|
||||
|
||||
<h3>获取扩展方法三：回调函数中this</h3>
|
||||
<div id="demoCode_api_3">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
title: '警告',
|
||||
content: '我是初始化的内容',
|
||||
ok: function () {
|
||||
this.content('你点了确定按钮').lock();
|
||||
return false;
|
||||
},
|
||||
init: function () {
|
||||
this.content('对话框内容被扩展方法改变了');
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_3">运行»</button>
|
||||
</p>
|
||||
<h3>关闭页面所有对话框</h3>
|
||||
<div id="demoCode_api_4">
|
||||
<pre><code class="javascript">var list = art.dialog.list;
|
||||
for (var i in list) {
|
||||
list[i].close();
|
||||
};
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_4">运行»</button>
|
||||
</p>
|
||||
<h3>按钮接口演示</h3>
|
||||
<p>备注：回调函数如果返回false将阻止对话框关闭</p>
|
||||
<div id="demoCode_api_button">
|
||||
<pre><code class="javascript">var dialog = art.dialog({
|
||||
title: '警告',
|
||||
content: '点击管理按钮将让删除按钮可用',
|
||||
width: '20em',
|
||||
button: [{
|
||||
name: '管理',
|
||||
callback: function () {
|
||||
this
|
||||
.content('我更改了删除按钮')
|
||||
.button({
|
||||
name: '删除',
|
||||
disabled: false
|
||||
})
|
||||
.lock();
|
||||
return false;
|
||||
},
|
||||
focus: true
|
||||
}]
|
||||
});
|
||||
|
||||
dialog.button(
|
||||
{
|
||||
name: '删除',
|
||||
callback: function () {
|
||||
alert('delect')
|
||||
},
|
||||
disabled: true
|
||||
}
|
||||
)
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_button">运行»</button>
|
||||
</p>
|
||||
<h3>标题倒计时</h3>
|
||||
<div id="demoCode_api_title">
|
||||
<pre><code class="javascript">var timer;
|
||||
art.dialog({
|
||||
content: '时间越来越少，越来越少..',
|
||||
init: function () {
|
||||
var that = this, i = 5;
|
||||
var fn = function () {
|
||||
that.title(i + '秒后关闭');
|
||||
!i && that.close();
|
||||
i --;
|
||||
};
|
||||
timer = setInterval(fn, 1000);
|
||||
fn();
|
||||
},
|
||||
close: function () {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}).show();</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_title">运行»</button>
|
||||
</p>
|
||||
<h3>关闭不删除内容</h3>
|
||||
<div id="demoCode_api_fn">
|
||||
<pre><code class="javascript">art.dialog({
|
||||
id: 'show-hide',
|
||||
content: '关闭后阻止对话框被删除，只隐藏对话框',
|
||||
close: function () {
|
||||
this.hide();
|
||||
return false;
|
||||
}
|
||||
}).show();</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_fn">运行»</button>
|
||||
</p>
|
||||
<h3>AJAX高级应用：执行HTML片段中特殊script标签</h3>
|
||||
<p>HTML片段中的<span style=" padding:1px; margin:0 3px; color:#03C; background:#F8F8F8"><script type="<span style="color:#090">text/dialog</span>"></script></span>标签包裹的javascript将会在artDialog内部执行，其this指向对话框扩展方法，这样可以进一步实现消息内容模块化。 </p>
|
||||
<p>(本例子使用了AJAX，需要在服务器上运行。可打开 <a href="./ajaxContent/login.html" target="_blank">./ajaxContent/login.html</a> 查看源码中的自定义脚本)</p>
|
||||
<div id="demoCode_api_content">
|
||||
<pre><code class="javascript">var dialog = art.dialog({id: 'N3690',title: false});
|
||||
|
||||
// jQuery ajax
|
||||
$.ajax({
|
||||
url: './ajaxContent/login.html',
|
||||
success: function (data) {
|
||||
dialog.content(data);
|
||||
},
|
||||
cache: false
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_api_content">运行»</button>
|
||||
</p>
|
||||
<h2 id="plugin">插件：iframe应用工具</h2>
|
||||
<p>请新打开新页面查看范例：<a href="./iframeTop.html" target="_blank">./iframeTop.html</a></p>
|
||||
<h2 id="in">应用到你的项目</h2>
|
||||
<p>在页面head引入artDialog，其中skin参数表示对话框使用的风格文件(如果项目采用jQuery作为框架，则引用jQuery artDialog版本)。</p>
|
||||
<pre><code><script src="artDialog/artDialog.js?skin=default"></script></code></pre>
|
||||
<p>如果需要在iframe应用下提供 <a href="#plugin">更好的支持</a> ，可加载插件：</p>
|
||||
<pre><code><script src="artDialog/plugins/iframeTools.js"></script></code></pre>
|
||||
<p>配置全局默认参数(可选):</p>
|
||||
<pre><code class="javascript">(function (config) {
|
||||
config['lock'] = true;
|
||||
config['fixed'] = true;
|
||||
config['okVal'] = 'Ok';
|
||||
config['cancelVal'] = 'Cancel';
|
||||
// [more..]
|
||||
})(art.dialog.defaults);
|
||||
</code></pre>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<p style="color:#F00;">||-------hello Ajax!-------||</p>
|
||||
<p>这里是ajax加载的html代码</p>
|
||||
<script>
|
||||
setTimeout(function(){
|
||||
alert('jQuery html方法可以执行HTML片段自带的javascript');
|
||||
}, 1000);
|
||||
</script>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"code": 0,
|
||||
"users": ["糖饼", "月月鸟", "水水", "丽丽", "花花", "大叔"],
|
||||
"me": "糖饼",
|
||||
"web": "http://www.planeart.cn"
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
<div id="map" style="width:558px">
|
||||
<div>地址: <input id="map_address" value="" style="width:200px; padding:4px;" /> <button id="map-search-sumbit">搜 索</button></div>
|
||||
<div id="map_canvas" style="width:558px; height:360px;"></div>
|
||||
</div>
|
||||
<script type="text/dialog">
|
||||
var dialog = this;
|
||||
|
||||
var getScript = function(src, fn, doc) {
|
||||
doc = doc || document;
|
||||
|
||||
var script = doc.createElement('script');
|
||||
script.language = "javascript";
|
||||
script.charset = $.charset;
|
||||
script.type = 'text/javascript';
|
||||
|
||||
script.onload = script.onreadystatechange = function() {
|
||||
if (!script.readyState || 'loaded' === script.readyState ||'complete' === script.readyState) {
|
||||
fn && fn();
|
||||
script.onload = script.onreadystatechange = null;
|
||||
script.parentNode.removeChild(script);
|
||||
};
|
||||
};
|
||||
|
||||
script.src = src;
|
||||
doc.body.appendChild(script);
|
||||
};
|
||||
|
||||
getScript("http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN", function () {
|
||||
var map, geocoder;
|
||||
function initialize() {
|
||||
var latlng = new google.maps.LatLng(39.904214, 116.407413);//39.904214,116.407413
|
||||
var options = {
|
||||
zoom: 11,
|
||||
center: latlng,
|
||||
disableDefaultUI: true,
|
||||
panControl: true,
|
||||
zoomControl: true,
|
||||
mapTypeControl: true,
|
||||
scaleControl: true,
|
||||
streetViewControl: false,
|
||||
overviewMapControl: true,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
map = new google.maps.Map(document.getElementById("map_canvas"), options);
|
||||
geocoder = new google.maps.Geocoder();
|
||||
geocoder.geocode({latLng: latlng}, function(results, status) {
|
||||
if (status == google.maps.GeocoderStatus.OK) {
|
||||
if (results[3]) {
|
||||
document.getElementById("map_address").value = results[3].formatted_address;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
dialog.title('google mpas')
|
||||
.button({name: '截图', callback: function () {
|
||||
var center = map.getCenter().lat() + ',' + map.getCenter().lng(),
|
||||
zoom = map.getZoom(),
|
||||
maptype = map.getMapTypeId(),
|
||||
url = 'http://maps.googleapis.com/maps/api/staticmap';
|
||||
url += '?center=' + encodeURIComponent(center);
|
||||
url += '&zoom=' + encodeURIComponent(zoom);
|
||||
url += '&size=558x360';
|
||||
url += '&maptype=' + encodeURIComponent(maptype);
|
||||
url += '&markers=' + encodeURIComponent(center);
|
||||
url += '&language=zh_CN';
|
||||
url += '&sensor=false';
|
||||
|
||||
art.dialog.through({title: false, content: '<img src="' + url + '" />', padding: 0, width: 558, height: 360, lock: true});
|
||||
|
||||
return false;
|
||||
}, focus: true})
|
||||
.position('50%', 'goldenRatio');
|
||||
|
||||
document.getElementById("map-search-sumbit").onclick = function () {
|
||||
var input = document.getElementById('map_address');
|
||||
search(input.value);
|
||||
};
|
||||
}
|
||||
function search(address) {
|
||||
if (!map) return;
|
||||
geocoder.geocode({address : address}, function(results, status) {
|
||||
if (status == google.maps.GeocoderStatus.OK) {
|
||||
map.setZoom(11);
|
||||
map.setCenter(results[0].geometry.location);
|
||||
var marker = new google.maps.Marker({
|
||||
map: map,
|
||||
position: results[0].geometry.location
|
||||
});
|
||||
} else {
|
||||
alert("Invalid address: " + address);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,73 @@
|
||||
<form id="login-form" action="?login" method="post">
|
||||
<p><label>帐号：<input id="login-form-username" name="username" type="text"></label></p>
|
||||
<p><label>密码：<input id="login-form-password" name="password" type="password"></label></p>
|
||||
</form>
|
||||
<!-- IE8 style 标签写在HTML片段下方才能生效 -->
|
||||
<style>
|
||||
#login-form p { padding:5px; }
|
||||
#login-form input { width:15em; padding:4px; border:1px solid #CCC; }
|
||||
#login-form input:focus { border-color:#426DC9; }
|
||||
#login-form .login-form-error { background:#FFFBFC; border-color:#F00 !important; }
|
||||
</style>
|
||||
<!--
|
||||
1、 script的类型如果是 text/dialog ，将会在对话框内部执行（类似init参数的回调），变量不会污染全局
|
||||
2、 如果使用jquery.artDialog，标准script的标签也能被执行
|
||||
3、 本页编码要与对话框所在页面编码保持一致
|
||||
-->
|
||||
<script type="text/dialog">
|
||||
var api = this,// 对话框扩展方法
|
||||
$ = function (id) {return document.getElementById(id)},
|
||||
form = $('login-form'),
|
||||
username = $('login-form-username'),
|
||||
password = $('login-form-password');
|
||||
|
||||
// 操作对话框
|
||||
api.title('系统登录')
|
||||
// 自定义按钮
|
||||
.button(
|
||||
{
|
||||
name: '登录',
|
||||
callback: function () {
|
||||
if (check(username) && check(password)) form.submit();
|
||||
return false;
|
||||
},
|
||||
focus: true
|
||||
},
|
||||
{
|
||||
name: '取消'
|
||||
}
|
||||
/*, 更多按钮.. */
|
||||
)
|
||||
// 锁屏
|
||||
.lock();
|
||||
|
||||
username.focus();
|
||||
|
||||
// 表单验证
|
||||
var check = function (input) {
|
||||
if (input.value === '') {
|
||||
inputError(input);
|
||||
input.focus();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
};
|
||||
};
|
||||
|
||||
// 输入错误提示
|
||||
var inputError = function (input) {
|
||||
clearTimeout(inputError.timer);
|
||||
var num = 0;
|
||||
var fn = function () {
|
||||
inputError.timer = setTimeout(function () {
|
||||
input.className = input.className === '' ? 'login-form-error' : '';
|
||||
if (num === 5) {
|
||||
input.className === '';
|
||||
} else {
|
||||
fn(num ++);
|
||||
};
|
||||
}, 150);
|
||||
};
|
||||
fn();
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
@@ -0,0 +1,79 @@
|
||||
@charset "utf-8";
|
||||
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
|
||||
fieldset, img { border: 0; }
|
||||
img { display:inline-block; }
|
||||
:focus { outline: 0; }
|
||||
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; }
|
||||
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
|
||||
abbr, acronym { border: 0; font-variant: normal; }
|
||||
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
|
||||
code, kbd, samp, tt { font-size:100%; }
|
||||
input, button, textarea, select { *font-size: 100%;
|
||||
}
|
||||
ol, ul { list-style: none outside none; }
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
caption, th { text-align: left; }
|
||||
sup, sub { font-size: 100%; vertical-align: baseline; }
|
||||
:link, :visited, ins { text-decoration: none; }
|
||||
blockquote, q { quotes: none; }
|
||||
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
|
||||
pre { padding:1em; background-color:#F8F8F8; border:solid 1px #F3F3F3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; }
|
||||
/**/
|
||||
body { font-size:75%; color:#666; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; background:#011a15 url(images/bg.png) repeat-x left top; }
|
||||
a { color:#214FA3; }
|
||||
a:hover { text-decoration:underline; }
|
||||
button {white-space: nowrap;}
|
||||
* html #logo a { padding:5px 10px 30px 10px; font-size:36px; color:#FFF; font-weight:bold; }
|
||||
html>body #logo a { display:block; margin-left:10px; height:60px; text-indent:-999em; overflow:hidden; background:url(images/logo.png) no-repeat; }
|
||||
#doc { height:100%; background:url(images/bottom.png) repeat-x 0 bottom; }
|
||||
#header { height:40px; padding:30px 0; }
|
||||
#logo { float:left; width:320px; }
|
||||
#nav { float:left; margin-top:16px; margin-left:58px; background:#232323\9; background:rgba(0, 0, 0, .5); border-radius:5px; }
|
||||
#nav li { margin:0; }
|
||||
#nav li, #nav li a { display:inline-block; *zoom:1; *display:inline; }
|
||||
#nav li a { margin:0 4px; padding:3px 6px; color:#FFF; font-size:1em; font-weight:bold; }
|
||||
#nav li a.select { border-bottom:solid 1px #F00; background:#C72015; box-shadow:0 3px 5px rgba(255, 0, 0, .7); }
|
||||
|
||||
#header, #main, #footer { margin:0 80px; }
|
||||
#main { min-height:640px\9;padding:15px; position:relative; width:50em; font-size:1.16em; background:#FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; border: solid #000 1px; box-shadow:0 0 8px rgba(0, 0, 0, .7); }
|
||||
@media screen and (min-width:0) {#main{min-height:640px;}}
|
||||
#main .mainWrap { min-height:500px; _height:500px; }
|
||||
|
||||
#main .about { padding:2em; padding-top:3em; margin-bottom:15px; }
|
||||
#main .about dd { margin:1em 0 1.5em 0; text-indent:0; }
|
||||
#main .about dt { height:2em; line-height:2em; font-size:14px; }
|
||||
#main h2 { clear:both; font-size:1.4em; height:2em; margin-bottom:10px; line-height:2em; text-align:center; color:#FFF; background:#030; font-weight:bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; }
|
||||
#main .content { text-indent:2em; }
|
||||
#main h3 { font-weight:bold; color:#003300; }
|
||||
#main h3 span { font-weight:normal; color:#999; }
|
||||
#main h4 { margin-top:5px; text-indent:1em; }
|
||||
#main h3 em, #main h4 em { font-weight:normal; color:#F90; }
|
||||
#main p { padding:10px 0; }
|
||||
#main pre { margin:10px 0; *zoom:1; }
|
||||
#main ul, ol { padding:5px; background-color:#F8F8F8; border:solid 1px #F3F3F3; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; }
|
||||
#main li { margin:10px; list-style: disc inside; }
|
||||
#main .buttons { text-align:right; }
|
||||
#main img { padding:5px; border:1px solid #F6F6F6; }
|
||||
#main img:hover { border-color:#F0F0F0; }
|
||||
#main button { font-size:12px; padding:2px 8px; background-color:#F8F8F8; border:solid 1px #CCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; cursor:pointer; }
|
||||
#main button:hover { background: #F5F5F5; }
|
||||
#main strong { font-weight:bold; margin:0 3px; }
|
||||
#main dl { margin:0 10px; }
|
||||
#main dt { font-weight:bold; color:#003300; }
|
||||
#main dl dd { margin:5px 20px; list-style:inside; text-indent:1em; }
|
||||
.demoInfo p { padding:8px; }
|
||||
/*行变色表格*/
|
||||
table.zebra, .zebra th, .zebra td { border-width: 1px; border-style: solid; margin: 0; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; }
|
||||
table.zebra { table-layout: fixed; width: 100%; margin-bottom: 6px; padding: 0 1px 1px 0; border-spacing: 0; border-collapse: separate; *border-collapse:collapse; border-color: #abb8ce; background: #EDEDED; }
|
||||
.zebra th { padding: 5px 4px; font-weight: bold; border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; text-align: left; text-shadow: 1px 1px 0 #e4edfb; vertical-align: middle; background: #d0dbee; }
|
||||
.zebra thead th { text-align:center; }
|
||||
.zebra th strong { color:#090; border-bottom:1px dashed #090; text-decoration:underline; }
|
||||
.zebra td { padding:0; }
|
||||
.zebra th.separate { text-align:center; border-color: #E1F196 #AECD1B #AECD1B #F3FAD6; background-color: #f3f7fd; }
|
||||
.zebra td { padding: 4px; font: 12px/18px Consolas, "Courier New", Courier, monospace; text-align: left; vertical-align: top; }
|
||||
.zebra td { border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; background: #e0e8f5; }
|
||||
.zebra tr.odd th { background: #dbe4f4; }
|
||||
.zebra tr.odd td { background: #e6eef9; }
|
||||
.zebra br { margin-bottom:1.8em; }
|
||||
table.zebra .parameter, table.zebra .type, table.zebra .default { width:7em; }
|
||||
html>body #footer { margin:0 0 0 auto; width:331px; height:54px; background:url(images/text.png) no-repeat; }
|
||||
@@ -0,0 +1,126 @@
|
||||
document.title += ' ' + art.dialog.fn.version;
|
||||
|
||||
// 运行代码
|
||||
$.fn.runCode = function () {
|
||||
var getText = function(elems) {
|
||||
var ret = "", elem;
|
||||
|
||||
for ( var i = 0; elems[i]; i++ ) {
|
||||
elem = elems[i];
|
||||
if ( elem.nodeType === 3 || elem.nodeType === 4 ) {
|
||||
ret += elem.nodeValue;
|
||||
} else if ( elem.nodeType !== 8 ) {
|
||||
ret += getText( elem.childNodes );
|
||||
};
|
||||
};
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
var code = getText(this);
|
||||
new Function(code).call(window);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
$(function(){
|
||||
// 按钮触发代码运行
|
||||
$(document).bind('click', function(event){
|
||||
var target = event.target,
|
||||
$target = $(target);
|
||||
|
||||
if ($target.hasClass('runCode')) {
|
||||
$('#' + target.name).runCode();
|
||||
};
|
||||
});
|
||||
|
||||
// 跳转到头部
|
||||
var $footer = $('#footer');
|
||||
if (!$footer[0]) return;
|
||||
$footer.bind('click', function () {
|
||||
window.scrollTo(0, 0);
|
||||
return false;
|
||||
}).css('cursor', 'pointer')[0].title = '回到页头';
|
||||
});
|
||||
|
||||
// 皮肤选择
|
||||
window._demoSkin = function () {
|
||||
art.dialog({
|
||||
id: 'demoSkin',
|
||||
padding: '15px',
|
||||
title: 'artDialog皮肤展示',
|
||||
content: _demoSkin.tmpl
|
||||
});
|
||||
};
|
||||
_demoSkin.tmpl = function (data) {
|
||||
var html = ['<table class="zebra" style="width:480px"><tbody>'];
|
||||
for (var i = 0, length = data.length; i < length; i ++) {
|
||||
html.push('<tr class="');
|
||||
html.push(i%2 ? 'odd' : '');
|
||||
html.push('"><th style="width:7em"><a href="?demoSkin=');
|
||||
html.push(data[i].name);
|
||||
html.push('">');
|
||||
html.push(data[i].name);
|
||||
html.push('</a></th><td>');
|
||||
html.push(data[i].about);
|
||||
html.push('</td></tr>');
|
||||
};
|
||||
html.push('</tbody></table>');
|
||||
return html.join('');
|
||||
}([
|
||||
{name: 'default', about: 'artDialog默认皮肤，简洁，纯CSS设计，无图片，采用css3渐进增强'},
|
||||
{name: 'aero', about: 'artDialog 2+标志性的皮肤，windows7毛玻璃风格。提供PSD源文件 <a href="http://code.google.com/p/artdialog/downloads/detail?name=aero.psd&can=2&q=" target="_blank">下载</a>'},
|
||||
{name: 'chrome', about: 'chrome浏览器(xp)风格'},
|
||||
{name: 'opera', about: 'opera 11浏览器内置对话框风格'},
|
||||
{name: 'simple', about: '简单风格，无图片，不显示标题'},
|
||||
{name: 'idialog', about: '苹果风格，iPad Safari或Mac Safari关闭按钮将在左边显示'},
|
||||
{name: 'twitter', about: 'twitter风格，无图片'},
|
||||
{name: 'blue', about: '蓝色风格'},
|
||||
{name: 'black', about: '黑色风格'},
|
||||
{name: 'green', about: '绿色风格'}
|
||||
]);
|
||||
|
||||
$(function () {
|
||||
var $skin = $('#nav-skin');
|
||||
if (!$skin[0]) return;
|
||||
|
||||
$skin.bind('click', function () {
|
||||
_demoSkin();
|
||||
return false;
|
||||
});
|
||||
|
||||
// 点亮导航
|
||||
var links = $('#nav')[0].getElementsByTagName("a"),
|
||||
URL = document.URL.split('#')[0],
|
||||
last = URL.charAt(URL.length - 1);
|
||||
|
||||
if (last === '/') {
|
||||
links[0].className += ' select';
|
||||
} else {
|
||||
for (var i=0; i<links.length; i++) {
|
||||
if (URL.toLowerCase().indexOf(links[i].href.toLowerCase()) !== -1) {
|
||||
links[i].className += ' select';
|
||||
};
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
||||
// firebug
|
||||
(function () {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = 'https://getfirebug.com/firebug-lite.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
// google-analytics
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-19823759-2']);
|
||||
_gaq.push(['_setDomainName', '.planeart.cn']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="demo.js"></script>
|
||||
<script src="highlight/highlight.pack.js"></script>
|
||||
<script src="highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="highlight/styles/magula.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="../index.html">artDialog</a></h1>
|
||||
<ul id="nav" class="nav">
|
||||
<li><a href="../index.html" class="home">首页</a></li>
|
||||
<li><a href="./API.html" class="api">文档</a></li>
|
||||
<li><a href="./down.html" class="down">下载</a></li>
|
||||
<li><a href="./log.html" class="log">更新</a></li>
|
||||
<li><a href="./labs.html" class="labs">实验</a></li>
|
||||
<li><a href="./license.html" class="license">授权</a></li>
|
||||
|
|
||||
<li><a href="#" id="nav-skin">皮肤</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h2 id="down">下载</h2>
|
||||
<div style="margin:0; padding:5px; background:#EEF7F5; color:#000;padding:15px; border-radius:3px; border:1px solid #D7EAE2; ">
|
||||
<h3>artDialog4+最新版本</h3>
|
||||
<p><a href="http://code.google.com/p/artdialog/downloads/list" target="_blank">http://code.google.com/p/artdialog/downloads/list</a></p>
|
||||
<h3>artDialog5+最新版本</h3>
|
||||
<p><a href="https://github.com/aui/artDialog">https://github.com/aui/artDialog</a></p>
|
||||
<p><span style="color:#DFB113">注意！</span>不再支持iframe，代码迁移至github托管。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>frameset</title>
|
||||
</head>
|
||||
<frameset rows="40,*" frameborder="no" border="0" framespacing="0">
|
||||
<frame src="topFrame.html" name="topFrame" scrolling="no" noresize="noresize" id="topFrame" title="topFrame" />
|
||||
<frame src="plugin.iframe.html" name="mainFrame" id="mainFrame" title="mainFrame" />
|
||||
</frameset>
|
||||
<noframes><body>
|
||||
</body></noframes>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||||
<style>
|
||||
html { height: 100% }
|
||||
body { height: 100%; margin: 0; padding: 0; background-color: #FFF }
|
||||
#map_canvas { height: 100% }
|
||||
</style>
|
||||
<script src="../artDialog.source.js"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>
|
||||
<script>
|
||||
var map, geocoder;
|
||||
function initialize() {
|
||||
var latlng = new google.maps.LatLng(39.904214, 116.407413);
|
||||
var options = {
|
||||
zoom: 11,
|
||||
center: latlng,
|
||||
disableDefaultUI: true,
|
||||
panControl: true,
|
||||
zoomControl: true,
|
||||
mapTypeControl: true,
|
||||
scaleControl: true,
|
||||
streetViewControl: false,
|
||||
overviewMapControl: true,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
map = new google.maps.Map(document.getElementById("map_canvas"), options);
|
||||
geocoder = new google.maps.Geocoder();
|
||||
geocoder.geocode({latLng: latlng}, function(results, status) {
|
||||
if (status == google.maps.GeocoderStatus.OK) {
|
||||
if (results[3]) {
|
||||
document.getElementById("map_address").value = results[3].formatted_address;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var dialog = art.dialog.open.api;
|
||||
dialog.title('google mpas')
|
||||
.size(558, 360)
|
||||
.button({name: '截图', callback: function () {
|
||||
var center = map.getCenter().lat() + ',' + map.getCenter().lng(),
|
||||
zoom = map.getZoom(),
|
||||
maptype = map.getMapTypeId(),
|
||||
url = 'http://maps.googleapis.com/maps/api/staticmap';
|
||||
url += '?center=' + encodeURIComponent(center);
|
||||
url += '&zoom=' + encodeURIComponent(zoom);
|
||||
url += '&size=558x360';
|
||||
url += '&maptype=' + encodeURIComponent(maptype);
|
||||
url += '&markers=' + encodeURIComponent(center);
|
||||
url += '&language=zh_CN';
|
||||
url += '&sensor=false';
|
||||
|
||||
art.dialog.through({title: false, content: '<img src="' + url + '" />', padding: 0, width: 558, height: 360, lock: true});
|
||||
|
||||
return false;
|
||||
}, focus: true})
|
||||
.position('50%', 'goldenRatio');
|
||||
|
||||
document.getElementById("map-search-sumbit").onclick = function () {
|
||||
var input = document.getElementById('map_address');
|
||||
search(input.value);
|
||||
};
|
||||
}
|
||||
function search(address) {
|
||||
if (!map) return;
|
||||
geocoder.geocode({address : address}, function(results, status) {
|
||||
if (status == google.maps.GeocoderStatus.OK) {
|
||||
map.setZoom(11);
|
||||
map.setCenter(results[0].geometry.location);
|
||||
var marker = new google.maps.Marker({
|
||||
map: map,
|
||||
position: results[0].geometry.location
|
||||
});
|
||||
} else {
|
||||
alert("Invalid address: " + address);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="initialize();" style="font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial;">
|
||||
<div style="width:100%; height:100%">
|
||||
<table style="width:100%;height:100%;">
|
||||
<tr>
|
||||
<td style="height:38px"><div style="margin:5px;">地址: <input id="map_address" value="" style="width:200px; padding:4px;"> <button id="map-search-sumbit">搜 索</button></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="height:100%"><div id="map_canvas" style="height:100%; margin:0 5px"></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title></title>
|
||||
<style>
|
||||
html, body { }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:380px; height:380px; background:#F00; color:#FFF; text-align:center">hello artDialog</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
Syntax highlighting with language autodetection.
|
||||
|
||||
URL: http://softwaremaniacs.org/soft/highlight/en/
|
||||
|
||||
Original author and current maintainer:
|
||||
Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
|
||||
|
||||
Contributors:
|
||||
|
||||
- Peter Leonov <gojpeg@gmail.com>
|
||||
- Victor Karamzin <Victor.Karamzin@enterra-inc.com>
|
||||
- Vsevolod Solovyov <vsevolod.solovyov@gmail.com>
|
||||
- Anton Kovalyov <anton@kovalyov.net>
|
||||
- Nikita Ledyaev <lenikita@yandex.ru>
|
||||
- Konstantin Evdokimenko <qewerty@gmail.com>
|
||||
- Dmitri Roudakov <dmitri@roudakov.ru>
|
||||
- Yuri Ivanov <ivanov@supersoft.ru>
|
||||
- Vladimir Ermakov <vooon341@mail.ru>
|
||||
- Vladimir Gubarkov <xonixx@gmail.com>
|
||||
- Brian Beck <exogen@gmail.com>
|
||||
- MajestiC <majestic2k@gmail.com>
|
||||
- Vasily Polovnyov <vast@whiteants.net>
|
||||
- Vladimir Epifanov <voldmar@voldmar.ru>
|
||||
- Alexander Makarov (http://rmcreative.ru/)
|
||||
- Vah <vahtenberg@gmail.com>
|
||||
- Shuen-Huei Guan <drake.guan@gmail.com>
|
||||
- Jason Diamond <jason@diamond.name>
|
||||
- Michal Gabrukiewicz <mgabru@gmail.com>
|
||||
- Ruslan Keba <rukeba@gmail.com>
|
||||
- Sergey Baranov <segyrn@yandex.ru>
|
||||
- Zaripov Yura <yur4ik7@ukr.net>
|
||||
- Oleg Volchkov <oleg@volchkov.net>
|
||||
- Vasily Mikhailitchenko <vaskas@programica.ru>
|
||||
- Jan Berkel <jan.berkel@gmail.com>
|
||||
- Vladimir Moskva <vladmos@gmail.com>
|
||||
- Loren Segal <lsegal@soen.ca>
|
||||
- Andrew Fedorov <dmmdrs@mail.ru>
|
||||
@@ -0,0 +1,24 @@
|
||||
Copyright (c) 2006, Ivan Sagalaev
|
||||
All rights reserved.
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright
|
||||
notice, this list of conditions and the following disclaimer in the
|
||||
documentation and/or other materials provided with the distribution.
|
||||
* Neither the name of highlight.js nor the names of its contributors
|
||||
may be used to endorse or promote products derived from this software
|
||||
without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE REGENTS AND CONTRIBUTORS ``AS IS'' AND ANY
|
||||
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE REGENTS AND CONTRIBUTORS BE LIABLE FOR ANY
|
||||
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
@@ -0,0 +1,115 @@
|
||||
<!-- saved from url=(0013)about:internet -->
|
||||
<!-- ^^^ This is for IE not to show security warning for local files,
|
||||
see http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx-->
|
||||
|
||||
<!--
|
||||
Highlighted code export
|
||||
Copyright (c) Vladimir Gubarkov <xonixx@gmail.com>
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Highlited code export</title>
|
||||
<link rel="stylesheet" href="styles/default.css">
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
#t1, #t2 { width: 100%;}
|
||||
tr { vertical-align: top; }
|
||||
address { margin-top: 4em; }
|
||||
</style>
|
||||
<script src="highlight.js"></script>
|
||||
<script src="languages/cs.js"></script>
|
||||
<script src="languages/python.js"></script>
|
||||
<script src="languages/mel.js"></script>
|
||||
<script src="languages/perl.js"></script>
|
||||
<script src="languages/axapta.js"></script>
|
||||
<script src="languages/cpp.js"></script>
|
||||
<script src="languages/sql.js"></script>
|
||||
<script src="languages/smalltalk.js"></script>
|
||||
<script src="languages/profile.js"></script>
|
||||
<script src="languages/bash.js"></script>
|
||||
<script src="languages/html-xml.js"></script>
|
||||
<script src="languages/renderman.js"></script>
|
||||
<script src="languages/1c.js"></script>
|
||||
<script src="languages/delphi.js"></script>
|
||||
<script src="languages/dos.js"></script>
|
||||
<script src="languages/django.js"></script>
|
||||
<script src="languages/vbscript.js"></script>
|
||||
<script src="languages/ini.js"></script>
|
||||
<script src="languages/apache.js"></script>
|
||||
<script src="languages/ruby.js"></script>
|
||||
<script src="languages/css.js"></script>
|
||||
<script src="languages/lisp.js"></script>
|
||||
<script src="languages/java.js"></script>
|
||||
<script src="languages/javascript.js"></script>
|
||||
<script src="languages/php.js"></script>
|
||||
<script src="languages/diff.js"></script>
|
||||
<script src="languages/avrasm.js"></script>
|
||||
<script src="languages/parser3.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
String.prototype.escape = function() {
|
||||
return this.replace(/&/gm, '&').replace(/</gm, '<').replace(/>/gm, '>');
|
||||
}
|
||||
|
||||
function doIt() {
|
||||
var viewDiv = document.getElementById("highlight-view");
|
||||
var t1 = document.getElementById("t1");
|
||||
var t2 = document.getElementById("t2");
|
||||
var selector = document.getElementById("langSelector");
|
||||
var selectedLang = selector.options[selector.selectedIndex].value.toLowerCase();
|
||||
if(selectedLang) {
|
||||
viewDiv.innerHTML = '<pre><code class="'+selectedLang+'">'+t1.value.escape()+"</code></pre>";
|
||||
} else { // try auto
|
||||
viewDiv.innerHTML = '<pre><code>' + t1.value.escape() + "</code></pre>";
|
||||
}
|
||||
hljs.highlightBlock(viewDiv.firstChild.firstChild);
|
||||
t2.value = viewDiv.innerHTML;
|
||||
}
|
||||
|
||||
function copyToBuffer(textToCopy) {
|
||||
if (window.clipboardData) { // IE
|
||||
window.clipboardData.setData("Text", textToCopy);
|
||||
} else if (window.netscape) { // FF
|
||||
// from http://developer.mozilla.org/en/docs/Using_the_Clipboard
|
||||
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
|
||||
var gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
|
||||
gClipboardHelper.copyString(textToCopy);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
var langSelectorHtml = '<label>Language <select id="langSelector">';
|
||||
langSelectorHtml += '<option value="">Auto</option>';
|
||||
for (var i in hljs.LANGUAGES) {
|
||||
if (hljs.LANGUAGES.hasOwnProperty(i))
|
||||
langSelectorHtml += '<option value=\"'+i+'\">'+i.charAt(0).toUpperCase()+i.substr(1)+'</option>';
|
||||
}
|
||||
langSelectorHtml += '</select></label>';
|
||||
document.write(langSelectorHtml);
|
||||
</script>
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td><textarea rows="20" cols="50" id="t1"></textarea></td>
|
||||
<td><textarea rows="20" cols="50" id="t2"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Write a code snippet</td>
|
||||
<td>Get HTML to paste anywhere (for actual styles and colors see sample.css)</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table width="98%">
|
||||
<tr>
|
||||
<td><input type="button" value="Export →" onclick="doIt()"/></td>
|
||||
<td align="right"><input type="button" value="Copy to buffer" onclick="copyToBuffer(document.getElementById('t2').value);"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="highlight-view"></div>
|
||||
<address>
|
||||
Export script: <a href="mailto:xonixx@gmail.com">Vladimir Gubarkov</a><br>
|
||||
Highlighting: <a href="http://softwaremaniacs.org/soft/highlight/">highlight.js</a>
|
||||
</address>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,578 @@
|
||||
/*
|
||||
Syntax highlighting with language autodetection.
|
||||
http://softwaremaniacs.org/soft/highlight/
|
||||
*/
|
||||
|
||||
var hljs = new function() {
|
||||
var LANGUAGES = {};
|
||||
var selected_languages = {};
|
||||
function escape(value) {
|
||||
return value.replace(/&/gm, '&').replace(/</gm, '<').replace(/>/gm, '>');
|
||||
};
|
||||
|
||||
function contains(array, item) {
|
||||
if (!array)
|
||||
return false;
|
||||
for (var i = 0; i < array.length; i++)
|
||||
if (array[i] == item) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
function langRe(language, value, global) {
|
||||
var mode = 'm' + (language.case_insensitive ? 'i' : '') + (global ? 'g' : '');
|
||||
return new RegExp(value, mode);
|
||||
};
|
||||
|
||||
function findCode(pre) {
|
||||
var node;
|
||||
for (var i = 0; i < pre.childNodes.length; i++) {
|
||||
node = pre.childNodes[i];
|
||||
if (node.nodeName == 'CODE')
|
||||
return node;
|
||||
if (!(node.nodeType == 3 && node.nodeValue.match(/\s+/)))
|
||||
return null;
|
||||
};
|
||||
};
|
||||
|
||||
function blockText(block) {
|
||||
var result = '';
|
||||
for (var i = 0; i < block.childNodes.length; i++)
|
||||
if (block.childNodes[i].nodeType == 3)
|
||||
result += block.childNodes[i].nodeValue;
|
||||
else if (block.childNodes[i].nodeName == 'BR')
|
||||
result += '\n';
|
||||
else
|
||||
result += blockText(block.childNodes[i]);
|
||||
return result;
|
||||
};
|
||||
|
||||
function blockLanguage(block) {
|
||||
var classes = block.className.split(/\s+/);
|
||||
classes = classes.concat(block.parentNode.className.split(/\s+/));
|
||||
for (var i = 0; i < classes.length; i++) {
|
||||
var class_ = classes[i].replace(/^language-/, '');
|
||||
if (class_ == 'no-highlight') {
|
||||
throw 'No highlight'
|
||||
};
|
||||
if (LANGUAGES[class_]) {
|
||||
return class_;
|
||||
};
|
||||
};
|
||||
};
|
||||
function nodeStream(node) {
|
||||
var result = [];
|
||||
(function (node, offset) {
|
||||
for (var i = 0; i < node.childNodes.length; i++) {
|
||||
if (node.childNodes[i].nodeType == 3)
|
||||
offset += node.childNodes[i].nodeValue.length;
|
||||
else if (node.childNodes[i].nodeName == 'BR')
|
||||
offset += 1;
|
||||
else {
|
||||
result.push({
|
||||
event: 'start',
|
||||
offset: offset,
|
||||
node: node.childNodes[i]
|
||||
});
|
||||
offset = arguments.callee(node.childNodes[i], offset);
|
||||
result.push({
|
||||
event: 'stop',
|
||||
offset: offset,
|
||||
node: node.childNodes[i]
|
||||
});
|
||||
};
|
||||
};
|
||||
return offset;
|
||||
})(node, 0);
|
||||
return result;
|
||||
};
|
||||
|
||||
function mergeStreams(stream1, stream2, value) {
|
||||
var processed = 0;
|
||||
var result = '';
|
||||
var nodeStack = [];
|
||||
|
||||
function selectStream() {
|
||||
if (stream1.length && stream2.length) {
|
||||
if (stream1[0].offset != stream2[0].offset)
|
||||
return (stream1[0].offset < stream2[0].offset) ? stream1 : stream2;
|
||||
else
|
||||
return (stream1[0].event == 'start' && stream2[0].event == 'stop') ? stream2 : stream1;
|
||||
} else {
|
||||
return stream1.length ? stream1 : stream2;
|
||||
};
|
||||
};
|
||||
|
||||
function open(node) {
|
||||
var result = '<' + node.nodeName.toLowerCase();
|
||||
for (var i = 0; i < node.attributes.length; i++) {
|
||||
var attribute = node.attributes[i];
|
||||
result += ' ' + attribute.nodeName.toLowerCase();
|
||||
if (attribute.nodeValue != undefined) {
|
||||
result += '="' + escape(attribute.nodeValue) + '"';
|
||||
};
|
||||
};
|
||||
return result + '>';
|
||||
};
|
||||
|
||||
function close(node) {
|
||||
return '</' + node.nodeName.toLowerCase() + '>';
|
||||
};
|
||||
|
||||
while (stream1.length || stream2.length) {
|
||||
var current = selectStream().splice(0, 1)[0];
|
||||
result += escape(value.substr(processed, current.offset - processed));
|
||||
processed = current.offset;
|
||||
if ( current.event == 'start') {
|
||||
result += open(current.node);
|
||||
nodeStack.push(current.node);
|
||||
} else if (current.event == 'stop') {
|
||||
var i = nodeStack.length;
|
||||
do {
|
||||
i--;
|
||||
var node = nodeStack[i];
|
||||
result += close(node);
|
||||
} while (node != current.node);
|
||||
nodeStack.splice(i, 1);
|
||||
while (i < nodeStack.length) {
|
||||
result += open(nodeStack[i]);
|
||||
i++;
|
||||
};
|
||||
};
|
||||
};
|
||||
result += value.substr(processed);
|
||||
return result;
|
||||
};
|
||||
function highlight(language_name, value) {
|
||||
function compileSubModes(mode, language) {
|
||||
mode.sub_modes = [];
|
||||
for (var i = 0; i < mode.contains.length; i++) {
|
||||
for (var j = 0; j < language.modes.length; j++) {
|
||||
if (language.modes[j].className == mode.contains[i]) {
|
||||
mode.sub_modes[mode.sub_modes.length] = language.modes[j];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
function subMode(lexem, mode) {
|
||||
if (!mode.contains) {
|
||||
return null;
|
||||
};
|
||||
if (!mode.sub_modes) {
|
||||
compileSubModes(mode, language);
|
||||
};
|
||||
for (var i = 0; i < mode.sub_modes.length; i++) {
|
||||
if (mode.sub_modes[i].beginRe.test(lexem)) {
|
||||
return mode.sub_modes[i];
|
||||
};
|
||||
};
|
||||
return null;
|
||||
};
|
||||
|
||||
function endOfMode(mode_index, lexem) {
|
||||
if (modes[mode_index].end && modes[mode_index].endRe.test(lexem))
|
||||
return 1;
|
||||
if (modes[mode_index].endsWithParent) {
|
||||
var level = endOfMode(mode_index - 1, lexem);
|
||||
return level ? level + 1 : 0;
|
||||
};
|
||||
return 0;
|
||||
};
|
||||
|
||||
function isIllegal(lexem, mode) {
|
||||
return mode.illegalRe && mode.illegalRe.test(lexem);
|
||||
};
|
||||
|
||||
function compileTerminators(mode, language) {
|
||||
var terminators = [];
|
||||
|
||||
function addTerminator(re) {
|
||||
if (!contains(terminators, re)) {
|
||||
terminators[terminators.length] = re;
|
||||
};
|
||||
};
|
||||
|
||||
if (mode.contains)
|
||||
for (var i = 0; i < language.modes.length; i++) {
|
||||
if (contains(mode.contains, language.modes[i].className)) {
|
||||
addTerminator(language.modes[i].begin);
|
||||
};
|
||||
};
|
||||
|
||||
var index = modes.length - 1;
|
||||
do {
|
||||
if (modes[index].end) {
|
||||
addTerminator(modes[index].end);
|
||||
};
|
||||
index--;
|
||||
} while (modes[index + 1].endsWithParent);
|
||||
|
||||
if (mode.illegal) {
|
||||
addTerminator(mode.illegal);
|
||||
};
|
||||
|
||||
var terminator_re = '(' + terminators[0];
|
||||
for (var i = 0; i < terminators.length; i++)
|
||||
terminator_re += '|' + terminators[i];
|
||||
terminator_re += ')';
|
||||
return langRe(language, terminator_re);
|
||||
};
|
||||
|
||||
function eatModeChunk(value, index) {
|
||||
var mode = modes[modes.length - 1];
|
||||
if (!mode.terminators) {
|
||||
mode.terminators = compileTerminators(mode, language);
|
||||
};
|
||||
value = value.substr(index);
|
||||
var match = mode.terminators.exec(value);
|
||||
if (!match)
|
||||
return [value, '', true];
|
||||
if (match.index == 0)
|
||||
return ['', match[0], false];
|
||||
else
|
||||
return [value.substr(0, match.index), match[0], false];
|
||||
};
|
||||
|
||||
function keywordMatch(mode, match) {
|
||||
var match_str = language.case_insensitive ? match[0].toLowerCase() : match[0];
|
||||
for (var className in mode.keywordGroups) {
|
||||
if (!mode.keywordGroups.hasOwnProperty(className))
|
||||
continue;
|
||||
var value = mode.keywordGroups[className].hasOwnProperty(match_str);
|
||||
if (value)
|
||||
return [className, value];
|
||||
};
|
||||
return false;
|
||||
};
|
||||
|
||||
function processKeywords(buffer, mode) {
|
||||
if (!mode.keywords || !mode.lexems)
|
||||
return escape(buffer);
|
||||
if (!mode.lexemsRe) {
|
||||
var lexems_re = '(' + mode.lexems[0];
|
||||
for (var i = 1; i < mode.lexems.length; i++)
|
||||
lexems_re += '|' + mode.lexems[i];
|
||||
lexems_re += ')';
|
||||
mode.lexemsRe = langRe(language, lexems_re, true);
|
||||
};
|
||||
var result = '';
|
||||
var last_index = 0;
|
||||
mode.lexemsRe.lastIndex = 0;
|
||||
var match = mode.lexemsRe.exec(buffer);
|
||||
while (match) {
|
||||
result += escape(buffer.substr(last_index, match.index - last_index));
|
||||
var keyword_match = keywordMatch(mode, match);
|
||||
if (keyword_match) {
|
||||
keyword_count += keyword_match[1];
|
||||
result += '<span class="'+ keyword_match[0] +'">' + escape(match[0]) + '</span>';
|
||||
} else {
|
||||
result += escape(match[0]);
|
||||
};
|
||||
last_index = mode.lexemsRe.lastIndex;
|
||||
match = mode.lexemsRe.exec(buffer);
|
||||
};
|
||||
result += escape(buffer.substr(last_index, buffer.length - last_index));
|
||||
return result;
|
||||
};
|
||||
|
||||
function processBuffer(buffer, mode) {
|
||||
if (mode.subLanguage && selected_languages[mode.subLanguage]) {
|
||||
var result = highlight(mode.subLanguage, buffer);
|
||||
keyword_count += result.keyword_count;
|
||||
relevance += result.relevance;
|
||||
return result.value;
|
||||
} else {
|
||||
return processKeywords(buffer, mode);
|
||||
};
|
||||
};
|
||||
|
||||
function startNewMode(mode, lexem) {
|
||||
var markup = mode.noMarkup?'':'<span class="' + mode.displayClassName + '">';
|
||||
if (mode.returnBegin) {
|
||||
result += markup;
|
||||
mode.buffer = '';
|
||||
} else if (mode.excludeBegin) {
|
||||
result += escape(lexem) + markup;
|
||||
mode.buffer = '';
|
||||
} else {
|
||||
result += markup;
|
||||
mode.buffer = lexem;
|
||||
};
|
||||
modes[modes.length] = mode;
|
||||
};
|
||||
|
||||
function processModeInfo(buffer, lexem, end) {
|
||||
var current_mode = modes[modes.length - 1];
|
||||
if (end) {
|
||||
result += processBuffer(current_mode.buffer + buffer, current_mode);
|
||||
return false;
|
||||
};
|
||||
|
||||
var new_mode = subMode(lexem, current_mode);
|
||||
if (new_mode) {
|
||||
result += processBuffer(current_mode.buffer + buffer, current_mode);
|
||||
startNewMode(new_mode, lexem);
|
||||
relevance += new_mode.relevance;
|
||||
return new_mode.returnBegin;
|
||||
};
|
||||
|
||||
var end_level = endOfMode(modes.length - 1, lexem);
|
||||
if (end_level) {
|
||||
var markup = current_mode.noMarkup?'':'</span>';
|
||||
if (current_mode.returnEnd) {
|
||||
result += processBuffer(current_mode.buffer + buffer, current_mode) + markup;
|
||||
} else if (current_mode.excludeEnd) {
|
||||
result += processBuffer(current_mode.buffer + buffer, current_mode) + markup + escape(lexem);
|
||||
} else {
|
||||
result += processBuffer(current_mode.buffer + buffer + lexem, current_mode) + markup;
|
||||
};
|
||||
while (end_level > 1) {
|
||||
markup = modes[modes.length - 2].noMarkup?'':'</span>';
|
||||
result += markup;
|
||||
end_level--;
|
||||
modes.length--;
|
||||
};
|
||||
modes.length--;
|
||||
modes[modes.length - 1].buffer = '';
|
||||
if (current_mode.starts) {
|
||||
for (var i = 0; i < language.modes.length; i++) {
|
||||
if (language.modes[i].className == current_mode.starts) {
|
||||
startNewMode(language.modes[i], '');
|
||||
break;
|
||||
};
|
||||
};
|
||||
};
|
||||
return current_mode.returnEnd;
|
||||
};
|
||||
|
||||
if (isIllegal(lexem, current_mode))
|
||||
throw 'Illegal';
|
||||
};
|
||||
|
||||
var language = LANGUAGES[language_name];
|
||||
var modes = [language.defaultMode];
|
||||
var relevance = 0;
|
||||
var keyword_count = 0;
|
||||
var result = '';
|
||||
try {
|
||||
var index = 0;
|
||||
language.defaultMode.buffer = '';
|
||||
do {
|
||||
var mode_info = eatModeChunk(value, index);
|
||||
var return_lexem = processModeInfo(mode_info[0], mode_info[1], mode_info[2]);
|
||||
index += mode_info[0].length;
|
||||
if (!return_lexem) {
|
||||
index += mode_info[1].length;
|
||||
};
|
||||
} while (!mode_info[2]);
|
||||
if(modes.length > 1)
|
||||
throw 'Illegal';
|
||||
return {
|
||||
relevance: relevance,
|
||||
keyword_count: keyword_count,
|
||||
value: result
|
||||
};
|
||||
} catch (e) {
|
||||
if (e == 'Illegal') {
|
||||
return {
|
||||
relevance: 0,
|
||||
keyword_count: 0,
|
||||
value: escape(value)
|
||||
};
|
||||
} else {
|
||||
throw e;
|
||||
};
|
||||
};
|
||||
};
|
||||
function compileModes() {
|
||||
for (var i in LANGUAGES) {
|
||||
if (!LANGUAGES.hasOwnProperty(i))
|
||||
continue;
|
||||
var language = LANGUAGES[i];
|
||||
for (var j = 0; j < language.modes.length; j++) {
|
||||
var mode = language.modes[j];
|
||||
if (mode.begin)
|
||||
mode.beginRe = langRe(language, '^' + mode.begin);
|
||||
if (mode.end)
|
||||
mode.endRe = langRe(language, '^' + mode.end);
|
||||
if (mode.illegal)
|
||||
mode.illegalRe = langRe(language, '^(?:' + mode.illegal + ')');
|
||||
language.defaultMode.illegalRe = langRe(language, '^(?:' + language.defaultMode.illegal + ')');
|
||||
if (mode.relevance == undefined) {
|
||||
mode.relevance = 1;
|
||||
};
|
||||
if (!mode.displayClassName) {
|
||||
mode.displayClassName = mode.className;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
function compileKeywords() {
|
||||
|
||||
function compileModeKeywords(mode) {
|
||||
if (!mode.keywordGroups) {
|
||||
for (var key in mode.keywords) {
|
||||
if (!mode.keywords.hasOwnProperty(key))
|
||||
continue;
|
||||
if (mode.keywords[key] instanceof Object)
|
||||
mode.keywordGroups = mode.keywords;
|
||||
else
|
||||
mode.keywordGroups = {'keyword': mode.keywords};
|
||||
break;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
for (var i in LANGUAGES) {
|
||||
if (!LANGUAGES.hasOwnProperty(i))
|
||||
continue;
|
||||
var language = LANGUAGES[i];
|
||||
compileModeKeywords(language.defaultMode);
|
||||
for (var j = 0; j < language.modes.length; j++) {
|
||||
compileModeKeywords(language.modes[j]);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
function initialize() {
|
||||
if (initialize.called)
|
||||
return;
|
||||
initialize.called = true;
|
||||
compileModes();
|
||||
compileKeywords();
|
||||
selected_languages = LANGUAGES;
|
||||
};
|
||||
function highlightBlock(block, tabReplace) {
|
||||
initialize();
|
||||
|
||||
try {
|
||||
var text = blockText(block);
|
||||
var language = blockLanguage(block);
|
||||
} catch (e) {
|
||||
if (e == 'No highlight')
|
||||
return;
|
||||
};
|
||||
|
||||
if (language) {
|
||||
var result = highlight(language, text).value;
|
||||
} else {
|
||||
var max_relevance = 0;
|
||||
for (var key in selected_languages) {
|
||||
if (!selected_languages.hasOwnProperty(key))
|
||||
continue;
|
||||
var lang_result = highlight(key, text);
|
||||
var relevance = lang_result.keyword_count + lang_result.relevance;
|
||||
if (relevance > max_relevance) {
|
||||
max_relevance = relevance;
|
||||
var result = lang_result.value;
|
||||
language = key;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
if (result) {
|
||||
var class_name = block.className;
|
||||
if (!class_name.match(language)) {
|
||||
class_name += ' ' + language;
|
||||
};
|
||||
var original = nodeStream(block);
|
||||
if (original.length) {
|
||||
var pre = document.createElement('pre');
|
||||
pre.innerHTML = result;
|
||||
result = mergeStreams(original, nodeStream(pre), text);
|
||||
};
|
||||
if (tabReplace) {
|
||||
result = result.replace(/^((<[^>]+>|\t)+)/gm, function(match, p1, offset, s) {
|
||||
return p1.replace(/\t/g, tabReplace);
|
||||
});
|
||||
};
|
||||
var container = document.createElement('div');
|
||||
container.innerHTML = '<pre><code class="' + class_name + '">' + result + '</code></pre>';
|
||||
var environment = block.parentNode.parentNode;
|
||||
environment.replaceChild(container.firstChild, block.parentNode);
|
||||
};
|
||||
};
|
||||
|
||||
function initHighlighting() {
|
||||
if (initHighlighting.called)
|
||||
return;
|
||||
initHighlighting.called = true;
|
||||
initialize();
|
||||
if (arguments.length) {
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
if (LANGUAGES[arguments[i]]) {
|
||||
selected_languages[arguments[i]] = LANGUAGES[arguments[i]];
|
||||
};
|
||||
};
|
||||
};
|
||||
var pres = document.getElementsByTagName('pre');
|
||||
for (var i = 0; i < pres.length; i++) {
|
||||
var code = findCode(pres[i]);
|
||||
if (code)
|
||||
highlightBlock(code, hljs.tabReplace);
|
||||
};
|
||||
};
|
||||
|
||||
function initHighlightingOnLoad() {
|
||||
var original_arguments = arguments;
|
||||
var handler = function(){initHighlighting.apply(null, original_arguments)};
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('DOMContentLoaded', handler, false);
|
||||
window.addEventListener('load', handler, false);
|
||||
} else if (window.attachEvent)
|
||||
window.attachEvent('onload', handler);
|
||||
else
|
||||
window.onload = handler;
|
||||
};
|
||||
this.LANGUAGES = LANGUAGES;
|
||||
this.initHighlightingOnLoad = initHighlightingOnLoad;
|
||||
this.highlightBlock = highlightBlock;
|
||||
this.initHighlighting = initHighlighting;
|
||||
|
||||
this.IDENT_RE = '[a-zA-Z][a-zA-Z0-9_]*';
|
||||
this.UNDERSCORE_IDENT_RE = '[a-zA-Z_][a-zA-Z0-9_]*';
|
||||
this.NUMBER_RE = '\\b\\d+(\\.\\d+)?';
|
||||
this.C_NUMBER_RE = '\\b(0x[A-Za-z0-9]+|\\d+(\\.\\d+)?)';
|
||||
this.RE_STARTERS_RE = '!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~';
|
||||
|
||||
this.APOS_STRING_MODE = {
|
||||
className: 'string',
|
||||
begin: '\'', end: '\'',
|
||||
illegal: '\\n',
|
||||
contains: ['escape'],
|
||||
relevance: 0
|
||||
};
|
||||
this.QUOTE_STRING_MODE = {
|
||||
className: 'string',
|
||||
begin: '"', end: '"',
|
||||
illegal: '\\n',
|
||||
contains: ['escape'],
|
||||
relevance: 0
|
||||
};
|
||||
this.BACKSLASH_ESCAPE = {
|
||||
className: 'escape',
|
||||
begin: '\\\\.', end: '^', noMarkup: true,
|
||||
relevance: 0
|
||||
};
|
||||
this.C_LINE_COMMENT_MODE = {
|
||||
className: 'comment',
|
||||
begin: '//', end: '$',
|
||||
relevance: 0
|
||||
};
|
||||
this.C_BLOCK_COMMENT_MODE = {
|
||||
className: 'comment',
|
||||
begin: '/\\*', end: '\\*/'
|
||||
};
|
||||
this.HASH_COMMENT_MODE = {
|
||||
className: 'comment',
|
||||
begin: '#', end: '$'
|
||||
};
|
||||
this.C_NUMBER_MODE = {
|
||||
className: 'number',
|
||||
begin: this.C_NUMBER_RE, end: '^',
|
||||
relevance: 0
|
||||
};
|
||||
}();
|
||||
|
||||
var initHighlightingOnLoad = hljs.initHighlightingOnLoad;
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
Language: Javascript
|
||||
*/
|
||||
|
||||
hljs.LANGUAGES.javascript = {
|
||||
defaultMode: {
|
||||
lexems: [hljs.UNDERSCORE_IDENT_RE],
|
||||
contains: ['string', 'comment', 'number', 'regexp_container', 'function'],
|
||||
keywords: {
|
||||
'keyword': {'in': 1, 'if': 1, 'for': 1, 'while': 1, 'finally': 1, 'var': 1, 'new': 1, 'function': 1, 'do': 1, 'return': 1, 'void': 1, 'else': 1, 'break': 1, 'catch': 1, 'instanceof': 1, 'with': 1, 'throw': 1, 'case': 1, 'default': 1, 'try': 1, 'this': 1, 'switch': 1, 'continue': 1, 'typeof': 1, 'delete': 1},
|
||||
'literal': {'true': 1, 'false': 1, 'null': 1}
|
||||
}
|
||||
},
|
||||
modes: [
|
||||
hljs.C_LINE_COMMENT_MODE,
|
||||
hljs.C_BLOCK_COMMENT_MODE,
|
||||
hljs.C_NUMBER_MODE,
|
||||
hljs.APOS_STRING_MODE,
|
||||
hljs.QUOTE_STRING_MODE,
|
||||
hljs.BACKSLASH_ESCAPE,
|
||||
{
|
||||
className: 'regexp_container',
|
||||
begin: '(' + hljs.RE_STARTERS_RE + '|case|return|throw)\\s*', end: '^', noMarkup: true,
|
||||
lexems: [hljs.IDENT_RE],
|
||||
keywords: {'return': 1, 'throw': 1, 'case': 1},
|
||||
contains: ['comment', 'regexp'],
|
||||
relevance: 0
|
||||
},
|
||||
{
|
||||
className: 'regexp',
|
||||
begin: '/.*?[^\\\\/]/[gim]*', end: '^'
|
||||
},
|
||||
{
|
||||
className: 'function',
|
||||
begin: '\\bfunction\\b', end: '{',
|
||||
lexems: [hljs.UNDERSCORE_IDENT_RE],
|
||||
keywords: {'function': 1},
|
||||
contains: ['title', 'params']
|
||||
},
|
||||
{
|
||||
className: 'title',
|
||||
begin: '[A-Za-z$_][0-9A-Za-z$_]*', end: '^'
|
||||
},
|
||||
{
|
||||
className: 'params',
|
||||
begin: '\\(', end: '\\)',
|
||||
contains: ['string', 'comment']
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -0,0 +1,486 @@
|
||||
# Highlight.js
|
||||
|
||||
Highlight.js highlights syntax in code examples on blogs, forums and
|
||||
in fact on any web pages. It's very easy to use because it works
|
||||
automatically: finds blocks of code, detects a language, highlights it.
|
||||
|
||||
Autodetection can be fine tuned when it fails by itself (see "Heuristics").
|
||||
|
||||
|
||||
## Installation and usage
|
||||
|
||||
Downloaded package includes file "highlight.pack.js" which is a full compressed
|
||||
version of the library intended to use in production. All uncompressed source
|
||||
files are also available, feel free to look into them!
|
||||
|
||||
The script is installed by linking to a single file and making a single
|
||||
initialization call:
|
||||
|
||||
<script type="text/javascript" src="highlight.pack.js"></script>
|
||||
<script type="text/javascript">
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
||||
Also you can replaces TAB ('\x09') characters used for indentation in your code
|
||||
with some fixed number of spaces or with a `<span>` to set them special styling:
|
||||
|
||||
<script type="text/javascript">
|
||||
hljs.tabReplace = ' '; // 4 spaces
|
||||
// ... or
|
||||
hljs.tabReplace = '<span class="indent">\t</span>';
|
||||
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
|
||||
Then the script looks in your page for fragments `<pre><code>...</code></pre>`
|
||||
that are used traditionally to mark up code examples. Their content is
|
||||
marked up by logical pieces with defined class names.
|
||||
|
||||
|
||||
### Custom initialization
|
||||
|
||||
If you use different markup for code blocks you can initialize them manually
|
||||
with `highlightBlock(code, tabReplace)` function. It takes a DOM element
|
||||
containing the code to highlight and optionally a string with which to replace
|
||||
TAB characters.
|
||||
|
||||
Initialization using for example jQuery might look like this:
|
||||
|
||||
$(document).ready(function() {
|
||||
$('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')});
|
||||
});
|
||||
|
||||
|
||||
### Styling
|
||||
|
||||
Elements of code marked up with classes can be styled as desired:
|
||||
|
||||
.comment {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.python .string {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.html .atribute .value {
|
||||
color: green;
|
||||
}
|
||||
|
||||
Highligt.js comes with several style themes located in "styles" directory that
|
||||
can be used directly or as a base for your own experiments.
|
||||
|
||||
A full list of available classes is below ("Languages").
|
||||
|
||||
|
||||
## Export
|
||||
|
||||
File export.html contains a little program that shows and allows to copy and paste
|
||||
an HTML code generated by the highlighter for any code snippet. This can be useful
|
||||
in situations when one can't use the script itself on a site.
|
||||
|
||||
|
||||
## Languages
|
||||
|
||||
This is a full list of available classes corresponding to languages'
|
||||
syntactic structures. In parentheses after language names are identifiers
|
||||
used as class names in `<code>` element.
|
||||
|
||||
Python ("python"):
|
||||
|
||||
keyword keyword
|
||||
built_in built-in objects (None, False, True and Ellipsis)
|
||||
number number
|
||||
string string (of any type)
|
||||
comment comment
|
||||
decorator @-decorator for functions
|
||||
function function header "def some_name(...):"
|
||||
class class header "class SomeName(...):"
|
||||
title name of a function or a class inside a header
|
||||
params everything inside parentheses in a function's or class' header
|
||||
|
||||
Python profiler results ("profile"):
|
||||
|
||||
number number
|
||||
string string
|
||||
builtin builtin function entry
|
||||
filename filename in an entry
|
||||
summary profiling summary
|
||||
header header of table of results
|
||||
keyword column header
|
||||
function function name in an entry (including parentheses)
|
||||
title actual name of a function in an entry (excluding parentheses)
|
||||
|
||||
Ruby ("ruby"):
|
||||
|
||||
keyword keyword
|
||||
string string
|
||||
subst in-string substitution (#{...})
|
||||
comment comment
|
||||
yardoctag YARD tag
|
||||
function function header "def some_name(...):"
|
||||
class class header "class SomeName(...):"
|
||||
title name of a function or a class inside a header
|
||||
parent name of a parent class
|
||||
symbol symbol
|
||||
instancevar instance variable
|
||||
|
||||
Perl ("perl"):
|
||||
|
||||
keyword keyword
|
||||
comment comment
|
||||
number number
|
||||
string string
|
||||
regexp regular expression
|
||||
sub subroutine header (from "sub" till "{")
|
||||
variable variable starting with "$", "%", "@"
|
||||
operator operator
|
||||
pod plain old doc
|
||||
|
||||
PHP ("php"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string (of any type)
|
||||
comment comment
|
||||
phpdoc phpdoc params in comments
|
||||
variable variable starting with "$"
|
||||
preprocessor preprocessor marks: "<?php" and "?>"
|
||||
|
||||
Scala ("scala"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment comment
|
||||
annotaion annotation
|
||||
javadoc javadoc comment
|
||||
javadoctag @-tag in javadoc
|
||||
class class header
|
||||
title class name inside a header
|
||||
params everything in parentheses inside a class header
|
||||
inheritance keywords "extends" and "with" inside class header
|
||||
|
||||
XML ("xml"):
|
||||
|
||||
tag any tag from "<" till ">"
|
||||
comment comment
|
||||
pi processing instruction (<? ... ?>)
|
||||
cdata CDATA section
|
||||
attribute attribute
|
||||
value attribute's value
|
||||
|
||||
HTML ("html"):
|
||||
|
||||
keyword HTML tag
|
||||
tag any tag from "<" till ">"
|
||||
comment comment
|
||||
doctype <!DOCTYPE ... > declaration
|
||||
attribute tag's attribute with or without value
|
||||
value attribute's value
|
||||
|
||||
CSS ("css"):
|
||||
|
||||
keyword HTML tag when in selectors, CSS keyword when in rules
|
||||
id #some_name in selectors
|
||||
class .some_name in selectors
|
||||
at_rule @-rule till first "{" or ";"
|
||||
attr_selector attribute selector (square brackets in a[href^=http://])
|
||||
pseudo pseudo classes and elemens (:after, ::after etc.)
|
||||
comment comment
|
||||
rules everything from "{" till "}"
|
||||
value property's value inside a rule, from ":" till ";" or
|
||||
till the end of rule block
|
||||
number number within a value
|
||||
string string within a value
|
||||
hexcolor hex color (#FFFFFF) within a value
|
||||
function CSS function within a value
|
||||
params everything between "(" and ")" within a function
|
||||
|
||||
Django ("django"):
|
||||
|
||||
keyword HTML tag in HTML, default tags and default filters in templates
|
||||
tag any tag from "<" till ">"
|
||||
comment comment
|
||||
doctype <!DOCTYPE ... > declaration
|
||||
attribute tag's attribute with or withou value
|
||||
value attribute's value
|
||||
template_tag template tag {% .. %}
|
||||
variable template variable {{ .. }}
|
||||
template_comment template comment, both {# .. #} and {% comment %}
|
||||
filter filter from "|" till the next filter or the end of tag
|
||||
argument filter argument
|
||||
|
||||
Javascript ("javascript"):
|
||||
|
||||
keyword keyword
|
||||
comment comment
|
||||
number number
|
||||
literal special literal: "true", "false" and "null"
|
||||
string string
|
||||
regexp regular expression
|
||||
function header of a function
|
||||
title name of a function inside a header
|
||||
params everything inside parentheses in a function's header
|
||||
|
||||
VBScript ("vbscript"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment comment
|
||||
built_in built-in function
|
||||
|
||||
Lua ("lua"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment comment
|
||||
built_in built-in operator
|
||||
function header of a function
|
||||
title name of a function inside a header
|
||||
params everything inside parentheses in a function's header
|
||||
long_brackets multiline string in [=[ .. ]=]
|
||||
|
||||
Delphi ("delphi"):
|
||||
|
||||
keyword keyword
|
||||
comment comment (of any type)
|
||||
number number
|
||||
string string
|
||||
function header of a function, procedure, constructor and destructor
|
||||
title name of a function, procedure, constructor or destructor
|
||||
inside a header
|
||||
params everything inside parentheses in a function's header
|
||||
class class' body from "= class" till "end;"
|
||||
|
||||
Java ("java"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment commment
|
||||
annotaion annotation
|
||||
javadoc javadoc comment
|
||||
class class header from "class" till "{"
|
||||
title class name inside a header
|
||||
params everything in parentheses inside a class header
|
||||
inheritance keywords "extends" and "implements" inside class header
|
||||
|
||||
C++ ("cpp"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string and character
|
||||
comment comment
|
||||
preprocessor preprocessor directive
|
||||
stl_container instantiation of STL containers ("vector<...>")
|
||||
|
||||
C# ("cs"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment commment
|
||||
xmlDocTag xmldoc tag ("///", "<!--", "-->", "<..>")
|
||||
|
||||
RenderMan RSL ("rsl"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string (including @"..")
|
||||
comment comment
|
||||
preprocessor preprocessor directive
|
||||
shader sahder keywords
|
||||
shading shading keywords
|
||||
built_in built-in function
|
||||
|
||||
RenderMan RIB ("rib"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment comment
|
||||
commands command
|
||||
|
||||
Maya Embedded Language ("mel"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment comment
|
||||
variable variable
|
||||
|
||||
SQL ("sql"):
|
||||
|
||||
keyword keyword (mostly SQL'92 and SQL'99)
|
||||
number number
|
||||
string string (of any type: "..", '..', `..`)
|
||||
comment comment
|
||||
aggregate aggregate function
|
||||
|
||||
Smalltalk ("smalltalk"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment commment
|
||||
symbol symbol
|
||||
array array
|
||||
class name of a class
|
||||
char char
|
||||
localvars block of local variables
|
||||
|
||||
Lisp ("lisp"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment commment
|
||||
variable variable
|
||||
literal b, t and nil
|
||||
list non-quoted list
|
||||
title first symbol in a non-quoted list
|
||||
body remainder of the non-quoted list
|
||||
quoted_list quoted list, both "(quote .. )" and "'(..)"
|
||||
|
||||
Ini ("ini"):
|
||||
|
||||
title title of a section
|
||||
value value of a setting of any type
|
||||
string string
|
||||
number number
|
||||
keyword boolean value keyword
|
||||
|
||||
Apache ("apache"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
comment commment
|
||||
literal On and Off
|
||||
sqbracket variables in rewrites "%{..}"
|
||||
cbracket options in rewrites "[..]"
|
||||
tag begin and end of a configuration section
|
||||
|
||||
Nginx ("nginx"):
|
||||
|
||||
keyword keyword
|
||||
string string
|
||||
number number
|
||||
comment comment
|
||||
built_in built-in constant
|
||||
variable $-variable
|
||||
|
||||
DOS ("dos"):
|
||||
|
||||
keyword keyword
|
||||
flow batch control keyword
|
||||
stream DOS special files ("con", "prn", ...)
|
||||
winutils some commands (see dos.js specifically)
|
||||
envvar environment variables
|
||||
|
||||
Bash ("bash"):
|
||||
|
||||
keyword keyword
|
||||
string string
|
||||
number number
|
||||
comment comment
|
||||
literal special literal: "true" и "false"
|
||||
variable variable
|
||||
shebang script interpreter header
|
||||
|
||||
Diff ("diff"):
|
||||
|
||||
header file header
|
||||
chunk chunk header within a file
|
||||
addition added lines
|
||||
deletion deleted lines
|
||||
change changed lines
|
||||
|
||||
Axapta ("axapta"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
string string
|
||||
comment commment
|
||||
class class header from "class" till "{"
|
||||
title class name inside a header
|
||||
params everything in parentheses inside a class header
|
||||
inheritance keywords "extends" and "implements" inside class header
|
||||
preprocessor preprocessor directive
|
||||
|
||||
1C ("1c"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
date date
|
||||
string string
|
||||
comment commment
|
||||
function header of function or procudure
|
||||
title function name inside a header
|
||||
params everything in parentheses inside a function header
|
||||
preprocessor preprocessor directive
|
||||
|
||||
AVR assembler ("avrasm"):
|
||||
|
||||
keyword keyword
|
||||
built_in pre-defined register
|
||||
number number
|
||||
string string
|
||||
comment commment
|
||||
label label
|
||||
preprocessor preprocessor directive
|
||||
localvars substitution in .macro
|
||||
|
||||
Parser3 ("parser3"):
|
||||
|
||||
keyword keyword
|
||||
number number
|
||||
comment commment
|
||||
variable variable starting with "$"
|
||||
preprocessor preprocessor directive
|
||||
title user-defined name starting with "@"
|
||||
|
||||
TeX ("tex"):
|
||||
|
||||
comment comment
|
||||
number number
|
||||
command command
|
||||
parameter parameter
|
||||
formula formula
|
||||
special special symbol
|
||||
|
||||
|
||||
## Heuristics
|
||||
|
||||
Autodetection of a code's language is done with a simple heuristics:
|
||||
the program tries to highlight a fragment with all available languages and
|
||||
counts all syntactic structures that it finds along the way. The language
|
||||
with greatest count wins.
|
||||
|
||||
This means that in short fragments the probability of an error is high
|
||||
(and it really happens sometimes). In this cases you can set the fragment's
|
||||
language explicitly by assigning a class to the `<code>` element:
|
||||
|
||||
<pre><code class="html">...</code></pre>
|
||||
|
||||
You can use class names recommended in HTML5: "language-html",
|
||||
"language-php". Classes also can be assigned to the `<pre>` element.
|
||||
|
||||
To disable highlighting of a fragment altogether use "no-highlight" class:
|
||||
|
||||
<pre><code class="no-highlight">...</code></pre>
|
||||
|
||||
## Contacts
|
||||
|
||||
Version: 5.11
|
||||
URL: http://softwaremaniacs.org/soft/highlight/en/
|
||||
Author: Ivan Sagalaev (Maniac@SoftwareManiacs.Org)
|
||||
|
||||
For the license terms see LICENSE files.
|
||||
For the list of contributors see AUTHORS.en.txt file.
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
Description: Magula style for highligh.js
|
||||
Author: Ruslan Keba <rukeba@gmail.com>
|
||||
Website: http://rukeba.com/
|
||||
Version: 1.0
|
||||
Date: 2009-01-03
|
||||
Music: Aphex Twin / Xtal
|
||||
*/
|
||||
|
||||
|
||||
pre code, pre .ruby .subst, pre .lisp .title { color: black; }
|
||||
pre .string, pre .title, pre .parent, pre .tag .attribute .value, pre .rules .value, pre .rules .value .number, pre .preprocessor, pre .ruby .symbol, pre .ruby .symbol .string, pre .ruby .symbol .keyword, pre .ruby .symbol .keymethods, pre .instancevar, pre .aggregate, pre .template_tag, pre .django .variable, pre .smalltalk .class, pre .addition, pre .flow, pre .stream, pre .bash .variable, pre .apache .cbracket { color: #008200; }
|
||||
pre .comment, pre .annotation, pre .template_comment, pre .diff .header, pre .chunk { color: #777; }
|
||||
pre .number, pre .date, pre .regexp, pre .literal, pre .smalltalk .symbol, pre .smalltalk .char, pre .change, pre .tex .special { color: #B50000; }
|
||||
pre .label, pre .javadoc, pre .ruby .string, pre .decorator, pre .filter .argument, pre .localvars, pre .array, pre .attr_selector, pre .pseudo, pre .pi, pre .doctype, pre .deletion, pre .envvar, pre .shebang, pre .apache .sqbracket, pre .nginx .built_in, pre .tex .formula { color: #00e; }
|
||||
pre .keyword, pre .id, pre .phpdoc, pre .title, pre .built_in, pre .aggregate, pre .smalltalk .class, pre .winutils, pre .bash .variable, pre .apache .tag, pre .xml .tag, pre .xml .title, pre .tex .command { font-weight: bold; color: navy; }
|
||||
pre .nginx .built_in { font-weight: normal; }
|
||||
pre .html .css, pre .html .javascript, pre .html .vbscript, pre .tex .formula { opacity: 0.5; }
|
||||
/* --- */
|
||||
pre .apache .tag { font-weight: bold; color: blue; }
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>iframe demo</title>
|
||||
<script src="../artDialog.source.js?skin=default"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<style>
|
||||
#iframePage { font-size:12px }
|
||||
#tips { color:#F00; }
|
||||
.tip { color:#999; }
|
||||
</style>
|
||||
<script>
|
||||
var test = function(){
|
||||
var top = art.dialog.top;
|
||||
top.document.getElementById('demoSpan04').innerHTML = '我是石头里面蹦出来的！';
|
||||
//top.art.dialog({content: '我的window在哪里？', lock: true});
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="iframePage">
|
||||
<form id="googleForm" action="http://www.google.com/search" name="f" target="_blank">
|
||||
<fieldset>
|
||||
<legend>请输入关键字</legend>
|
||||
<input id="googleText" name="q" title="Google Search" value="" size="26" /><input style="display:none" name="btnG" type="submit" value="Google Search" />
|
||||
<div id="tips"></div>
|
||||
<button>button</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<a href="#" onclick="art.dialog.close(); return false" title="art.dialog.close()">iframe中关闭对话框</a> | <a href="#" onclick="test(); return false" title="art.dialog.top.document.getElementById('demoSpan04').innerHTML = '我是石头里面蹦出来的！'">iframe操纵来源页面对象</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>test</title>
|
||||
<script src="../artDialog.source.js?skin=default"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="margin:0">
|
||||
<div style="width:400px; height:300px; padding:20px">
|
||||
<div style="margin:4px 0; padding:5px; background:#EEF7F5; text-align:left; color:#000; border-radius:3px; border:1px solid #D7EAE2; " class="tips">我是iframe页面：<a href="iframeA.html" target="_blank">iframeA.html</a></div>
|
||||
<input style="width:15em; padding:4px;" id="aInput" value="我是小A"> <button id="aButton">传递给B页面</button> <button id="exit">关闭并返回数据到主页面</button> <button id="reload">刷新主页面</button>
|
||||
</div>
|
||||
<script>
|
||||
if (art.dialog.data('test')) {
|
||||
document.getElementById('aInput').value = art.dialog.data('test');// 获取由主页面传递过来的数据
|
||||
};
|
||||
|
||||
// 传递给B页面
|
||||
document.getElementById('aButton').onclick = function () {
|
||||
var aValue = document.getElementById('aInput').value;
|
||||
art.dialog.data('aValue', aValue);// 存储数据
|
||||
|
||||
var path = art.dialog.data('homeDemoPath') || './';//
|
||||
|
||||
art.dialog.open(path + 'iframeB.html?fd', {
|
||||
id: 'AAA',
|
||||
close: function () {
|
||||
var bValue = art.dialog.data('bValue');// 读取B页面的数据
|
||||
if (bValue !== undefined) document.getElementById('aInput').value = bValue;
|
||||
}
|
||||
}, false);
|
||||
};
|
||||
|
||||
// 关闭并返回数据到主页面
|
||||
document.getElementById('exit').onclick = function () {
|
||||
var origin = artDialog.open.origin;
|
||||
var aValue = document.getElementById('aInput').value;
|
||||
var input = origin.document.getElementById('demoInput04-3');
|
||||
input.value = aValue;
|
||||
input.select();
|
||||
art.dialog.close();
|
||||
};
|
||||
|
||||
// 刷新主页面
|
||||
document.getElementById('reload').onclick = function () {
|
||||
art.dialog.data('iframeTools', '我知道你刷新了页面～哈哈'); // plugin.iframe.html可以收到
|
||||
var win = art.dialog.open.origin;//来源页面
|
||||
// 如果父页面重载或者关闭其子对话框全部会关闭
|
||||
win.location.reload();
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>test</title>
|
||||
<script src="../artDialog.source.js?skin=default"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
</head>
|
||||
|
||||
<body style="margin:0">
|
||||
<div style="padding:20px;">
|
||||
<div style="margin:4px 0; padding:5px; background:#EEF7F5; text-align:left; color:#000; border-radius:3px; border:1px solid #D7EAE2; " class="tips">我是iframe页面：<a href="iframeB.html" target="_blank">iframeB.html</a></div>
|
||||
<input style="width:15em; padding:4px" id="bInput" value=""> <button id="aButton">返回数据给A页面</button> <a id="reload" href="#">刷新A页面</a>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('bInput').value = art.dialog.data('aValue');// 读取A页面的数据
|
||||
|
||||
// 返回数据给A页面
|
||||
document.getElementById('aButton').onclick = function () {
|
||||
var bValue = document.getElementById('bInput').value;
|
||||
art.dialog.data('bValue', bValue);// 存储数据
|
||||
art.dialog.close();
|
||||
};
|
||||
|
||||
// 刷新A页面
|
||||
document.getElementById('reload').onclick = function () {
|
||||
var win = art.dialog.open.origin;
|
||||
win.location.reload(); // 注意：如果父页面重载或者关闭其子对话框全部会关闭
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<script src="../artDialog.source.js?skin=default"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size:14px;
|
||||
font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial;
|
||||
overflow:auto;
|
||||
}
|
||||
a { color: #27d; text-decoration: none; }
|
||||
#doc { widows:100%; height:100%; position:relative; z-index:1; overflow:hidden;}
|
||||
#sideBar { float:left; width:228px; height:100%; border-right:solid 1px #CCC; overflow:auto; }
|
||||
#main {
|
||||
margin-left:230px;
|
||||
height:100%;
|
||||
}
|
||||
#main iframe {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border:none 0;
|
||||
}
|
||||
#main .tips { height:2em; text-indent:2em; line-height:2em; color:#FFF; background:#030; font-weight:bold; }
|
||||
.sideBarWrap { padding:10px; }
|
||||
#sideBar .content { margin:5px; }
|
||||
#sideBar .content p { padding:0; margin:0; padding-bottom:15px; }
|
||||
#sideBar .close { line-height:2em; text-align:center; background:#F4F4F4; border-bottom:1px solid #D8D8D8; color:#333; }
|
||||
#photo { text-align:center; }
|
||||
#photo img { margin-top:15px;}
|
||||
#sideBar .nav { padding:5px; margin:15px 0; border:1px solid #D8D8D8; background:#F4F4F4; }
|
||||
#sideBar .nav a { padding:1px; }
|
||||
#sideBar .nav a:hover { background:#27d; color:#FFF; text-decoration:none; }
|
||||
#sideBar .btns { padding-bottom:15px; text-align:center; }
|
||||
.gotop { position:absolute; right:17px; bottom:60px; z-index:9; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="sideBar">
|
||||
<div class="close"><a href="plugin.iframe.html" target="_blank">关闭框架查看</a></div>
|
||||
<div class="sideBarWrap">
|
||||
<div id="photo"></div>
|
||||
<div class="nav"><a href="plugin.iframe.html#top" target="iframe">top</a> <a href="plugin.iframe.html#opener" target="iframe">opener</a> <a href="plugin.iframe.html#open" target="iframe">open</a> <a href="plugin.iframe.html#data" target="iframe">data</a> <a href="plugin.iframe.html#load" target="iframe">load</a> <a href="plugin.iframe.html#alert" target="iframe">alert</a> <a href="plugin.iframe.html#confirm" target="iframe">confirm</a> <a href="plugin.iframe.html#prompt" target="iframe">prompt</a> <a href="plugin.iframe.html#tips" target="iframe">tips</a></div>
|
||||
<div class="btns">
|
||||
<button id="open">iframe弹出</button>
|
||||
<button id="move">移动</button>
|
||||
<button id="close">关闭</button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<p>
|
||||
当前页面右侧是iframe套嵌的页面。对话框可以自由穿越框架进行展示，开发者几乎无需考虑层级关系即可进行跨框架操作DOM。</p>
|
||||
<p>artDialog如果要支持框架集穿越的话，需要用iframe页面套住框架集：<a href="iframe_frameset.html" target="_blank">见这里</a></p>
|
||||
</div>
|
||||
<input disabled id="testInput" title="testInput" type="text" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="main">
|
||||
<iframe id="iframe" name="iframe" src="plugin.iframe.html"></iframe>
|
||||
<a class="gotop" title="返回顶部" href="plugin.iframe.html#header" target="iframe">{top}</a>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var test, iframe = document.getElementById('iframe');
|
||||
document.getElementById('open').onclick = function(){
|
||||
var iframeWindow = iframe.contentWindow;
|
||||
test = iframeWindow.art.dialog({
|
||||
lock: true,
|
||||
content: '人品极度不稳定的时刻到了！'
|
||||
});
|
||||
}
|
||||
document.getElementById('move').onclick = function(){
|
||||
test && test.position('50%', '5%');
|
||||
}
|
||||
document.getElementById('close').onclick = function(){
|
||||
test && test.close();
|
||||
test = null;
|
||||
}
|
||||
|
||||
var _hash = window.location.hash
|
||||
if (_hash) {
|
||||
_hash = _hash.split('#')[1];
|
||||
if (_hash) iframe.src = 'plugin.iframe.html#' + _hash;
|
||||
};
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>frameset应用</title>
|
||||
<script src="../artDialog.source.js?skin=default"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<style>
|
||||
* { padding:0; margin:0; }
|
||||
html, body { height:100%; border:none 0; }
|
||||
#iframe { width:100%; height:100%; border:none 0; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<iframe id="iframe" src="frameset.html"></iframe>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="demo.js"></script>
|
||||
<script src="highlight/highlight.pack.js"></script>
|
||||
<script src="highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="highlight/styles/magula.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="../index.html">artDialog</a></h1>
|
||||
<ul id="nav" class="nav">
|
||||
<li><a href="../index.html" class="home">首页</a></li>
|
||||
<li><a href="./API.html" class="api">文档</a></li>
|
||||
<li><a href="./down.html" class="down">下载</a></li>
|
||||
<li><a href="./log.html" class="log">更新</a></li>
|
||||
<li><a href="./labs.html" class="labs">实验</a></li>
|
||||
<li><a href="./license.html" class="license">授权</a></li>
|
||||
|
|
||||
<li><a href="#" id="nav-skin">皮肤</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h2>实验</h2>
|
||||
<div class="tips" style="margin:4px 0; margin-bottom:20px; padding:5px; background:#EEF7F5; text-align:left; color:#000; border-radius:3px; border:1px solid #D7EAE2; ">这里是一些实验性的扩展，或许它们哪天消失也说不定。要注意：它们并没有整合在artDialog主文件里面。</div>
|
||||
<h3>摇头效果</h3>
|
||||
<p>类似与wordpress登录失败后登录框可爱的左右晃动效果</p>
|
||||
<div id="demoCode_shake">
|
||||
<pre><code class="javascript">// 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;
|
||||
};</code></pre>
|
||||
</div>
|
||||
<script>$('#demoCode_shake').runCode();</script>
|
||||
<p>调用示例：</p>
|
||||
<div id="demoCode_shake_use">
|
||||
<pre><code class="javascript">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();// 调用抖动接口
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_shake_use">运行»</button>
|
||||
</p>
|
||||
<h3>右下角滑动通知</h3>
|
||||
<div id="demoCode_notice">
|
||||
<pre><code class="javascript">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);
|
||||
};</code></pre>
|
||||
</div>
|
||||
<script>$('#demoCode_notice').runCode();</script>
|
||||
<p>调用示例：</p>
|
||||
<div id="demoCode_notice_run">
|
||||
<pre><code class="javascript">art.dialog.notice({
|
||||
title: '万象网管',
|
||||
width: 220,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
|
||||
content: '尊敬的顾客朋友，您IQ卡余额不足10元，请及时充值',
|
||||
icon: 'face-sad',
|
||||
time: 5
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_notice_run">运行»</button>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<h3>简单交互对话框</h3>
|
||||
<p>注意：artDialog iframeTools扩展已经包含这些扩展了</p>
|
||||
<div id="demoCode_dialogs">
|
||||
<pre><code class="javascript">/**
|
||||
* 警告
|
||||
* @param {String} 消息内容
|
||||
*/
|
||||
artDialog.alert = function (content, callback) {
|
||||
return artDialog({
|
||||
id: 'Alert',
|
||||
icon: 'warning',
|
||||
fixed: true,
|
||||
lock: true,
|
||||
content: content,
|
||||
ok: true,
|
||||
close: callback
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 确认
|
||||
* @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: true
|
||||
})
|
||||
.content('<div style="padding: 0 1em;">' + content + '</div>')
|
||||
.time(time || 1);
|
||||
};</code></pre>
|
||||
</div>
|
||||
<script>$('#demoCode_dialogs').runCode();</script>
|
||||
|
||||
<p>调用范例：</p>
|
||||
<div id="demoCode_dialogs_alert">
|
||||
<pre><code class="javascript">art.dialog.alert('人品越来越不那么稳定了，请检查！');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_dialogs_alert">运行»</button>
|
||||
</p>
|
||||
|
||||
|
||||
<div id="demoCode_dialogs_confirm">
|
||||
<pre><code class="javascript">art.dialog.confirm('你确定要删除这掉消息吗？', function () {
|
||||
art.dialog.tips('执行确定操作');
|
||||
}, function () {
|
||||
art.dialog.tips('执行取消操作');
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_dialogs_confirm">运行»</button>
|
||||
</p>
|
||||
|
||||
<div id="demoCode_dialogs_prompt">
|
||||
<pre><code class="javascript">art.dialog.prompt('请输入图片网址', function (val) {
|
||||
art.dialog.tips(val);
|
||||
}, 'http://');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_dialogs_prompt">运行»</button>
|
||||
</p>
|
||||
|
||||
<div id="demoCode_dialogs_tips">
|
||||
<pre><code class="javascript">art.dialog.tips('数据正在提交..', 2);
|
||||
// [more code..]
|
||||
art.dialog.tips('成功！已经保存在服务器');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_dialogs_tips">运行»</button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="demo.js"></script>
|
||||
<script src="highlight/highlight.pack.js"></script>
|
||||
<script src="highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="highlight/styles/magula.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="../index.html">artDialog</a></h1>
|
||||
<ul id="nav" class="nav">
|
||||
<li><a href="../index.html" class="home">首页</a></li>
|
||||
<li><a href="./API.html" class="api">文档</a></li>
|
||||
<li><a href="./down.html" class="down">下载</a></li>
|
||||
<li><a href="./log.html" class="log">更新</a></li>
|
||||
<li><a href="./labs.html" class="labs">实验</a></li>
|
||||
<li><a href="./license.html" class="license">授权</a></li>
|
||||
|
|
||||
<li><a href="#" id="nav-skin">皮肤</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h2 id="LGPL">授权</h2>
|
||||
<h3 style="margin-bottom:20px">artDialog 采用LGPL开源协议：</h3>
|
||||
<ol>
|
||||
<li>如果您不对 artDialog 程序代码进行任何修改，直接调用组件，可以以任意方式自由使用：开源、非开源、商业及非商业。</li>
|
||||
<li>如果您对 artDialog 程序代码进行任何的修改或者衍生，涉及修改部分的额外代码和衍生的代码都必须采用 LGPL 协议开放源代码。</li>
|
||||
<li>无论您对 artDialog 程序代码如何修改，都必须在程序文件头部声明版权信息的注释（包括压缩版）</li>
|
||||
</ol>
|
||||
<p><a style="float:right" href="http://www.opensource.org/docs/definition.php" target="_blank"><img src="./images/opensource.gif" alt="Open Source (OSI) Logo"></a></p>
|
||||
<p>LGPL协议原文：<a target="_blank" href="../license.txt">GNU Lesser General Public License</a></p>
|
||||
<h3 style="margin-bottom:20px; clear:both">商业授权</h3>
|
||||
<ol>
|
||||
<li>您可以将 artDialog 程序直接使用在自己的商业或者非商业网站或者软件产品中。</li>
|
||||
<li>您可以对 artDialog 进行修改和美化，可以去除 artDialog 版权注释或改变程序名称，无需公开您修改或美化过的 artDialog 程序与界面。</li>
|
||||
<li>商业授权每个公司只需要购买一次，而不限制产品域名。适用于 artDialog 现有版本和所有后续版本，永久有效。</li>
|
||||
<li>您享有反映和提出意见的优先权，相关意见将被作为首要考虑。</li>
|
||||
</ol>
|
||||
<p><a href="commercial_license.doc">商业授权全文</a> | 授权价格：199元 | 支付方式：支付宝</p>
|
||||
<p>联系Email/支付宝帐号: <span id="licenseMail"></span></p>
|
||||
</div>
|
||||
<div id="footer" onclick="window.location.hash = '#header'" style="cursor:pointer" title="回到页头"></div>
|
||||
</div>
|
||||
<script>
|
||||
$(function($){
|
||||
var myMail = 1987 + '.' + 'tangbin' + '@' + 'gmail.com';
|
||||
myMail = '<a href="mailto:' + myMail + '">' + myMail + '</a>';
|
||||
$('#licenseMail')[0].innerHTML = myMail;
|
||||
});
|
||||
</script>
|
||||
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="demo.js"></script>
|
||||
<script src="highlight/highlight.pack.js"></script>
|
||||
<script src="highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="highlight/styles/magula.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="../index.html">artDialog</a></h1>
|
||||
<ul id="nav" class="nav">
|
||||
<li><a href="../index.html" class="home">首页</a></li>
|
||||
<li><a href="./API.html" class="api">文档</a></li>
|
||||
<li><a href="./down.html" class="down">下载</a></li>
|
||||
<li><a href="./log.html" class="log">更新</a></li>
|
||||
<li><a href="./labs.html" class="labs">实验</a></li>
|
||||
<li><a href="./license.html" class="license">授权</a></li>
|
||||
|
|
||||
<li><a href="#" id="nav-skin">皮肤</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h2>更新</h2>
|
||||
<div style="margin:4px 0; padding:5px; background:#EEF7F5; text-align:center; color:#000; border-radius:3px; border:1px solid #D7EAE2;" class="tips"><span style="color:#DFB113">注意！</span>artDialog5+不再支持iframe，代码迁移至<a href="https://github.com/aui/artDialog" style="text-decoration:underline;">github</a>托管。<br /><a href="upd.txt" target="_blank" style="text-decoration:underline;">artDialog3升级到4操作文档</a></div>
|
||||
<p>
|
||||
<dl>
|
||||
<dt>4.1.6</dt>
|
||||
<dd>修复刷新框架后脚本报错的问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.1.5</dt>
|
||||
<dd>修复异步加载 artDialog.js 导致锁屏无法使用的问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.1.4</dt>
|
||||
<dd>修复上一版本下拉框可能无法使用的问题</dd>
|
||||
<dd>iframeTools: 给 alert 方法增加了回调函数</dd>
|
||||
<dd>把对话框 DOM 插入位置由 body 下方改为 body 上方，以便 tab 键更快选中对话按钮焦点</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.1.3</dt>
|
||||
<dd>双击遮罩不再直接关闭，而是等同于关闭按钮与取消按钮</dd>
|
||||
<dd>修复 IE6 在特殊情况下可能因为 fixed 定位出现 body 背景图片异常</dd>
|
||||
<dd>修复 iframeTools data 方法无法传入空值的 BUG</dd>
|
||||
<dd>修复 focus 参数失效的问题</dd>
|
||||
<dd>修复部分皮肤在 firefox7.0 版下，标题栏出现省略号的问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.1.2</dt>
|
||||
<dd>修复 v4.0.5 之后版本在浏览器窗口调节的时候可能出现对话框变形问题</dd>
|
||||
<dd>top 参数黄金比例不再采用单独的关键字，可使用 '38.2%' 表示</dd>
|
||||
<dd>更新无标题栏的样式</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.1.1</dt>
|
||||
<dd>修复 content 方法传入 Element 的时候可能造成对话框无法关闭的 BUG</dd>
|
||||
<dd>修复 iframeTools open 方法与 jQuery 1.6.2 不兼容问题</dd>
|
||||
<dd>修复了使用 uglifyjs 压缩导致代码不兼容 IE6 的问题</dd>
|
||||
<dd>新增了“black”、“green”皮肤。“simple”皮肤去掉了标题栏，原“gray”更名为“opera”</dd>
|
||||
<dd>新增 content 扩展方法写入消息后，让对话框以自身为中心放大的特性</dd>
|
||||
<dd>iframeTools: 完善了 art.dialog.top 方法内部的判断</dd>
|
||||
<dd>iframeTools: open 方法在IE6下提高了获取 iframe 内部尺寸精确度</dd>
|
||||
<dd>这些参数将逐步被新名词代替（推荐在4.1.1+版本使用新参数名）：yesFn»ok | noFn»cancel | closeFn»close | initFn»init | yesText»okVal | noText»cancelVal</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.1.0</dt>
|
||||
<dd>新增"blue"皮肤</dd>
|
||||
<dd>调整内部结构，取消模板解析机制，tmpl参数不能再使用</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.0.5</dt>
|
||||
<dd>增加高亮按钮的样式：确定按钮默认高亮（自定义按钮可使用focus参数高亮）</dd>
|
||||
<dd>新增“twitter”皮肤</dd>
|
||||
<dd>修改默认皮肤标题栏为浅灰色</dd>
|
||||
<dd>解决IE浏览器按钮字体模糊问题</dd>
|
||||
<dd>解决设置artDialog默认配置lock为true带来的异常</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.0.4</dt>
|
||||
<dd>解决历史遗留BUG：IE8下外部脚本动态插入内容后没有触发浏览器渲染的问题。此更新涉及到所有皮肤文件</dd>
|
||||
<dd>让hide方法可隐藏lock方法的遮罩</dd>
|
||||
<dd>jQuery版本最低兼容jQuery 1.3.2</dd>
|
||||
<dd>basic版本新增hide与show接口</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.0.3</dt>
|
||||
<dd>新增artDialog <a href="../basic/index.html" style="text-decoration:underline">基本版本</a>；它只拥有核心功能，文件只有常规版本的一半大小，可被客户端快速载入</dd>
|
||||
<dd>新增"idialog"皮肤</dd>
|
||||
<dd>精简内嵌事件系统，进一步减少体积(压缩版比上一版本少近了3kb)</dd>
|
||||
<dd>修复一处IE拖拽操作可能出现的错误</dd>
|
||||
<dd>iframeTools: open方法默认不再强制锁屏</dd>
|
||||
<dd>iframeTools: 增加open方法点击内部iframe内容也可以置顶对话框的特性</dd>
|
||||
<dd>内部UI框架命名更新，可能会影响第三方皮肤</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.0.2</dt>
|
||||
<dd>iframeTools: tips方法支持连续写入消息</dd>
|
||||
<dd>iframeTools: 对较大的open iframe进行拖动优化（拖动时隐藏iframe）</dd>
|
||||
<dd>拖拽进一步模块化，完全使用事件代理，模块可外置或者被完整剔除</dd>
|
||||
<dd>增强icon参数自由度，不再依赖对话框样式文件定义。可存入任意图标到“skins/icons/”并使用它们</dd>
|
||||
<dd>修复IE8初始化页面可能出现闪烁的对话框</dd>
|
||||
<dd>增加“gray”与“simple”两款皮肤</dd>
|
||||
<dd>修复上一版本的连续锁屏出现的对话框叠加高度秩序问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.0.1</dt>
|
||||
<dd>iframeTools: 拖拽操作增加透明遮罩，防止鼠标指针落入框架而导致监听失败，提高拖拽流畅性</dd>
|
||||
<dd>iframeTools: 对open方法增加一个私有的iframe扩展方法，用来引用其创建的iframe对象</dd>
|
||||
<dd>新增点击内容部分也可以如点击标题一样置顶对话框的特性</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.0.0 Full version</dt>
|
||||
<dd>为了更好的满足iframe应用需求而不影响artDialog其主要定位，所以正式版把iframeTools扩展独立出来维护</dd>
|
||||
<dd>iframeTools： 增加父页面刷新与关闭后子对话框也将关闭的特性。（由于iframe注销后其产生的对象会被大多数浏览器在内存中移除，增加此特性可以有效的解决对话框报错）</dd>
|
||||
<dd>iframeTools： 新增了art.dialog.through方法，普通对话框也可穿越框架</dd>
|
||||
<dd>iframeTools： 修复open获取iframe宽度比实际宽度小8px的问题（重新计算了body标签margin）</dd>
|
||||
<dd>iframeTools： 修复open方法“aero”与“chrome”风格文件iframe内容padding不为0的导致撑开问题</dd>
|
||||
<dd>iframeTools： 修复后弹出的对话框不置顶的问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>4.0.0 Beta</dt>
|
||||
<dd><a href="new.html">查看新特性演示</a></dd>
|
||||
<dd>重新组织代码，自动切换单例模式与DOM清理机制，性能得到较大的优化，相对上一版本直降30%内存</dd>
|
||||
<dd>DOM底层api兼容jQuery api，同步发行jQuery版本</dd>
|
||||
<dd style="text-decoration:underline; font-weight:bold">消息内容支持传入DOM元素</dd>
|
||||
<dd>增加title标题接口</dd>
|
||||
<dd style="text-decoration:underline; font-weight:bold">增加button自定义按钮接口</dd>
|
||||
<dd>增加lock与unlock接口</dd>
|
||||
<dd style="text-decoration:underline; font-weight:bold">新增data方法用来在iframe之间共享数据</dd>
|
||||
<dd>重定义zIndex配置参数</dd>
|
||||
<dd>重新支持调节对话框大小</dd>
|
||||
<dd>支持用第三方框架加载自身</dd>
|
||||
<dd>对话框内容支持解析含有<script type="text/dialog"></script>的脚本</dd>
|
||||
<dd>art.dialog.close 方法在iframe页面重载后仍然有效</dd>
|
||||
<dd>配置参数全部为可选，如果没有content，它将出现loading动画</dd>
|
||||
<dd style="text-decoration:underline; font-weight:bold">left与top关键字用百分比代替，同时增加width与height传递百分比参数</dd>
|
||||
<dd>art.dialog.get(id) 变更为 art.dialog.list[id]</dd>
|
||||
<dd>不再支持多皮肤共存,css文件默认不自动加载：需要引用样式文件或者写url参数artDialog.js?skin=aero</dd>
|
||||
<dd>不再支持页面未就绪弹出对话框, 而建议在jQuery(function () {/* [code..] */})中或者window.onload = function () {/*[code..]*/}调用</dd>
|
||||
<dd>不再支持iframe父子窗口自动注入artDialog文件：请给需要的框架页面引用artDialog.js</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>3.0.6</dt>
|
||||
<dd>仅修复load模块无法载入远程数据问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>3.0.5</dt>
|
||||
<dd>修复iPad或iPhone下使用锁屏焦点自动弹出的问题</dd>
|
||||
<dd>修复移动设备使用手势缩放页面带来的漂移问题</dd>
|
||||
<dd>修复fixed在移动设备中支持不完整的问题</dd>
|
||||
<dd>修复window.top是框架集(frameset)页面可能会带来无限循环递归的问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>3.0.4</dt>
|
||||
<dd>修复close参数在open与load方法执行出错</dd>
|
||||
<dd>修复输入过程中按Esc意外关闭对话框的问题</dd>
|
||||
<dd>增加art.dialog.get()方法获取指定ID对话框API</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>3.0.3</dt>
|
||||
<dd>修复锁屏的时候对话框内容无法使用退格键的BUG</dd>
|
||||
<dd>修复框架集（frameset）页面不能植入artDialog而产生js报错的问题，并增加了其支持</dd>
|
||||
<dd>art.dialog.open()产生的iframe其内部增加art.dialog.parent获取来源页window对象</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>3.0.2</dt>
|
||||
<dd>对art.dialog.open()产生的iframe可直接用art.dialog.clsoe()方法关闭</dd>
|
||||
<dd>改善与jQuery的配合：ajax将由强大的jQuery.ajax驱动</dd>
|
||||
<dd>为了保持命名风格，原来的art.dialog.get()换成art.dialog.load()</dd>
|
||||
<dd>修复用jQuery.ready()在页面载入时直接调用对话框导致left参数失效的BUG</dd>
|
||||
<dd>修复若干细小的BUG</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>3.0.1</dt>
|
||||
<dd>修复IE8可能重复执行的问题</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>3.0</dt>
|
||||
<dd>重写架构，DOM底层与应用层分离，代码重用</dd>
|
||||
<dd>修复v2版几个严重的BUG</dd>
|
||||
<dd>大幅度提高在IE浏览器下的性能</dd>
|
||||
<dd>支持多皮肤共存，支持动画</dd>
|
||||
<dd>简化框架应用下的穿越与对象传递操作</dd>
|
||||
<dd>公开默认配置的读写</dd>
|
||||
<dd>重写IE6 fixed实现</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>2.0</dt>
|
||||
<dd>重写代码，支持多对话框共存</dd>
|
||||
<dd>支持返回扩展方法关闭对话框</dd>
|
||||
<dd>解决v1已知的一些BUG</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>1.0</dt>
|
||||
<dd>高度与宽度支持原生自适应内容，自适应文本对齐</dd>
|
||||
<dd>支持拖动、Esc关闭对话框、坐标定位</dd>
|
||||
<dd>支持自适应位置</dd>
|
||||
<dd>支持IE6无抖动静止定位</dd>
|
||||
</dl>
|
||||
</p>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>登录</title>
|
||||
<script src="../artDialog.source.js?skin=default"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<style>
|
||||
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
|
||||
fieldset, img { border: 0; }
|
||||
img { display:inline-block; }
|
||||
:focus { outline: 0; }
|
||||
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; }
|
||||
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
|
||||
abbr, acronym { border: 0; font-variant: normal; }
|
||||
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
|
||||
code, kbd, samp, tt { font-size:100%; }
|
||||
input, button, textarea, select { *font-size: 100%;
|
||||
}
|
||||
ol, ul { list-style: none outside none; }
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
caption, th { text-align: left; }
|
||||
sup, sub { font-size: 100%; vertical-align: baseline; }
|
||||
:link, :visited, ins { text-decoration: none; }
|
||||
blockquote, q { quotes: none; }
|
||||
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
|
||||
/**/
|
||||
html, body { border:none 0; }
|
||||
body { font-size:75%; color:#666; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; text-align:center; }
|
||||
a { color:#214FA3; }
|
||||
a:hover { text-decoration:underline; }
|
||||
#login-form { padding-top:30px; }
|
||||
#login-form p { padding:5px; }
|
||||
#login-form input { width:15em; padding:4px; border:1px solid #CCC; }
|
||||
#login-form input:focus { border-color:#426DC9; }
|
||||
#login-form .login-form-error { background:#FFFBFC; border-color:#F00 !important; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="background:#FAFBDD; padding:3px;"><a href="javascript:art.dialog.close();">iframe中关闭</a></div>
|
||||
<form id="login-form" action="../index.html?login" method="post" target="_top">
|
||||
<p><label>帐号：<input id="login-form-username" name="username" type="text"></label></p>
|
||||
<p><label>密码：<input id="login-form-password" name="password" type="password"></label></p>
|
||||
</form>
|
||||
<script>
|
||||
(function () {
|
||||
var parent = art.dialog.parent, // 父页面window对象
|
||||
api = art.dialog.open.api, // art.dialog.open扩展方法
|
||||
$ = function (id) {return document.getElementById(id)},
|
||||
form = $('login-form'),
|
||||
username = $('login-form-username'),
|
||||
password = $('login-form-password');
|
||||
|
||||
if (!api) return;
|
||||
|
||||
parent.document.title = 'iframe中的javascirpt到此一游';
|
||||
|
||||
// 操作对话框
|
||||
api.title('系统登录')
|
||||
// 自定义按钮
|
||||
.button(
|
||||
{
|
||||
name: '登录',
|
||||
callback: function () {
|
||||
if (check(username) && check(password)) form.submit();
|
||||
return false;
|
||||
},
|
||||
focus: true
|
||||
},
|
||||
{
|
||||
name: '取消'
|
||||
}
|
||||
);
|
||||
|
||||
// 表单验证
|
||||
var check = function (input) {
|
||||
if (input.value === '') {
|
||||
inputError(input);
|
||||
input.focus();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
};
|
||||
};
|
||||
|
||||
// 输入错误提示
|
||||
var inputError = function (input) {
|
||||
clearTimeout(inputError.timer);
|
||||
var num = 0;
|
||||
var fn = function () {
|
||||
inputError.timer = setTimeout(function () {
|
||||
input.className = input.className === '' ? 'login-form-error' : '';
|
||||
if (num === 5) {
|
||||
input.className === '';
|
||||
} else {
|
||||
fn(num ++);
|
||||
};
|
||||
}, 150);
|
||||
};
|
||||
fn();
|
||||
};
|
||||
|
||||
window.onload = function () {setTimeout(function () {username.focus()}, 240);};
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>登录</title>
|
||||
<script src="../artDialog.source.js?skin=default"></script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<style>
|
||||
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
|
||||
fieldset, img { border: 0; }
|
||||
img { display:inline-block; }
|
||||
:focus { outline: 0; }
|
||||
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; }
|
||||
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
|
||||
abbr, acronym { border: 0; font-variant: normal; }
|
||||
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
|
||||
code, kbd, samp, tt { font-size:100%; }
|
||||
input, button, textarea, select { *font-size: 100%;
|
||||
}
|
||||
ol, ul { list-style: none outside none; }
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
caption, th { text-align: left; }
|
||||
sup, sub { font-size: 100%; vertical-align: baseline; }
|
||||
:link, :visited, ins { text-decoration: none; }
|
||||
blockquote, q { quotes: none; }
|
||||
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
|
||||
/**/
|
||||
html, body { border:none 0; }
|
||||
body { font-size:75%; color:#666; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; text-align:center; }
|
||||
a { color:#214FA3; }
|
||||
a:hover { text-decoration:underline; }
|
||||
#login-form { padding-top:30px; }
|
||||
#login-form p { padding:5px; }
|
||||
#login-form input { width:15em; padding:4px; border:1px solid #CCC; }
|
||||
#login-form input:focus { border-color:#426DC9; }
|
||||
#login-form .login-form-error { background:#FFFBFC; border-color:#F00 !important; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form id="login-form" action="../index.html?login" method="post" target="_top">
|
||||
<p><label>帐号：<input id="login-form-username" name="username" type="text"></label></p>
|
||||
<p><label>密码：<input id="login-form-password" name="password" type="password"></label></p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
|
||||
})();
|
||||
</script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<script src="demo.js"></script>
|
||||
<script src="highlight/highlight.pack.js"></script>
|
||||
<script src="highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="highlight/styles/magula.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="../index.html">artDialog</a></h1>
|
||||
<ul id="nav" class="nav">
|
||||
<li><a href="../index.html" class="home">首页</a></li>
|
||||
<li><a href="./API.html" class="api">文档</a></li>
|
||||
<li><a href="./down.html" class="down">下载</a></li>
|
||||
<li><a href="./log.html" class="log">更新</a></li>
|
||||
<li><a href="./labs.html" class="labs">实验</a></li>
|
||||
<li><a href="./license.html" class="license">授权</a></li>
|
||||
|
|
||||
<li><a href="#" id="nav-skin">皮肤</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h1 style="font-size:36px; line-height:2.2em; height:2.2em; margin-top:10px; margin-bottom:20px; color:#9DCCB8; font-family:'宋体'">artDialog4 有什么新功能？</h1>
|
||||
<div id="DOMContentWrap">
|
||||
<h2>支持自定义按钮</h2>
|
||||
<div id="demoCode_button">
|
||||
<pre><code class="javascript">var dialog = art.dialog({
|
||||
title: '警告',
|
||||
content: '点击管理按钮将让删除按钮可用',
|
||||
width: '20em',
|
||||
button: [{
|
||||
name: '管理',
|
||||
callback: function () {
|
||||
this.content('我更改了删除按钮').button({
|
||||
name: '删除',
|
||||
disabled: false
|
||||
});
|
||||
return false;
|
||||
},
|
||||
focus: true
|
||||
}]
|
||||
});
|
||||
|
||||
dialog.button(
|
||||
{
|
||||
name: '删除',
|
||||
callback: function () {
|
||||
alert('remove')
|
||||
},
|
||||
disabled: true
|
||||
}
|
||||
)</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_button">运行»</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>内容支持传入DOM元素</h2>
|
||||
<p>元素完整移动到对话框中，所以原有的事件与属性都将会保留；如果隐藏元素被传入到对话框，会设置display:block属性显示该元素；对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复</p>
|
||||
<div id="demoCode_content">
|
||||
<pre><code class="javascript">var dialog = art.dialog({
|
||||
content: document.getElementById('DOMContentWrap'),
|
||||
id: 'D345'
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_content">运行»</button>
|
||||
</p>
|
||||
<h2>支持百分比位置与尺寸</h2>
|
||||
<p>使用百分比作为参数，浏览器窗口尺寸调整也能执行适应</p>
|
||||
<div id="demoCode_sp">
|
||||
<pre><code class="javascript">var dialog = art.dialog({
|
||||
left: '100%',
|
||||
top: '100%',
|
||||
width: 240,
|
||||
height: '100%',
|
||||
fixed: true,
|
||||
resize: false
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_sp">运行»</button>
|
||||
</p>
|
||||
|
||||
<h2>跨框架交换数据</h2>
|
||||
<p>框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦——但在artDialog4中这一切完全被简化，它有一个统一的数据共享接口，可以共享任意类型的数据，任何页面都能使用同一接口获取数据。</p>
|
||||
<div id="demoCode_data">
|
||||
<pre><code class="javascript">art.dialog.data('test', document.getElementById('demoInput04-3').value);
|
||||
art.dialog.open('./iframeA.html');
|
||||
|
||||
// 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据，如：
|
||||
// document.getElementById('aInput').value = art.dialog.data('test');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<label>请输入测试文字：<input id="demoInput04-3" title="demoInput04-3" type="text" value="精于心，简于形" style="margin-right:10px" /></label> <button class="runCode" name="demoCode_data" title="chrome浏览器不能在本地运行iframe">运行»</button>
|
||||
</p>
|
||||
|
||||
<p style="text-align:center"><a href="log.html">查看详细更新与升级注意事项»</a></p>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,452 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>artDialog iframe Tools</title>
|
||||
<style>
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; }
|
||||
body { font-family: 'Microsoft Yahei', Tahoma, Arial !important; font-family: Tahoma, Arial; line-height:1.75; }
|
||||
strong, em, b, i { font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; }
|
||||
h1, .site-title, h2, h3 { font-family: 'Microsoft Yahei', Tahoma, Arial !important; font-family: Tahoma, Arial; }
|
||||
h4, h5, h6 { font-family: Verdana, sans-serif; }
|
||||
body { font-size: 14px; color: #444; background: #eee; text-align: center; }
|
||||
p { padding:8px 0; }
|
||||
#page { background: white; }
|
||||
#page { max-width:760px; _width: 700px; text-align: left; margin: 0 auto; padding-top: 20px; position: relative; border: 1px solid #ddd; border-top: none; clear: both; background-color:#FFF; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-box-shadow:0 0 3px rgba(0, 0, 0, .1); -webkit-box-shadow::0 0 3px rgba(0, 0, 0, .1);
|
||||
box-shadow::0 0 3px rgba(0, 0, 0, .1);
|
||||
}
|
||||
#header { position: relative; height: 200px; background: #3371A3; background-position: top right; background-repeat: no-repeat; overflow: hidden; }
|
||||
.content { padding: 0 20px 30px; }
|
||||
html, body { _overflow-x:hidden }
|
||||
pre { line-height:1.3em!important; font:12px!important; *zoom:1;
|
||||
}
|
||||
h1 { font-size: 26px; }
|
||||
h3 { padding:10px 0; margin-top:36px; margin-bottom:8px; text-indent:0; border-radius:5px; font-size:18px; }
|
||||
.site-title { font-size: 36px; font-weight: bold; padding: 48px 40px 0; }
|
||||
.site-title a, #header .description { text-decoration: none; color: white; font-family:'Constantia'; text-shadow:0 0 1px rgba(0, 0, 0, .8); }
|
||||
.site-title a:hover { text-decoration: underline; }
|
||||
#header .description { font-size: 12px; margin: 0 40px; text-shadow:none; }
|
||||
#header .description a { color:#FFF; }
|
||||
h2 { font-size: 18px; }
|
||||
#footer { clear: both; margin: 0 auto; padding: 20px 0 40px; text-align: center; color: #777; }
|
||||
#footer p { line-height: 1.6em; }
|
||||
#footer a { color: #888; font-weight: bold; }
|
||||
#footer a:hover { border: none; text-decoration: none; color: #000; }
|
||||
a:hover, a:visited:hover { text-decoration: underline; }
|
||||
h2 a:hover, h2 span a:hover { color: #27d !important; }
|
||||
a { color: #27d; text-decoration: none; }
|
||||
.msg {
|
||||
*zoom:1; padding:15px; margin-top:15px; font-size:14px; background:#EEF7F5; border:1px solid #D7EAE2; color:#333; }
|
||||
.msg ol { margin:0 20px; }
|
||||
.msg { font-size:14px; }
|
||||
/*各行变色表格*/
|
||||
table.zebra, .zebra th, .zebra td { border-width: 1px; border-style: solid; margin: 0; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; }
|
||||
table.zebra { table-layout: fixed; width: 100%; margin-bottom: 6px; padding: 0 1px 1px 0; border-spacing: 0; border-collapse: separate; *border-collapse:collapse;
|
||||
border-color: #abb8ce; background: #EDEDED; }
|
||||
.zebra th { padding: 5px 4px; font-weight: bold; border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; text-align: left; text-shadow: 1px 1px 0 #e4edfb; vertical-align: middle; background: #d0dbee; }
|
||||
.zebra thead th { text-align:center; }
|
||||
.zebra th strong { color:#090; border-bottom:1px dashed #090; text-decoration:underline; }
|
||||
.zebra td { padding:0; }
|
||||
.zebra th.separate { text-align:center; border-color: #E1F196 #AECD1B #AECD1B #F3FAD6; background-color: #f3f7fd; }
|
||||
.zebra td { padding: 4px; font: 12px/18px Consolas, "Courier New", Courier, monospace; text-align: left; vertical-align: top; }
|
||||
.zebra td { border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; background: #e0e8f5; }
|
||||
.zebra tr.odd th { background: #dbe4f4; }
|
||||
.zebra tr.odd td { background: #e6eef9; }
|
||||
.zebra br { margin-bottom:1.8em; }
|
||||
table.zebra .parameter, table.zebra .type, table.zebra .default { width:7em; }
|
||||
</style>
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="../artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
window.onload = function () {
|
||||
_skin && art.dialog({
|
||||
content: '欢迎使用"artDialog"对话框组件!',
|
||||
icon: 'succeed',
|
||||
fixed: true
|
||||
}, function () {
|
||||
this.title('2秒后自动关闭').lock().time(2);
|
||||
return false;
|
||||
});
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
<script src="../plugins/iframeTools.source.js"></script>
|
||||
<script src="demo.js"></script>
|
||||
<script src="highlight/highlight.pack.js"></script>
|
||||
<script src="highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link rel="stylesheet" href="highlight/styles/magula.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header">
|
||||
<div class='site-title'> <a href="?" accesskey="1">artDialog<span style=" margin-left:10px; font-size:12px; font-weight:bold;">iframe Tools</span></a> </div>
|
||||
<p class="description"><a href="../index.html" target="_blank">返回首页</a> | <a href="iframeTop.html" target="_top">在框架中演示本页面</a></p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="primary-wrapper">
|
||||
|
||||
<table class="zebra" style="margin-top:20px;">
|
||||
<colgroup>
|
||||
<col class="col1" />
|
||||
<col class="col2" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="name" style="width:22em">名称</th>
|
||||
<th class="note" colspan="3">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>核心方法</abbrev></th>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#top">art.dialog.top</a></th>
|
||||
<td colspan="3">获取artDialog可用最高层window对象。这与直接使用window.top不同，它能排除artDialog对象不存在已经或者顶层页面为框架集的情况<br />
|
||||
这是iframe应用工具集中的核心方法，你可以用它来操作父页面对象（包括上面的对话框）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#data">art.dialog.data(name, value)</a></th>
|
||||
<td colspan="3">跨框架数据共享写入接口。<br />框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦。<br />而data方法就是为了解决这个问题，你完全不用管框架层级问题，它可以写入任何类型的数据，而做到各个页面之间数据共享。</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#data">art.dialog.data(name)</a></th>
|
||||
<td colspan="3">跨框架数据共享读取接口。指定name即返回数据，任何引用了artDialog的页面都有效</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#removeData">art.dialog.removeData(name)</a></th>
|
||||
<td colspan="3">跨框架数据共享删除接口。删除指定名称的数据，任何引用了artDialog的页面都有效</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>异步数据对话框</abbrev></th>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#open">art.dialog.open(url, options, cache)</a></th>
|
||||
<td colspan="3">创建一个iframe页面<br />
|
||||
参数: 地址, 配置参数, 缓存开关(默认true)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#api">art.dialog.open.api</a></th>
|
||||
<td colspan="3">iframe页面获取open方法扩展方法。 <br />(注意这个iframe中也必须引用artDialog脚本文件)</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#opener">art.dialog.opener</a></th>
|
||||
<td colspan="3">iframe页面获取open方法触发来源页面window对象。 <br />(注意这个iframe中也必须引用artDialog脚本文件)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#close">art.dialog.close()</a></th>
|
||||
<td colspan="3">iframe页面关闭open方法创建的对话框的快捷方式。<br />close方法等同于：<div>var api = art.dialog.open.api;</div><div>api && api.close();</div><br />(注意这个iframe中也必须引用artDialog脚本文件)</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#load">art.dialog.load(url, options, cache)</a></th>
|
||||
<td colspan="3">Ajax加载内容<br />
|
||||
参数：地址, 配置参数, 缓存开关(默认true)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>基础交互对话框</abbrev></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#alert">art.dialog.alert(content, callback)</a></th>
|
||||
<td colspan="3">警告消息 (同时只允许一个alert)<br />
|
||||
参数: 内容, 对话框关闭后的回调函数</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th><a href="#confirm">art.dialog.confirm(content, ok, cancel)</a></th>
|
||||
<td colspan="3">确认 (同时只允许一个confirm)<br />
|
||||
参数: 内容, 确定按钮回调函数, 取消按钮回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#prompt">art.dialog.prompt(content, ok, value)</a></th>
|
||||
<td colspan="3">提问 (同时只允许一个prompt)<br />
|
||||
参数: 内容, 确定按钮回调函数, 文本框默认值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#tips">art.dialog.tips(content, time)</a></th>
|
||||
<td colspan="3">短暂提示(同时只允许一个tips)<br />
|
||||
参数: 内容、显示时间(单位秒, 默认1.5)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="4"><abbrev>自定义</abbrev></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><a href="#through">art.dialog.through(options)</a></th>
|
||||
<td colspan="3">创建一个普通可穿越框架的对话框<br />
|
||||
不鼓励直接使用window.top这样的方式穿越，这样可能因为对话框触发页面重置导致其创建的对象在内存中被清空而发生异常</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="msg">
|
||||
<ol>
|
||||
<li>顶层面需要引用了artDialog才能实现穿越框架</li>
|
||||
<li>chrome浏览器本地运行会有安全限制，请在服务器上查看本页面</li>
|
||||
<li>artDialog不支持怪异模式，请用主流网站采用的XHTML1.0或者HTML5的DOCTYPE申明，如：<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>或者<br><!DOCTYPE HTML></li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="demo">
|
||||
<h3 id="top">获取artDialog可用顶层页面window对象[top]</h3>
|
||||
art.dialog.top默认引用的是widnow.top（如果window.top是框架集、跨域、artDialog对象不存，否则可能为window.parent或者当前window）这里页面所有穿越的对话框最终是在这个window上。
|
||||
</p>
|
||||
<div id="DOM-top">
|
||||
<pre><code class="javascript">var win = art.dialog.top;
|
||||
win.document.title = '我修改了页面标题';
|
||||
win.document.getElementById('testInput').value = 'hello world!';
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="btn8" title="btn8" name="DOM-top">运行»</button>
|
||||
</p>
|
||||
<h3 id="through">可穿越框架的标准对话框[through]</h3>
|
||||
<p>如果iframe刷新或者被关闭，它创建的对话框会自动回收，防止因内存清空而导致错误。不鼓励直接使用window.top.art.dialog()与art.dialog.top.art.dialog()这样的方式穿越框架，它们会带来潜在的错误。</p>
|
||||
<div id="demoCode-through">
|
||||
<pre><code class="javascript">var throughBox = art.dialog.through;
|
||||
throughBox({
|
||||
content: '我是一个普通的对话框，只是能穿越框架而已',
|
||||
lock: true
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="btn8" title="btn8" name="demoCode-through">运行»</button>
|
||||
</p>
|
||||
<h3 id="open">嵌入网页[open] <span id="api"></span><span id="opener"></span></h3>
|
||||
<p>同域下能够自适应iframe大小，但chrome 浏览器本地运行会认为跨域而无法适应大小 </p>
|
||||
<p>open方法有如下这几个私有个功能</p>
|
||||
<table class="zebra">
|
||||
<colgroup>
|
||||
<col class="col1">
|
||||
<col class="col2">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="name" style="width:22em">名称</th>
|
||||
<th class="note">类型</th>
|
||||
<th class="note" colspan="3">描述</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="separate" colspan="5">iframe内部静态方法</th>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<th>art.dialog.open.api</th>
|
||||
<td>Object</td>
|
||||
<td colspan="3">从iframe页面引用对话框扩展方法</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>art.dialog.opener </th>
|
||||
<td>object Window</td>
|
||||
<td colspan="3">从iframe页面引用对话框触发页面的window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="separate" colspan="5"><abbrev>扩展方法</abbrev></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>iframe</th>
|
||||
<td>HTMLElement</td>
|
||||
<td colspan="3">引用open创建的iframe（4.0.1新增）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>其他扩展方法：<a href="API.html#API" target="_blank">API.html#API</a></p>
|
||||
<h4>一、使用iframe内部脚本控制对话框</h4>
|
||||
<p>请打开 <a href="login_iframe.html" target="_blank">login_iframe.html</a> 查看源码</p>
|
||||
<div id="demoCode04">
|
||||
<pre><code class="javascript">art.dialog.open('login_iframe.html', {title: '提示'});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="btn4" title="btn4" name="demoCode04">运行»</button>
|
||||
</p>
|
||||
<!--<p>google maps (示例来自KindEditor)</p>
|
||||
<div id="demoCode04-5">
|
||||
<pre><code class="javascript">art.dialog.open('googleMaps.html');</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode04-5">运行»</button>
|
||||
</p> -->
|
||||
<h4>二、在外部对iframe进行控制</h4>
|
||||
<p>对iframe控制需要用到open私有的this.iframe扩展方法：</p>
|
||||
<div id="demoCode04-2">
|
||||
<pre><code class="javascript">art.dialog.open('login_iframe_2.html', {
|
||||
title: '登录',
|
||||
// 在open()方法中，init会等待iframe加载完毕后执行
|
||||
init: function () {
|
||||
var iframe = this.iframe.contentWindow;
|
||||
var top = art.dialog.top;// 引用顶层页面window对象
|
||||
var username = iframe.document.getElementById('login-form-username');
|
||||
username.value = 'guest';
|
||||
setTimeout(function () {
|
||||
username.select();
|
||||
}, 80);
|
||||
top.document.title = '测试';
|
||||
},
|
||||
ok: function () {
|
||||
var iframe = this.iframe.contentWindow;
|
||||
if (!iframe.document.body) {
|
||||
alert('iframe还没加载完毕呢')
|
||||
return false;
|
||||
};
|
||||
var form = iframe.document.getElementById('login-form'),
|
||||
username = iframe.document.getElementById('login-form-username'),
|
||||
password = iframe.document.getElementById('login-form-password');
|
||||
if (check(username) && check(password)) form.submit();
|
||||
return false;
|
||||
},
|
||||
cancel: true
|
||||
});
|
||||
|
||||
// 表单验证
|
||||
var check = function (input) {
|
||||
if (input.value === '') {
|
||||
inputError(input);
|
||||
input.focus();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
};
|
||||
};
|
||||
|
||||
// 输入错误提示
|
||||
var inputError = function (input) {
|
||||
clearTimeout(inputError.timer);
|
||||
var num = 0;
|
||||
var fn = function () {
|
||||
inputError.timer = setTimeout(function () {
|
||||
input.className = input.className === '' ? 'login-form-error' : '';
|
||||
if (num === 5) {
|
||||
input.className === '';
|
||||
} else {
|
||||
fn(num ++);
|
||||
};
|
||||
}, 150);
|
||||
};
|
||||
fn();
|
||||
};
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode04-2">运行»</button>
|
||||
</p>
|
||||
<h4>三、跨域访问</h4>
|
||||
<p>跨域访问无法自适应大小，也无法进行父页面与子页面数据交换</p>
|
||||
<div id="demoCode_open_domain">
|
||||
<pre><code class="javascript">art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',
|
||||
{title: '人人网', width: 320, height: 400});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode_open_domain">运行»</button>
|
||||
</p>
|
||||
<h2 id="data" style="color:#00C">框架与框架、主页面数据共享[data & removeData]</h2>
|
||||
<p>框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是开发人员噩梦，而这样的问题在CMS多框架应用中十分常见。</p>
|
||||
<p>在artDialog中这一切完全被简化，它有一个简单易用的数据共享接口，可以共享任意类型的数据供各个框架页面读取，它与页面名称、层级毫无关系。<a href="http://www.planeart.cn/?p=1554" target="_blank">相关原理</a></p>
|
||||
<p>请打开 <a href="iframeA.html" target="_blank">iframeA.html</a> 源码查看范例。由于art.dialog.open方法打开的iframe加剧了框架的层级的复杂性，所以请特别重视这个data方法！</p>
|
||||
<div id="demoCode04-3">
|
||||
<pre><code class="javascript">art.dialog.data('test', document.getElementById('demoInput04-3').value);
|
||||
art.dialog.open('iframeA.html', null, false);
|
||||
|
||||
// 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据，如：
|
||||
// document.getElementById('aInput').value = art.dialog.data('test');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode04-3">运行»</button>
|
||||
<input id="demoInput04-3" title="demoInput04-3" type="text" value="数据共享机制" style="padding:4px; width:16em" />
|
||||
（请输入测试文字）
|
||||
<script>var _data = art.dialog.data('iframeTools'); if (_data) document.getElementById('demoInput04-3').value = _data;</script>
|
||||
</p>
|
||||
<h3 id="load">Ajax[load]</h3>
|
||||
<p>特别说明：第三个参数为ajax缓存开关，默认为true。由于浏览器限制，ajax需要在服务端运行才能正确运行本例子。</p>
|
||||
<h4>一、加载网页片段</h4>
|
||||
<div id="demoCode05">
|
||||
<pre><code class="javascript">art.dialog.load('./ajaxContent/content.html', {
|
||||
title: '远程载入HTML片段',
|
||||
ok: function(topWin){
|
||||
art.dialog('hello world');
|
||||
},
|
||||
close: function(){
|
||||
art.dialog.tips('close')
|
||||
}
|
||||
}, false);</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="btn5" title="btn5" name="demoCode05">运行»</button>
|
||||
</p>
|
||||
<div id="demoCode05-2">
|
||||
<pre><code class="javascript">art.dialog.load('./ajaxContent/login.html', false);</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="btn5" title="btn5" name="demoCode05-2">运行»</button>
|
||||
</p>
|
||||
<h3 id="alert">警告消息[alert]</h3>
|
||||
<div id="demoCode01">
|
||||
<pre><code class="javascript">art.dialog.alert('警察叔叔会请你喝茶！', function () {alert(0)});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode01">运行»</button>
|
||||
</p>
|
||||
<h3 id="confirm">确认消息[confirm]</h3>
|
||||
<div></div>
|
||||
<div id="demoCode02">
|
||||
<pre><code class="javascript">art.dialog.confirm('你确认删除操作？', function(){
|
||||
var top = art.dialog.top,
|
||||
input = document.getElementById('demoInput02'),
|
||||
photo = top.document.getElementById('photo');
|
||||
|
||||
if (input) input.parentNode.removeChild(input);
|
||||
if (photo) photo.innerHTML = '<img src="images/lixiaolong.png" />';
|
||||
}, function(){
|
||||
art.dialog.tips('你取消了操作');
|
||||
});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode02">运行»</button>
|
||||
<button disabled id="demoInput02" title="demoInput02">点运行按钮删掉我</button>
|
||||
</p>
|
||||
<h3 id="prompt">提问消息[prompt]</h3>
|
||||
<p>特别说明：回调函数第一个参数为输入的值</p>
|
||||
<div id="demoCode03">
|
||||
<pre><code class="javascript">art.dialog.prompt('你的名字是什么？', function(data){
|
||||
// data 代表输入数据;
|
||||
var input = document.getElementById('demoInput03'),
|
||||
topVal = art.dialog.top.document.getElementById('testInput');
|
||||
if (input) input.value = data;
|
||||
if (topVal) topVal.value = data;
|
||||
}, '我是糖饼');</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode03">运行»</button>
|
||||
<input disabled id="demoInput03" title="demoInput03" type="text" />
|
||||
</p>
|
||||
<h3 id="tips">提示消息[tips]</h3>
|
||||
<div id="demoCode07">
|
||||
<pre><code class="javascript">art.dialog.tips('提交成功！', 1.5);</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" name="demoCode07">运行»</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>(C)2010~2011</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>artDialog iframe Tools</title>
|
||||
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="../jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="/risk-control-web/resources/js/plugins/artDialog/artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
window.onload = function () {
|
||||
_skin && art.dialog({
|
||||
content: '欢迎使用"artDialog"对话框组件!',
|
||||
icon: 'succeed',
|
||||
fixed: true
|
||||
}, function () {
|
||||
this.title('2秒后自动关闭').lock().time(2);
|
||||
return false;
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
function showDiaLog(){
|
||||
art.dialog.open('http://localhost:8080/risk-control-web/index.jsp', {title: '提示'});
|
||||
}
|
||||
</script>
|
||||
<script src="/risk-control-web/resources/js/plugins/artDialog/iframeTools.source.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="page">
|
||||
<input type="button" value="222" onclick="showDiaLog()"/>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>topFrame</title>
|
||||
<style>
|
||||
body { background:#F6F6F6; }
|
||||
em.tips { padding:2px; background:#690; color:#FFF; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<em class="tips">框架集（frameset）需要用iframe套住才能支持artDialog穿越，就像现在这样 :-D</em>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
-----------------------------------------------------------------------
|
||||
|
||||
【artDialog4.1.0升级到4.1.1】
|
||||
1. 建议把这些参数名替换成新参数名，因为未来版本老参数名将不可用：
|
||||
yesFn > ok
|
||||
noFn > cancel
|
||||
closeFn > close
|
||||
initFn > init
|
||||
yesText > okVal
|
||||
noText > cancelVal
|
||||
|
||||
|
||||
|
||||
【artDialog4.0.5升级到4.1.0】
|
||||
1. tmpl参数被取消
|
||||
|
||||
|
||||
|
||||
【artDialog4.0.0测试版升级到4.0.0正式版】
|
||||
|
||||
1. iframe拓展被单独剥离出来，需要另引用artDialog.iframeTools.js 或者把它合并到artDialog.js下面,
|
||||
alert / confirm / prompt / open / load / tips / 等方法需要引用artDialog.iframeTools.js
|
||||
|
||||
2. iframeTools 内置art.dialog.through方法，如果自己根据文档写了此方法的同学请删除，否则会报错
|
||||
|
||||
3. 压缩版文件名没有“min”做后缀，请注意下
|
||||
|
||||
|
||||
|
||||
【artDialog3升级到4.0.0测试版】
|
||||
|
||||
1. art.dialog.get(id) 变更为 art.dialog.list[id]
|
||||
|
||||
2. 不再支持多皮肤共存,css文件默认不自动加载：
|
||||
需要在引用的脚步文件写url参数：artDialog.js?skin=default
|
||||
|
||||
3. 不再支持页面载入即时弹出对话框, 而建议在
|
||||
jQuery(function () {/* [code..] */})中或者window.onload中调用，否则页面会报错
|
||||
|
||||
4. 不再支持iframe父子窗口自动注入artDialog文件：请给需要的框架页面引用artDialog相关文件
|
||||
|
||||
5. jQuery('#test').dialog({content: 'hello world'})方式将会自动绑定click事件
|
||||
|
||||
|
||||
6. follow参数传入ID名称需要加#号，如 follow: '#myID' 如果传入元素对象则不用担心错误
|
||||
|
||||
7. left与top参数不再支持"left", "right", "center", "top", "bottom"这些关键字
|
||||
请用"0%", "100%", "50%"代替
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,10 @@
|
||||
/*!
|
||||
* artDialog iframeTools
|
||||
* Date: 2011-12-08 1:32
|
||||
* http://code.google.com/p/artdialog/
|
||||
* (c) 2009-2011 TangBin, http://www.planeArt.cn
|
||||
*
|
||||
* This is licensed under the GNU LGPL, version 2.1 or later.
|
||||
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
|
||||
*/
|
||||
eval(function(B,D,A,G,E,F){function C(A){return A<62?String.fromCharCode(A+=A<26?65:A<52?71:-4):A<63?'_':A<64?'$':C(A>>6)+C(A&63)}while(A>0)E[C(G--)]=D[--A];return B.replace(/[\w\$]+/g,function(A){return E[A]==F[A]?A:E[A]})}('(6(E,C,D,A){c B,X,W,J="@_.DATA",K="@_.OPEN",H="@_.OPENER",I=C.k=C.k||"@_.WINNAME"+(Bd Bo).Be(),F=C.VBArray&&!C.XMLHttpRequest;E(6(){!C.Bu&&7.BY==="B0"&&Br("9 Error: 7.BY === \\"B0\\"")});c G=D.d=6(){c W=C,X=6(A){f{c W=C[A].7;W.BE}u(X){v!V}v C[A].9&&W.BE("frameset").length===U};v X("d")?W=C.d:X("BB")&&(W=C.BB),W}();D.BB=G,B=G.9,W=6(){v B.BW.w},D.m=6(C,B){c W=D.d,X=W[J]||{};W[J]=X;b(B!==A)X[C]=B;else v X[C];v X},D.BQ=6(W){c X=D.d[J];X&&X[W]&&1 X[W]},D.through=X=6(){c X=B.BR(i,BJ);v G!==C&&(D.B4[X.0.Z]=X),X},G!==C&&E(C).BN("unload",6(){c A=D.B4,W;BO(c X BS A)A[X]&&(W=A[X].0,W&&(W.duration=U),A[X].s(),1 A[X])}),D.p=6(B,O,BZ){O=O||{};c N,L,M,Bc,T,S,R,Q,BF,P=D.d,Ba="8:BD;n:-Bb;d:-Bb;Bp:o U;Bf:transparent",BI="r:g%;x:g%;Bp:o U";b(BZ===!V){c BH=(Bd Bo).Be(),BG=B.replace(/([?&])W=[^&]*/,"$1_="+BH);B=BG+(BG===B?(/\\?/.test(B)?"&":"?")+"W="+BH:"")}c G=6(){c B,C,W=L.2.B2(".aui_loading"),A=N.0;M.addClass("Bi"),W&&W.hide();f{Q=T.$,R=E(Q.7),BF=Q.7.Bg}u(X){T.q.5=BI,A.z?N.z(A.z):N.8(A.n,A.d),O.j&&O.j.l(N,Q,P),O.j=By;v}B=A.r==="Bt"?R.r()+(F?U:parseInt(E(BF).Bv("marginLeft"))):A.r,C=A.x==="Bt"?R.x():A.x,setTimeout(6(){T.q.5=BI},U),N.Bk(B,C),A.z?N.z(A.z):N.8(A.n,A.d),O.j&&O.j.l(N,Q,P),O.j=By},I={w:W(),j:6(){N=i,L=N.h,Bc=L.BM,M=L.2,T=N.BK=P.7.Bn("BK"),T.Bx=B,T.k="Open"+N.0.Z,T.q.5=Ba,T.BX("frameborder",U,U),T.BX("allowTransparency",!U),S=E(T),N.2().B3(T),Q=T.$;f{Q.k=T.k,D.m(T.k+K,N),D.m(T.k+H,C)}u(X){}S.BN("BC",G)},s:6(){S.Bv("4","o").unbind("BC",G);b(O.s&&O.s.l(i,T.$,P)===!V)v!V;M.removeClass("Bi"),S[U].Bx="about:blank",S.remove();f{D.BQ(T.k+K),D.BQ(T.k+H)}u(X){}}};Bq O.Y=="6"&&(I.Y=6(){v O.Y.l(N,T.$,P)}),Bq O.y=="6"&&(I.y=6(){v O.y.l(N,T.$,P)}),1 O.2;BO(c J BS O)I[J]===A&&(I[J]=O[J]);v X(I)},D.p.Bw=D.m(I+K),D.BT=D.m(I+H)||C,D.p.origin=D.BT,D.s=6(){c X=D.m(I+K);v X&&X.s(),!V},G!=C&&E(7).BN("mousedown",6(){c X=D.p.Bw;X&&X.w()}),D.BC=6(C,D,B){B=B||!V;c G=D||{},H={w:W(),j:6(A){c W=i,X=W.0;E.ajax({url:C,success:6(X){W.2(X),G.j&&G.j.l(W,A)},cache:B})}};1 D.2;BO(c F BS G)H[F]===A&&(H[F]=G[F]);v X(H)},D.Br=6(B,A){v X({Z:"Alert",w:W(),BL:"warning",t:!U,BA:!U,2:B,Y:!U,s:A})},D.confirm=6(C,A,B){v X({Z:"Confirm",w:W(),BL:"Bm",t:!U,BA:!U,3:U.V,2:C,Y:6(X){v A.l(i,X)},y:6(X){v B&&B.l(i,X)}})},D.prompt=6(D,B,C){C=C||"";c A;v X({Z:"Prompt",w:W(),BL:"Bm",t:!U,BA:!U,3:U.V,2:["<e q=\\"margin-bottom:5px;font-Bk:12px\\">",D,"</e>","<e>","<Bl B1=\\"",C,"\\" q=\\"r:18em;Bh:6px 4px\\" />","</e>"].join(""),j:6(){A=i.h.2.B2("Bl")[U],A.select(),A.BP()},Y:6(X){v B&&B.l(i,A.B1,X)},y:!U})},D.tips=6(B,A){v X({Z:"Tips",w:W(),title:!V,y:!V,t:!U,BA:!V}).2("<e q=\\"Bh: U 1em;\\">"+B+"</e>").time(A||V.B6)},E(6(){c A=D.dragEvent;b(!A)v;c B=E(C),X=E(7),W=F?"BD":"t",H=A.prototype,I=7.Bn("e"),G=I.q;G.5="4:o;8:"+W+";n:U;d:U;r:g%;x:g%;"+"cursor:move;filter:alpha(3=U);3:U;Bf:#FFF",7.Bg.B3(I),H.Bj=H.Bs,H.BV=H.Bz,H.Bs=6(){c E=D.BP.h,C=E.BM[U],A=E.2[U].BE("BK")[U];H.Bj.BR(i,BJ),G.4="block",G.w=D.BW.w+B5,W==="BD"&&(G.r=B.r()+"a",G.x=B.x()+"a",G.n=X.scrollLeft()+"a",G.d=X.scrollTop()+"a"),A&&C.offsetWidth*C.offsetHeight>307200&&(C.q.BU="hidden")},H.Bz=6(){c X=D.BP;H.BV.BR(i,BJ),G.4="o",X&&(X.h.BM[U].q.BU="visible")}})})(i.art||i.Bu,i,i.9)','P|R|T|U|V|W|0|1|_|$|ok|id|px|if|var|top|div|try|100|DOM|this|init|name|call|data|left|none|open|style|width|close|fixed|catch|return|zIndex|height|cancel|follow|config|delete|content|opacity|display|cssText|function|document|position|artDialog|ARTDIALOG|contentWindow|lock|parent|load|absolute|getElementsByTagName|S|Y|Z|a|arguments|iframe|icon|main|bind|for|focus|removeData|apply|in|opener|visibility|_end|defaults|setAttribute|compatMode|O|Q|9999em|X|new|getTime|background|body|padding|aui_state_full|_start|size|input|question|createElement|Date|border|typeof|alert|start|auto|jQuery|css|api|src|null|end|BackCompat|value|find|appendChild|list|3|5'.split('|'),109,122,{},{}))
|
||||
@@ -0,0 +1,468 @@
|
||||
/*!
|
||||
* artDialog iframeTools
|
||||
* Date: 2011-11-25 13:54
|
||||
* http://code.google.com/p/artdialog/
|
||||
* (c) 2009-2011 TangBin, http://www.planeArt.cn
|
||||
*
|
||||
* This is licensed under the GNU LGPL, version 2.1 or later.
|
||||
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
|
||||
*/
|
||||
|
||||
;(function ($, window, artDialog, undefined) {
|
||||
|
||||
var _topDialog, _proxyDialog, _zIndex,
|
||||
_data = '@ARTDIALOG.DATA',
|
||||
_open = '@ARTDIALOG.OPEN',
|
||||
_opener = '@ARTDIALOG.OPENER',
|
||||
_winName = window.name = window.name
|
||||
|| '@ARTDIALOG.WINNAME' + + new Date,
|
||||
_isIE6 = window.VBArray && !window.XMLHttpRequest;
|
||||
|
||||
$(function () {
|
||||
!window.jQuery && document.compatMode === 'BackCompat'
|
||||
// 不支持怪异模式，请用主流的XHTML1.0或者HTML5的DOCTYPE申明
|
||||
&& alert('artDialog Error: document.compatMode === "BackCompat"');
|
||||
});
|
||||
|
||||
|
||||
/** 获取 artDialog 可跨级调用的最高层的 window 对象 */
|
||||
var _top = artDialog.top = function () {
|
||||
var top = window,
|
||||
test = function (name) {
|
||||
try {
|
||||
var doc = window[name].document; // 跨域|无权限
|
||||
doc.getElementsByTagName; // chrome 本地安全限制
|
||||
} catch (e) {
|
||||
return false;
|
||||
};
|
||||
|
||||
return window[name].artDialog
|
||||
// 框架集无法显示第三方元素
|
||||
&& doc.getElementsByTagName('frameset').length === 0;
|
||||
};
|
||||
|
||||
if (test('top')) {
|
||||
top = window.top;
|
||||
} else if (test('parent')) {
|
||||
top = window.parent;
|
||||
};
|
||||
|
||||
return top;
|
||||
}();
|
||||
artDialog.parent = _top; // 兼容v4.1之前版本，未来版本将删除此
|
||||
|
||||
|
||||
_topDialog = _top.artDialog;
|
||||
|
||||
|
||||
// 获取顶层页面对话框叠加值
|
||||
_zIndex = function () {
|
||||
return _topDialog.defaults.zIndex;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 跨框架数据共享接口
|
||||
* @see http://www.planeart.cn/?p=1554
|
||||
* @param {String} 存储的数据名
|
||||
* @param {Any} 将要存储的任意数据(无此项则返回被查询的数据)
|
||||
*/
|
||||
artDialog.data = function (name, value) {
|
||||
var top = artDialog.top,
|
||||
cache = top[_data] || {};
|
||||
top[_data] = cache;
|
||||
|
||||
if (value !== undefined) {
|
||||
cache[name] = value;
|
||||
} else {
|
||||
return cache[name];
|
||||
};
|
||||
return cache;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 数据共享删除接口
|
||||
* @param {String} 删除的数据名
|
||||
*/
|
||||
artDialog.removeData = function (name) {
|
||||
var cache = artDialog.top[_data];
|
||||
if (cache && cache[name]) delete cache[name];
|
||||
};
|
||||
|
||||
|
||||
/** 跨框架普通对话框 */
|
||||
artDialog.through = _proxyDialog = function () {
|
||||
var api = _topDialog.apply(this, arguments);
|
||||
|
||||
// 缓存从当前 window（可能为iframe）调出所有跨框架对话框，
|
||||
// 以便让当前 window 卸载前去关闭这些对话框。
|
||||
// 因为iframe注销后也会从内存中删除其创建的对象，这样可以防止回调函数报错
|
||||
if (_top !== window) artDialog.list[api.config.id] = api;
|
||||
return api;
|
||||
};
|
||||
|
||||
// 框架页面卸载前关闭所有穿越的对话框
|
||||
_top !== window && $(window).bind('unload', function () {
|
||||
var list = artDialog.list, config;
|
||||
for (var i in list) {
|
||||
if (list[i]) {
|
||||
config = list[i].config;
|
||||
if (config) config.duration = 0; // 取消动画
|
||||
list[i].close();
|
||||
//delete list[i];
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 弹窗 (iframe)
|
||||
* @param {String} 地址
|
||||
* @param {Object} 配置参数. 这里传入的回调函数接收的第1个参数为iframe内部window对象
|
||||
* @param {Boolean} 是否允许缓存. 默认true
|
||||
*/
|
||||
artDialog.open = function (url, options, cache) {
|
||||
options = options || {};
|
||||
|
||||
var api, DOM,
|
||||
$content, $main, iframe, $iframe, $idoc, iwin, ibody,
|
||||
top = artDialog.top,
|
||||
initCss = 'position:absolute;left:-9999em;top:-9999em;border:none 0;background:transparent',
|
||||
loadCss = 'width:100%;height:100%;border:none 0';
|
||||
|
||||
if (cache === false) {
|
||||
var ts = + new Date,
|
||||
ret = url.replace(/([?&])_=[^&]*/, "$1_=" + ts );
|
||||
url = ret + ((ret === url) ? (/\?/.test(url) ? "&" : "?") + "_=" + ts : "");
|
||||
};
|
||||
|
||||
var load = function () {
|
||||
var iWidth, iHeight,
|
||||
loading = DOM.content.find('.aui_loading'),
|
||||
aConfig = api.config;
|
||||
|
||||
$content.addClass('aui_state_full');
|
||||
|
||||
loading && loading.hide();
|
||||
|
||||
try {
|
||||
iwin = iframe.contentWindow;
|
||||
$idoc = $(iwin.document);
|
||||
ibody = iwin.document.body;
|
||||
} catch (e) {// 跨域
|
||||
iframe.style.cssText = loadCss;
|
||||
|
||||
aConfig.follow
|
||||
? api.follow(aConfig.follow)
|
||||
: api.position(aConfig.left, aConfig.top);
|
||||
|
||||
options.init && options.init.call(api, iwin, top);
|
||||
options.init = null;
|
||||
return;
|
||||
};
|
||||
|
||||
// 获取iframe内部尺寸
|
||||
iWidth = aConfig.width === 'auto'
|
||||
? $idoc.width() + (_isIE6 ? 0 : parseInt($(ibody).css('marginLeft')))
|
||||
: aConfig.width;
|
||||
|
||||
iHeight = aConfig.height === 'auto'
|
||||
? $idoc.height()
|
||||
: aConfig.height;
|
||||
|
||||
// 适应iframe尺寸
|
||||
setTimeout(function () {
|
||||
iframe.style.cssText = loadCss;
|
||||
}, 0);// setTimeout: 防止IE6~7对话框样式渲染异常
|
||||
api.size(iWidth, iHeight);
|
||||
|
||||
// 调整对话框位置
|
||||
aConfig.follow
|
||||
? api.follow(aConfig.follow)
|
||||
: api.position(aConfig.left, aConfig.top);
|
||||
|
||||
options.init && options.init.call(api, iwin, top);
|
||||
options.init = null;
|
||||
};
|
||||
|
||||
var config = {
|
||||
zIndex: _zIndex(),
|
||||
init: function () {
|
||||
api = this;
|
||||
DOM = api.DOM;
|
||||
$main = DOM.main;
|
||||
$content = DOM.content;
|
||||
|
||||
iframe = api.iframe = top.document.createElement('iframe');
|
||||
iframe.src = url;
|
||||
iframe.name = 'Open' + api.config.id;
|
||||
iframe.style.cssText = initCss;
|
||||
iframe.setAttribute('frameborder', 0, 0);
|
||||
iframe.setAttribute('allowTransparency', true);
|
||||
|
||||
$iframe = $(iframe);
|
||||
api.content().appendChild(iframe);
|
||||
iwin = iframe.contentWindow;
|
||||
|
||||
try {
|
||||
iwin.name = iframe.name;
|
||||
artDialog.data(iframe.name + _open, api);
|
||||
artDialog.data(iframe.name + _opener, window);
|
||||
} catch (e) {};
|
||||
|
||||
$iframe.bind('load', load);
|
||||
},
|
||||
close: function () {
|
||||
$iframe.css('display', 'none').unbind('load', load);
|
||||
|
||||
if (options.close && options.close.call(this, iframe.contentWindow, top) === false) {
|
||||
return false;
|
||||
};
|
||||
$content.removeClass('aui_state_full');
|
||||
|
||||
// 重要！需要重置iframe地址，否则下次出现的对话框在IE6、7无法聚焦input
|
||||
// IE删除iframe后，iframe仍然会留在内存中出现上述问题，置换src是最容易解决的方法
|
||||
$iframe[0].src = 'about:blank';
|
||||
$iframe.remove();
|
||||
|
||||
try {
|
||||
artDialog.removeData(iframe.name + _open);
|
||||
artDialog.removeData(iframe.name + _opener);
|
||||
} catch (e) {};
|
||||
}
|
||||
};
|
||||
|
||||
// 回调函数第一个参数指向iframe内部window对象
|
||||
if (typeof options.ok === 'function') config.ok = function () {
|
||||
return options.ok.call(api, iframe.contentWindow, top);
|
||||
};
|
||||
if (typeof options.cancel === 'function') config.cancel = function () {
|
||||
return options.cancel.call(api, iframe.contentWindow, top);
|
||||
};
|
||||
|
||||
delete options.content;
|
||||
|
||||
for (var i in options) {
|
||||
if (config[i] === undefined) config[i] = options[i];
|
||||
};
|
||||
|
||||
return _proxyDialog(config);
|
||||
};
|
||||
|
||||
|
||||
/** 引用open方法扩展方法(在open打开的iframe内部私有方法) */
|
||||
artDialog.open.api = artDialog.data(_winName + _open);
|
||||
|
||||
|
||||
/** 引用open方法触发来源页面window(在open打开的iframe内部私有方法) */
|
||||
artDialog.opener = artDialog.data(_winName + _opener) || window;
|
||||
artDialog.open.origin = artDialog.opener; // 兼容v4.1之前版本，未来版本将删除此
|
||||
|
||||
/** artDialog.open 打开的iframe页面里关闭对话框快捷方法 */
|
||||
artDialog.close = function () {
|
||||
var api = artDialog.data(_winName + _open);
|
||||
api && api.close();
|
||||
return false;
|
||||
};
|
||||
|
||||
// 点击iframe内容切换叠加高度
|
||||
_top != window && $(document).bind('mousedown', function () {
|
||||
var api = artDialog.open.api;
|
||||
api && api.zIndex();
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Ajax填充内容
|
||||
* @param {String} 地址
|
||||
* @param {Object} 配置参数
|
||||
* @param {Boolean} 是否允许缓存. 默认true
|
||||
*/
|
||||
artDialog.load = function(url, options, cache){
|
||||
cache = cache || false;
|
||||
var opt = options || {};
|
||||
|
||||
var config = {
|
||||
zIndex: _zIndex(),
|
||||
init: function(here){
|
||||
var api = this,
|
||||
aConfig = api.config;
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
success: function (content) {
|
||||
api.content(content);
|
||||
opt.init && opt.init.call(api, here);
|
||||
},
|
||||
cache: cache
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
delete options.content;
|
||||
|
||||
for (var i in opt) {
|
||||
if (config[i] === undefined) config[i] = opt[i];
|
||||
};
|
||||
|
||||
return _proxyDialog(config);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 警告
|
||||
* @param {String} 消息内容
|
||||
*/
|
||||
artDialog.alert = function (content, callback) {
|
||||
return _proxyDialog({
|
||||
id: 'Alert',
|
||||
zIndex: _zIndex(),
|
||||
icon: 'warning',
|
||||
fixed: true,
|
||||
lock: true,
|
||||
content: content,
|
||||
ok: true,
|
||||
close: callback
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 确认
|
||||
* @param {String} 消息内容
|
||||
* @param {Function} 确定按钮回调函数
|
||||
* @param {Function} 取消按钮回调函数
|
||||
*/
|
||||
artDialog.confirm = function (content, yes, no) {
|
||||
return _proxyDialog({
|
||||
id: 'Confirm',
|
||||
zIndex: _zIndex(),
|
||||
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 _proxyDialog({
|
||||
id: 'Prompt',
|
||||
zIndex: _zIndex(),
|
||||
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 _proxyDialog({
|
||||
id: 'Tips',
|
||||
zIndex: _zIndex(),
|
||||
title: false,
|
||||
cancel: false,
|
||||
fixed: true,
|
||||
lock: false
|
||||
})
|
||||
.content('<div style="padding: 0 1em;">' + content + '</div>')
|
||||
.time(time || 1.5);
|
||||
};
|
||||
|
||||
|
||||
// 增强artDialog拖拽体验
|
||||
// - 防止鼠标落入iframe导致不流畅
|
||||
// - 对超大对话框拖动优化
|
||||
$(function () {
|
||||
var event = artDialog.dragEvent;
|
||||
if (!event) return;
|
||||
|
||||
var $window = $(window),
|
||||
$document = $(document),
|
||||
positionType = _isIE6 ? 'absolute' : 'fixed',
|
||||
dragEvent = event.prototype,
|
||||
mask = document.createElement('div'),
|
||||
style = mask.style;
|
||||
|
||||
style.cssText = 'display:none;position:' + positionType + ';left:0;top:0;width:100%;height:100%;'
|
||||
+ 'cursor:move;filter:alpha(opacity=0);opacity:0;background:#FFF';
|
||||
|
||||
document.body.appendChild(mask);
|
||||
dragEvent._start = dragEvent.start;
|
||||
dragEvent._end = dragEvent.end;
|
||||
|
||||
dragEvent.start = function () {
|
||||
var DOM = artDialog.focus.DOM,
|
||||
main = DOM.main[0],
|
||||
iframe = DOM.content[0].getElementsByTagName('iframe')[0];
|
||||
|
||||
dragEvent._start.apply(this, arguments);
|
||||
style.display = 'block';
|
||||
style.zIndex = artDialog.defaults.zIndex + 3;
|
||||
|
||||
if (positionType === 'absolute') {
|
||||
style.width = $window.width() + 'px';
|
||||
style.height = $window.height() + 'px';
|
||||
style.left = $document.scrollLeft() + 'px';
|
||||
style.top = $document.scrollTop() + 'px';
|
||||
};
|
||||
|
||||
if (iframe && main.offsetWidth * main.offsetHeight > 307200) {
|
||||
main.style.visibility = 'hidden';
|
||||
};
|
||||
};
|
||||
|
||||
dragEvent.end = function () {
|
||||
var dialog = artDialog.focus;
|
||||
dragEvent._end.apply(this, arguments);
|
||||
style.display = 'none';
|
||||
if (dialog) dialog.DOM.main[0].style.visibility = 'visible';
|
||||
};
|
||||
});
|
||||
|
||||
})(this.art || this.jQuery, this, this.artDialog);
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>artDialog</title>
|
||||
<meta name="keywords" content="artDialog,javascript,dialog,jQuery" />
|
||||
<meta name="description" content="artDialog是一个精巧的web对话框组件，压缩后只有十多KB，并且不依赖其他框架。" />
|
||||
<script>
|
||||
// skin demo
|
||||
(function() {
|
||||
var _skin, _jQuery;
|
||||
var _search = window.location.search;
|
||||
if (_search) {
|
||||
_skin = _search.split('demoSkin=')[1];
|
||||
_jQuery = _search.indexOf('jQuery=true') !== -1;
|
||||
if (_jQuery) document.write('<scr'+'ipt src="jquery-1.6.2.min.js"></sc'+'ript>');
|
||||
};
|
||||
|
||||
document.write('<scr'+'ipt src="artDialog.source.js?skin=' + (_skin || 'default') +'"></sc'+'ript>');
|
||||
window._isDemoSkin = !!_skin;
|
||||
})();
|
||||
</script>
|
||||
<script src="./plugins/iframeTools.source.js"></script>
|
||||
<script src="./_doc/demo.js"></script>
|
||||
<script src="./_doc/highlight/highlight.pack.js"></script>
|
||||
<script src="./_doc/highlight/languages/javascript.js"></script>
|
||||
<script>
|
||||
hljs.tabReplace = ' ';
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<link href="./_doc/demo.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="./_doc/highlight/styles/magula.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="index.html">artDialog</a></h1>
|
||||
<ul id="nav" class="nav">
|
||||
<li><a href="index.html" class="home">首页</a></li>
|
||||
<li><a href="./_doc/API.html" class="api">文档</a></li>
|
||||
<li><a href="./_doc/down.html" class="down">下载</a></li>
|
||||
<li><a href="./_doc/log.html" class="log">更新</a></li>
|
||||
<li><a href="./_doc/labs.html" class="labs">实验</a></li>
|
||||
<li><a href="./_doc/license.html" class="license">授权</a></li>
|
||||
|
|
||||
<li><a href="#" id="nav-skin">皮肤</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="tips" style="margin:4px 5px; padding:8px; background:#EEF7F5; text-align:left; color:#000; border-radius:3px; border:1px solid #D7EAE2; ">artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口</div>
|
||||
<dl class="about">
|
||||
<dt>自适应内容</dt>
|
||||
<dd>artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。</dd>
|
||||
<dt>完善的接口</dt>
|
||||
<dd>它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。</dd>
|
||||
<dt>细致的体验</dt>
|
||||
<dd>如果不是在输入状态，它支持Esc快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应……</dd>
|
||||
<dt>跨平台兼容</dt>
|
||||
<dd>兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(<a href="http://www.planeart.cn/?p=877" target="_blank" title="阅读作者ie6Fixed相关博文" style="text-decoration:underline">fixed</a>)、<!--[if gte IE 7]><!-->覆盖下拉控件<!--<![endif]--><!--[if lt IE 7]><select><option>覆盖下拉控件</option></select><![endif]-->、alpha通道png背景。</dd>
|
||||
</dl>
|
||||
<h2>快速入门</h2>
|
||||
<h3>一、使用传统的参数</h3>
|
||||
<p>art.dialog(content, ok, cancel)</p>
|
||||
<div id="demoCode01">
|
||||
<pre><code class=" javascript">art.dialog('简单愉悦的接口，强大的表现力，优雅的内部实现', function(){alert('yes');});</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="btn1" title="btn1" name="demoCode01">运行»</button>
|
||||
</p>
|
||||
<h3>二、使用字面量传参</h3>
|
||||
<p>art.dialog(options)</p>
|
||||
<div id="demoCode02">
|
||||
<pre><code class=" javascript">var dialog = art.dialog({
|
||||
title: '欢迎',
|
||||
content: '欢迎使用artDialog对话框组件！',
|
||||
icon: 'succeed',
|
||||
follow: document.getElementById('btn2'),
|
||||
ok: function(){
|
||||
this.title('警告').content('请注意artDialog两秒后将关闭！').lock().time(2);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons">
|
||||
<button class="runCode" id="btn2" title="btn2" name="demoCode02">运行»</button>
|
||||
</p>
|
||||
<p>更多配置参数用法请查阅API文档： <a href="./_doc/API.html#options">./_doc/API.html#options</a></p>
|
||||
<h3>三、扩展方法</h3>
|
||||
<p>需要对弹出后的对话框操作？artDialog简单实用的扩展方法可以使这一切变得简单。</p>
|
||||
<p>如在ajax异步操作中，我们可以先定义一个变量引用对话框返回的扩展方法：</p>
|
||||
<pre><code class=" javascript">var myDialog = art.dialog();// 初始化一个带有loading图标的空对话框
|
||||
jQuery.ajax({
|
||||
url: 'http://web5.qq.com/content?id=1',
|
||||
success: function (data) {
|
||||
myDialog.content(data);// 填充对话框内容
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<p>如果需要使用程序控制关闭，可以使用"close"方法关闭对话框：</p>
|
||||
<pre><code class=" javascript">myDialog.close();</code></pre>
|
||||
<p>更多扩展方法用法请查阅API文档： <a href="./_doc/API.html#API">./_doc/API.html#API</a></p>
|
||||
<h2>插件：框架应用工具</h2>
|
||||
<p>artDialog针对CMS类的框架应用提供了专属插件，如穿越框架、iframe、AJAX、跨框架传值操作等。</p>
|
||||
<p>例： 使用open方法嵌入页面，并使用data方法在各个iframe间传递数据：</p>
|
||||
<div id="demoCode04-3">
|
||||
<pre><code class="javascript">var val = document.getElementById('demoInput04-3').value;
|
||||
art.dialog.data('test', val);
|
||||
art.dialog.data('homeDemoPath', './_doc/');
|
||||
|
||||
// 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据，如：
|
||||
// document.getElementById('aInput').value = art.dialog.data('test');
|
||||
art.dialog.open('./_doc/iframeA.html');
|
||||
</code></pre>
|
||||
</div>
|
||||
<p class="buttons"> 请输入测试文字：
|
||||
<input id="demoInput04-3" title="demoInput04-3" type="text" value="精于心，简于形" style="padding:4px; width:16em; margin-right:10px" />
|
||||
<button class="runCode" name="demoCode04-3">运行»</button>
|
||||
</p>
|
||||
<p>插件更多功能请查阅API文档： <a target="_blank" href="./iframeTop.html">./iframeTop.html</a></p>
|
||||
<h2>jQuery + artDialog</h2>
|
||||
<p>artDialog提供了一个jQuery版本，功能与标准版一致，调用只需要把art前缀改成jQuery的命名空间。</p>
|
||||
<pre><code class=" javascript">// 普通调用
|
||||
$.dialog({content:'hello world!'});
|
||||
|
||||
// 使用选择器方式，此时自动使用绑定了live click事件，同时启用follow模式
|
||||
$('#main .test').dialog({content: 'hello world'});</code></pre>
|
||||
<p>(最低兼容jquery1.3.2，但框架应用插件需要jquery1.4+运行<a href="#?" title="jQuery版本小于1.4不能获取iframe内部尺寸，导致open方法无法自适应内容尺寸">[?]</a>)</p>
|
||||
<h2>联系</h2>
|
||||
|
||||
|
||||
<div style="margin:4px 0; padding:5px; background:#EEF7F5; text-align:left; color:#000; border-radius:3px; border:1px solid #D7EAE2;" class="tips"><span style="color:#DFB113">注意！</span>artDialog4+即将停止维护，在框架满天飞的时代结束后，其历史使命已经完成。新版本<a href="https://github.com/aui/artDialog" style="text-decoration:underline;">artDialog 5+</a>很小，却依然动人。若要迁移，请抛弃iframe，使用ajax技术。</div>
|
||||
|
||||
<p>如果你对artDialog有什么意见建议可以用下面任意一种联系方式找到作者。artDialog一直在不断完善自身，这个愉悦的过程中感谢有你的参与～</p>
|
||||
<p><strong>提交BUG必备项</strong>：1、浏览器名称，版本 2、artDialog版本号（只支持4+版本） 3、简明扼要的描述信息 4、建议提取一份BUG DEMO，这样解决问题的概率增加300%</p>
|
||||
<p>如果对使用问题有疑惑，可以前往由 artDialog 爱好者建立的QQ群寻求帮助（前提是先自己阅读文档）： 44030323 </p>
|
||||
<p>作者：糖饼<br />
|
||||
邮箱：<span id="myEmail"></span> <span style="color:#990">(仅用作bug提交)</span><br />
|
||||
网站：<a href="http://www.planeart.cn" target="_blank">PlaneArt.Cn</a><br />
|
||||
微博：<a href="http://t.qq.com/tangbin">t.qq.com/tangbin</a></p>
|
||||
<h2>捐赠</h2>
|
||||
<p>artDialog就是你一直想要的对话框么？哇～那么我非常期待您能够热情的提供15元或者其他金额的捐赠鼓励～正如您支持其他开源项目一样。</p>
|
||||
<p>支付宝: <a href="https://me.alipay.com/planeart" target="_blank">https://me.alipay.com/planeart</a></p>
|
||||
<p>您因如果使用artDialog而受益或者感到愉悦，您还可以这样帮助artDialog成长：</p>
|
||||
<p> 1、共同参与并完善artDialog或用blog/微博/Twitter把它分享它给更多的人。</p>
|
||||
<p> 2、如artDialog有幸被用在你的项目，请您联系我，我后续将在artDialog主页展示您项目/企业的LOGO（目前有盛大phpCMS、腾讯、中国电信等企业使用它）。</p>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
var myMail = 1987 + '.' + 'tangbin' + '@' + 'gmail.com';
|
||||
myMail = '<a href="mailto:' + myMail + '">' + myMail + '</a>';
|
||||
document.getElementById('myEmail').innerHTML = myMail;
|
||||
|
||||
|
||||
})();
|
||||
</script>
|
||||
<script>_isDemoSkin && window._demoSkin && _demoSkin();</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,165 @@
|
||||
GNU LESSER GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
|
||||
This version of the GNU Lesser General Public License incorporates
|
||||
the terms and conditions of version 3 of the GNU General Public
|
||||
License, supplemented by the additional permissions listed below.
|
||||
|
||||
0. Additional Definitions.
|
||||
|
||||
As used herein, "this License" refers to version 3 of the GNU Lesser
|
||||
General Public License, and the "GNU GPL" refers to version 3 of the GNU
|
||||
General Public License.
|
||||
|
||||
"The Library" refers to a covered work governed by this License,
|
||||
other than an Application or a Combined Work as defined below.
|
||||
|
||||
An "Application" is any work that makes use of an interface provided
|
||||
by the Library, but which is not otherwise based on the Library.
|
||||
Defining a subclass of a class defined by the Library is deemed a mode
|
||||
of using an interface provided by the Library.
|
||||
|
||||
A "Combined Work" is a work produced by combining or linking an
|
||||
Application with the Library. The particular version of the Library
|
||||
with which the Combined Work was made is also called the "Linked
|
||||
Version".
|
||||
|
||||
The "Minimal Corresponding Source" for a Combined Work means the
|
||||
Corresponding Source for the Combined Work, excluding any source code
|
||||
for portions of the Combined Work that, considered in isolation, are
|
||||
based on the Application, and not on the Linked Version.
|
||||
|
||||
The "Corresponding Application Code" for a Combined Work means the
|
||||
object code and/or source code for the Application, including any data
|
||||
and utility programs needed for reproducing the Combined Work from the
|
||||
Application, but excluding the System Libraries of the Combined Work.
|
||||
|
||||
1. Exception to Section 3 of the GNU GPL.
|
||||
|
||||
You may convey a covered work under sections 3 and 4 of this License
|
||||
without being bound by section 3 of the GNU GPL.
|
||||
|
||||
2. Conveying Modified Versions.
|
||||
|
||||
If you modify a copy of the Library, and, in your modifications, a
|
||||
facility refers to a function or data to be supplied by an Application
|
||||
that uses the facility (other than as an argument passed when the
|
||||
facility is invoked), then you may convey a copy of the modified
|
||||
version:
|
||||
|
||||
a) under this License, provided that you make a good faith effort to
|
||||
ensure that, in the event an Application does not supply the
|
||||
function or data, the facility still operates, and performs
|
||||
whatever part of its purpose remains meaningful, or
|
||||
|
||||
b) under the GNU GPL, with none of the additional permissions of
|
||||
this License applicable to that copy.
|
||||
|
||||
3. Object Code Incorporating Material from Library Header Files.
|
||||
|
||||
The object code form of an Application may incorporate material from
|
||||
a header file that is part of the Library. You may convey such object
|
||||
code under terms of your choice, provided that, if the incorporated
|
||||
material is not limited to numerical parameters, data structure
|
||||
layouts and accessors, or small macros, inline functions and templates
|
||||
(ten or fewer lines in length), you do both of the following:
|
||||
|
||||
a) Give prominent notice with each copy of the object code that the
|
||||
Library is used in it and that the Library and its use are
|
||||
covered by this License.
|
||||
|
||||
b) Accompany the object code with a copy of the GNU GPL and this license
|
||||
document.
|
||||
|
||||
4. Combined Works.
|
||||
|
||||
You may convey a Combined Work under terms of your choice that,
|
||||
taken together, effectively do not restrict modification of the
|
||||
portions of the Library contained in the Combined Work and reverse
|
||||
engineering for debugging such modifications, if you also do each of
|
||||
the following:
|
||||
|
||||
a) Give prominent notice with each copy of the Combined Work that
|
||||
the Library is used in it and that the Library and its use are
|
||||
covered by this License.
|
||||
|
||||
b) Accompany the Combined Work with a copy of the GNU GPL and this license
|
||||
document.
|
||||
|
||||
c) For a Combined Work that displays copyright notices during
|
||||
execution, include the copyright notice for the Library among
|
||||
these notices, as well as a reference directing the user to the
|
||||
copies of the GNU GPL and this license document.
|
||||
|
||||
d) Do one of the following:
|
||||
|
||||
0) Convey the Minimal Corresponding Source under the terms of this
|
||||
License, and the Corresponding Application Code in a form
|
||||
suitable for, and under terms that permit, the user to
|
||||
recombine or relink the Application with a modified version of
|
||||
the Linked Version to produce a modified Combined Work, in the
|
||||
manner specified by section 6 of the GNU GPL for conveying
|
||||
Corresponding Source.
|
||||
|
||||
1) Use a suitable shared library mechanism for linking with the
|
||||
Library. A suitable mechanism is one that (a) uses at run time
|
||||
a copy of the Library already present on the user's computer
|
||||
system, and (b) will operate properly with a modified version
|
||||
of the Library that is interface-compatible with the Linked
|
||||
Version.
|
||||
|
||||
e) Provide Installation Information, but only if you would otherwise
|
||||
be required to provide such information under section 6 of the
|
||||
GNU GPL, and only to the extent that such information is
|
||||
necessary to install and execute a modified version of the
|
||||
Combined Work produced by recombining or relinking the
|
||||
Application with a modified version of the Linked Version. (If
|
||||
you use option 4d0, the Installation Information must accompany
|
||||
the Minimal Corresponding Source and Corresponding Application
|
||||
Code. If you use option 4d1, you must provide the Installation
|
||||
Information in the manner specified by section 6 of the GNU GPL
|
||||
for conveying Corresponding Source.)
|
||||
|
||||
5. Combined Libraries.
|
||||
|
||||
You may place library facilities that are a work based on the
|
||||
Library side by side in a single library together with other library
|
||||
facilities that are not Applications and are not covered by this
|
||||
License, and convey such a combined library under terms of your
|
||||
choice, if you do both of the following:
|
||||
|
||||
a) Accompany the combined library with a copy of the same work based
|
||||
on the Library, uncombined with any other library facilities,
|
||||
conveyed under the terms of this License.
|
||||
|
||||
b) Give prominent notice with the combined library that part of it
|
||||
is a work based on the Library, and explaining where to find the
|
||||
accompanying uncombined form of the same work.
|
||||
|
||||
6. Revised Versions of the GNU Lesser General Public License.
|
||||
|
||||
The Free Software Foundation may publish revised and/or new versions
|
||||
of the GNU Lesser General Public License from time to time. Such new
|
||||
versions will be similar in spirit to the present version, but may
|
||||
differ in detail to address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the
|
||||
Library as you received it specifies that a certain numbered version
|
||||
of the GNU Lesser General Public License "or any later version"
|
||||
applies to it, you have the option of following the terms and
|
||||
conditions either of that published version or of any later version
|
||||
published by the Free Software Foundation. If the Library as you
|
||||
received it does not specify a version number of the GNU Lesser
|
||||
General Public License, you may choose any version of the GNU Lesser
|
||||
General Public License ever published by the Free Software Foundation.
|
||||
|
||||
If the Library as you received it specifies that a proxy can decide
|
||||
whether future versions of the GNU Lesser General Public License shall
|
||||
apply, that proxy's public statement of acceptance of any version is
|
||||
permanent authorization for you to choose that version for the
|
||||
Library.
|
||||
@@ -0,0 +1,61 @@
|
||||
@charset "utf-8";
|
||||
/*
|
||||
* artDialog skin
|
||||
* http://code.google.com/p/artdialog/
|
||||
* (c) 2009-2011 TangBin, http://www.planeArt.cn
|
||||
*
|
||||
* This is licensed under the GNU LGPL, version 2.1 or later.
|
||||
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
|
||||
*/
|
||||
|
||||
/* common start */
|
||||
body { _margin:0; _height:100%; /*IE6 BUG*/ }
|
||||
.aui_outer { text-align:left; }
|
||||
table.aui_border, table.aui_dialog { border:0; margin:0; border-collapse:collapse; width:auto; }
|
||||
.aui_nw, .aui_n, .aui_ne, .aui_w, .aui_c, .aui_e, .aui_sw, .aui_s, .aui_se, .aui_header, .aui_tdIcon, .aui_main, .aui_footer { padding:0; }
|
||||
.aui_header, .aui_buttons button { font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; }
|
||||
.aui_title { overflow:hidden; text-overflow: ellipsis; }
|
||||
.aui_state_noTitle .aui_title { display:none; }
|
||||
.aui_close { display:block; position:absolute; text-decoration:none; outline:none; _cursor:pointer; }
|
||||
.aui_close:hover { text-decoration:none; }
|
||||
.aui_main { text-align:center; min-width:9em; min-width:0\9/*IE8 BUG*/; }
|
||||
.aui_content { display:inline-block; *zoom:1; *display:inline; text-align:left; border:none 0; }
|
||||
.aui_content.aui_state_full { display:block; width:100%; margin:0; padding:0!important; height:100%; }
|
||||
.aui_loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(icons/loading.gif) no-repeat center center; }
|
||||
.aui_icon { vertical-align: middle; }
|
||||
.aui_icon div { width:48px; height:48px; margin:10px 0 10px 10px; background-position: center center; background-repeat:no-repeat; }
|
||||
.aui_buttons { padding:8px; text-align:right; white-space:nowrap; }
|
||||
.aui_buttons button { margin-left:15px; padding: 6px 8px; cursor: pointer; display: inline-block; text-align: center; line-height: 1; *padding:4px 10px; *height:2em; letter-spacing:2px; font-family: Tahoma, Arial/9!important; width:auto; overflow:visible; *width:1; color: #333; border: solid 1px #999; border-radius: 5px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); background: linear-gradient(top, #FFF, #DDD); background: -moz-linear-gradient(top, #FFF, #DDD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD)); text-shadow: 0px 1px 1px rgba(255, 255, 255, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .09); -moz-transition:-moz-box-shadow linear .2s; -webkit-transition: -webkit-box-shadow linear .2s; transition: box-shadow linear .2s; }
|
||||
.aui_buttons button::-moz-focus-inner{ border:0; padding:0; margin:0; }
|
||||
.aui_buttons button:focus { outline:none 0; border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); }
|
||||
.aui_buttons button:hover { color:#000; border-color:#666; }
|
||||
.aui_buttons button:active { border-color:#666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF'); background: linear-gradient(top, #DDD, #FFF); background: -moz-linear-gradient(top, #DDD, #FFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF)); box-shadow:inset 0 1px 5px rgba(66, 109, 201, .9), inset 0 1px 1em rgba(0, 0, 0, .3); }
|
||||
.aui_buttons button[disabled] { cursor:default; color:#666; background:#DDD; border: solid 1px #999; filter:alpha(opacity=50); opacity:.5; box-shadow:none; }
|
||||
button.aui_state_highlight { color: #FFF; border: solid 1px #1c6a9e; background: #2288cc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); text-shadow: -1px -1px 1px #1c6a9e; }
|
||||
button.aui_state_highlight:hover { color:#FFF; border-color:#0F3A56; }
|
||||
button.aui_state_highlight:active { border-color:#1c6a9e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); }
|
||||
/* common end */
|
||||
|
||||
.aui_inner { background:#FFF; }
|
||||
.aui_titleBar { width:100%; height:0; position:relative; bottom:30px; _bottom:0; _margin-top:-30px; }
|
||||
.aui_title { height:29px; line-height:29px; padding:0 16px 0 0; _padding:0; color:#FFF; font-weight:700; text-shadow:1px 1px 0 rgba(0, 0, 0, .9); }
|
||||
.aui_nw, .aui_ne, .aui_sw, .aui_se, .aui_n, .aui_s, .aui_close { background-image:url(aero/aero_s.png); background-repeat:no-repeat; }
|
||||
.aui_nw { width:14px; height:34px; background-position: 0 0; _png:aero/ie6/aui_nw.png; }
|
||||
.aui_ne { width:14px; height:34px; background-position: -14px 0; _png:aero/ie6/aui_ne.png; }
|
||||
.aui_sw { width:14px; height:14px; background-position: 0 -34px; _png:aero/ie6/aui_sw.png; }
|
||||
.aui_se { width:14px; height:14px; background-position: -14px -34px; _png:aero/ie6/aui_se.png; }
|
||||
.aui_close { top:7px; right:0; _z-index:1; width:13px; height:13px; _font-size:0; _line-height:0; text-indent:-9999em; background-position:left -96px; _background:url(aero/ie6/aui_close.png); }
|
||||
.aui_close:hover { background-position:right -96px; _background:url(aero/ie6/aui_close.hover.png); }
|
||||
.aui_n, .aui_s { background-repeat:repeat-x; }
|
||||
.aui_n { background-position: 0 -48px; _png:aero/ie6/aui_n.png; }
|
||||
.aui_s { background-position: 0 -82px; _png:aero/ie6/aui_s.png; }
|
||||
.aui_w, .aui_e { background-image:url(aero/aero_s2.png); background-repeat:repeat-y; }
|
||||
.aui_w { background-position:left top; _png:aero/ie6/aui_w.png; }
|
||||
.aui_e { background-position: right bottom; _png:aero/ie6/aui_e.png; }
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_se { width:3px; height:3px; }
|
||||
.aui_state_noTitle .aui_inner { border:1px solid #666; background:#FFF; }
|
||||
.aui_state_noTitle .aui_outer { box-shadow:none; }
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_n, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_w, .aui_state_noTitle .aui_e, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_s, .aui_state_noTitle .aui_se { background:rgba(0, 0, 0, .05); background:#000\9!important; filter:alpha(opacity=5)!important; }
|
||||
.aui_state_noTitle .aui_titleBar { bottom:0; _bottom:0; _margin-top:0; }
|
||||
.aui_state_noTitle .aui_close { top:0; right:0; width:18px; height:18px; line-height:18px; text-align:center; text-indent:0; font-family: Helvetica, STHeiti; _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino; font-size:18px; text-decoration:none; color:#214FA3; background:none; filter:!important; }
|
||||
.aui_state_noTitle .aui_close:hover, .aui_state_noTitle .aui_close:active { text-decoration:none; color:#900; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 B |
Binary file not shown.
|
After Width: | Height: | Size: 190 B |
Binary file not shown.
|
After Width: | Height: | Size: 190 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 601 B |
Binary file not shown.
|
After Width: | Height: | Size: 528 B |
Binary file not shown.
|
After Width: | Height: | Size: 971 B |
Binary file not shown.
|
After Width: | Height: | Size: 471 B |
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
Binary file not shown.
|
After Width: | Height: | Size: 233 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,79 @@
|
||||
@charset "utf-8";
|
||||
/*
|
||||
* artDialog skin
|
||||
* http://code.google.com/p/artdialog/
|
||||
* (c) 2009-2011 TangBin, http://www.planeArt.cn
|
||||
*
|
||||
* This is licensed under the GNU LGPL, version 2.1 or later.
|
||||
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
|
||||
*/
|
||||
|
||||
/* common start */
|
||||
body { _margin:0; _height:100%; /*IE6 BUG*/ }
|
||||
.aui_outer { text-align:left; }
|
||||
table.aui_border, table.aui_dialog { border:0; margin:0; border-collapse:collapse; width:auto; }
|
||||
.aui_nw, .aui_n, .aui_ne, .aui_w, .aui_c, .aui_e, .aui_sw, .aui_s, .aui_se, .aui_header, .aui_tdIcon, .aui_main, .aui_footer { padding:0; }
|
||||
.aui_header, .aui_buttons button { font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; }
|
||||
.aui_title { overflow:hidden; text-overflow: ellipsis; }
|
||||
.aui_state_noTitle .aui_title { display:none; }
|
||||
.aui_close { display:block; position:absolute; text-decoration:none; outline:none; _cursor:pointer; }
|
||||
.aui_close:hover { text-decoration:none; }
|
||||
.aui_main { text-align:center; min-width:9em; min-width:0 \9/*IE8 BUG*/; }
|
||||
.aui_content { display:inline-block; *zoom:1; *display:inline; text-align:left; border:none 0; }
|
||||
.aui_content.aui_state_full { display:block; width:100%; margin:0; padding:0!important; height:100%; }
|
||||
.aui_loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(icons/loading.gif) no-repeat center center; }
|
||||
.aui_icon { vertical-align: middle; }
|
||||
.aui_icon div { width:48px; height:48px; margin:10px 0 10px 10px; background-position: center center; background-repeat:no-repeat; }
|
||||
.aui_buttons { padding:8px; text-align:right; white-space:nowrap; }
|
||||
.aui_buttons button { margin-left:15px; padding: 6px 8px; cursor: pointer; display: inline-block; text-align: center; line-height: 1; *padding:4px 10px; *height:2em; letter-spacing:2px; font-family: Tahoma, Arial/9!important; width:auto; overflow:visible; *width:1; color: #333; border: solid 1px #999; border-radius: 5px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); background: linear-gradient(top, #FFF, #DDD); background: -moz-linear-gradient(top, #FFF, #DDD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD)); text-shadow: 0px 1px 1px rgba(255, 255, 255, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .09); -moz-transition:-moz-box-shadow linear .2s; -webkit-transition: -webkit-box-shadow linear .2s; transition: box-shadow linear .2s; }
|
||||
.aui_buttons button::-moz-focus-inner{ border:0; padding:0; margin:0; }
|
||||
.aui_buttons button:focus { outline:none 0; border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); }
|
||||
.aui_buttons button:hover { color:#000; border-color:#666; }
|
||||
.aui_buttons button:active { border-color:#666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF'); background: linear-gradient(top, #DDD, #FFF); background: -moz-linear-gradient(top, #DDD, #FFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF)); box-shadow:inset 0 1px 5px rgba(66, 109, 201, .9), inset 0 1px 1em rgba(0, 0, 0, .3); }
|
||||
.aui_buttons button[disabled] { cursor:default; color:#666; background:#DDD; border: solid 1px #999; filter:alpha(opacity=50); opacity:.5; box-shadow:none; }
|
||||
button.aui_state_highlight { color: #FFF; border: solid 1px #3399dd; background: #2288cc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); text-shadow: -1px -1px 1px #1c6a9e; }
|
||||
button.aui_state_highlight:hover { color:#FFF; border-color:#1c6a9e; }
|
||||
button.aui_state_highlight:active { border-color:#1c6a9e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); }
|
||||
/* common end */
|
||||
|
||||
.aui_inner { background:#f7f7f7; }
|
||||
.aui_titleBar { width:100%; height:0; position:relative; bottom:30px; _bottom:0; _margin-top:-30px; }
|
||||
.aui_title { height:29px; line-height:29px; padding:0 25px 0 0; _padding:0; text-indent:5px; color:#FFF; font-weight:700; text-shadow:-1px -1px 0 rgba(0, 0, 0, .7); }
|
||||
.aui_nw, .aui_ne, .aui_sw, .aui_se, .aui_n, .aui_s, .aui_close { background-image:url(black/bg.png); background-repeat:no-repeat; }
|
||||
.aui_nw { width:15px; height:38px; background-position: 0 0; _png:black/ie6/nw.png; }
|
||||
.aui_ne { width:15px; height:38px; background-position: -15px 0; _png:black/ie6/ne.png; }
|
||||
.aui_sw { width:15px; height:18px; background-position: 0 -38px; _png:black/ie6/sw.png; }
|
||||
.aui_se { width:15px; height:18px; background-position: -15px -38px; _png:black/ie6/se.png; }
|
||||
.aui_close { top:4px; right:4px; _z-index:1; width:20px; height:20px; _font-size:0; _line-height:0; text-indent:-9999em; background-position:0 -112px; _png:black/ie6/close.png; }
|
||||
.aui_close:hover { background-position:0 -132px; }
|
||||
.aui_n, .aui_s { background-repeat:repeat-x; }
|
||||
.aui_n { background-position: 0 -56px; _png:black/ie6/n.png; }
|
||||
.aui_s { background-position: 0 -94px; _png:black/ie6/s.png; }
|
||||
.aui_w, .aui_e { background-image:url(black/bg2.png); background-repeat:repeat-y; }
|
||||
.aui_w { background-position:left top; _png:black/ie6/w.png; }
|
||||
.aui_e { background-position: right bottom; _png:black/ie6/e.png; }
|
||||
aui_icon, .aui_main { padding-top:3px; }
|
||||
@media screen and (min-width:0) {
|
||||
.aui_outer { border-radius:8px; box-shadow:0 5px 15px rgba(0, 0, 0, .4); -moz-transition:-moz-box-shadow linear .2s; -webkit-transition: -webkit-box-shadow linear .2s; transition: -webkit-box-shadow linear .2s; }
|
||||
.aui_state_drag .aui_outer { box-shadow:none; }
|
||||
.aui_state_lock .aui_outer { box-shadow:0 3px 26px rgba(0, 0, 0, .9); }
|
||||
.aui_outer:active { box-shadow:0 0 5px rgba(0, 0, 0, .1)!important; }
|
||||
.aui_state_drag .aui_outer { box-shadow:none!important; }
|
||||
.aui_nw, .aui_ne, .aui_sw, .aui_se, .aui_n, .aui_s, .aui_close { background-image:url(black/bg_css3.png); }
|
||||
.aui_nw { width:5px; height:31px; }
|
||||
.aui_ne { width:5px; height:31px; background-position: -5px 0; _png:black/ie6/ne.png; }
|
||||
.aui_sw { width:5px; height:5px;background-position: 0 -31px; }
|
||||
.aui_se { width:5px; height:5px; background-position: -5px -31px; }
|
||||
.aui_close { background-position:0 -72px; }
|
||||
.aui_close:hover { background-position:0 -92px; }
|
||||
.aui_n { background-position: 0 -36px; }
|
||||
.aui_s { background-position: 0 -67px; }
|
||||
.aui_w, .aui_e { background-image:url(black/bg_css3_2.png); }
|
||||
}
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_se { width:3px; height:3px; }
|
||||
.aui_state_noTitle .aui_inner { border:1px solid #666; background:#FFF; }
|
||||
.aui_state_noTitle .aui_outer { box-shadow:none; }
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_n, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_w, .aui_state_noTitle .aui_e, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_s, .aui_state_noTitle .aui_se { background:rgba(0, 0, 0, .05); background:#000\9!important; filter:alpha(opacity=5)!important; }
|
||||
.aui_state_noTitle .aui_titleBar { bottom:0; _bottom:0; _margin-top:0; }
|
||||
.aui_state_noTitle .aui_close { top:0; right:0; width:18px; height:18px; line-height:18px; text-align:center; text-indent:0; font-family: Helvetica, STHeiti; _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino; font-size:18px; text-decoration:none; color:#214FA3; background:none; filter:!important; }
|
||||
.aui_state_noTitle .aui_close:hover, .aui_state_noTitle .aui_close:active { text-decoration:none; color:#900; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 B |
Binary file not shown.
|
After Width: | Height: | Size: 961 B |
Binary file not shown.
|
After Width: | Height: | Size: 687 B |
Binary file not shown.
|
After Width: | Height: | Size: 822 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
Binary file not shown.
|
After Width: | Height: | Size: 489 B |
Binary file not shown.
|
After Width: | Height: | Size: 776 B |
Binary file not shown.
|
After Width: | Height: | Size: 360 B |
Binary file not shown.
|
After Width: | Height: | Size: 364 B |
Binary file not shown.
|
After Width: | Height: | Size: 829 B |
@@ -0,0 +1,79 @@
|
||||
@charset "utf-8";
|
||||
/*
|
||||
* artDialog skin
|
||||
* http://code.google.com/p/artdialog/
|
||||
* (c) 2009-2011 TangBin, http://www.planeArt.cn
|
||||
*
|
||||
* This is licensed under the GNU LGPL, version 2.1 or later.
|
||||
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
|
||||
*/
|
||||
|
||||
/* common start */
|
||||
body { _margin:0; _height:100%; /*IE6 BUG*/ }
|
||||
.aui_outer { text-align:left; }
|
||||
table.aui_border, table.aui_dialog { border:0; margin:0; border-collapse:collapse; width:auto; }
|
||||
.aui_nw, .aui_n, .aui_ne, .aui_w, .aui_c, .aui_e, .aui_sw, .aui_s, .aui_se, .aui_header, .aui_tdIcon, .aui_main, .aui_footer { padding:0; }
|
||||
.aui_header, .aui_buttons button { font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; }
|
||||
.aui_title { overflow:hidden; text-overflow: ellipsis; }
|
||||
.aui_state_noTitle .aui_title { display:none; }
|
||||
.aui_close { display:block; position:absolute; text-decoration:none; outline:none; _cursor:pointer; }
|
||||
.aui_close:hover { text-decoration:none; }
|
||||
.aui_main { text-align:center; min-width:9em; min-width:0 \9/*IE8 BUG*/; }
|
||||
.aui_content { display:inline-block; *zoom:1; *display:inline; text-align:left; border:none 0; }
|
||||
.aui_content.aui_state_full { display:block; width:100%; margin:0; padding:0!important; height:100%; }
|
||||
.aui_loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(icons/loading.gif) no-repeat center center; }
|
||||
.aui_icon { vertical-align: middle; }
|
||||
.aui_icon div { width:48px; height:48px; margin:10px 0 10px 10px; background-position: center center; background-repeat:no-repeat; }
|
||||
.aui_buttons { padding:8px; text-align:right; white-space:nowrap; }
|
||||
.aui_buttons button { margin-left:15px; padding: 6px 8px; cursor: pointer; display: inline-block; text-align: center; line-height: 1; *padding:4px 10px; *height:2em; letter-spacing:2px; font-family: Tahoma, Arial/9!important; width:auto; overflow:visible; *width:1; color: #333; border: solid 1px #999; border-radius: 5px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); background: linear-gradient(top, #FFF, #DDD); background: -moz-linear-gradient(top, #FFF, #DDD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD)); text-shadow: 0px 1px 1px rgba(255, 255, 255, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .09); -moz-transition:-moz-box-shadow linear .2s; -webkit-transition: -webkit-box-shadow linear .2s; transition: box-shadow linear .2s; }
|
||||
.aui_buttons button::-moz-focus-inner{ border:0; padding:0; margin:0; }
|
||||
.aui_buttons button:focus { outline:none 0; border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); }
|
||||
.aui_buttons button:hover { color:#000; border-color:#666; }
|
||||
.aui_buttons button:active { border-color:#666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF'); background: linear-gradient(top, #DDD, #FFF); background: -moz-linear-gradient(top, #DDD, #FFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF)); box-shadow:inset 0 1px 5px rgba(66, 109, 201, .9), inset 0 1px 1em rgba(0, 0, 0, .3); }
|
||||
.aui_buttons button[disabled] { cursor:default; color:#666; background:#DDD; border: solid 1px #999; filter:alpha(opacity=50); opacity:.5; box-shadow:none; }
|
||||
button.aui_state_highlight { color: #FFF; border: solid 1px #3399dd; background: #2288cc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); text-shadow: -1px -1px 1px #1c6a9e; }
|
||||
button.aui_state_highlight:hover { color:#FFF; border-color:#1c6a9e; }
|
||||
button.aui_state_highlight:active { border-color:#1c6a9e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); }
|
||||
/* common end */
|
||||
|
||||
.aui_inner { background:#f7f7f7; }
|
||||
.aui_titleBar { width:100%; height:0; position:relative; bottom:30px; _bottom:0; _margin-top:-30px; }
|
||||
.aui_title { height:29px; line-height:29px; padding:0 25px 0 0; _padding:0; text-indent:5px; color:#FFF; font-weight:700; text-shadow:-1px -1px 0 rgba(33, 79, 183, .7); }
|
||||
.aui_nw, .aui_ne, .aui_sw, .aui_se, .aui_n, .aui_s, .aui_close { background-image:url(blue/bg.png); background-repeat:no-repeat; }
|
||||
.aui_nw { width:15px; height:38px; background-position: 0 0; _png:blue/ie6/nw.png; }
|
||||
.aui_ne { width:15px; height:38px; background-position: -15px 0; _png:blue/ie6/ne.png; }
|
||||
.aui_sw { width:15px; height:18px; background-position: 0 -38px; _png:blue/ie6/sw.png; }
|
||||
.aui_se { width:15px; height:18px; background-position: -15px -38px; _png:blue/ie6/se.png; }
|
||||
.aui_close { top:4px; right:4px; _z-index:1; width:20px; height:20px; _font-size:0; _line-height:0; text-indent:-9999em; background-position:0 -112px; _png:blue/ie6/close.png; }
|
||||
.aui_close:hover { background-position:0 -132px; }
|
||||
.aui_n, .aui_s { background-repeat:repeat-x; }
|
||||
.aui_n { background-position: 0 -56px; _png:blue/ie6/n.png; }
|
||||
.aui_s { background-position: 0 -94px; _png:blue/ie6/s.png; }
|
||||
.aui_w, .aui_e { background-image:url(blue/bg2.png); background-repeat:repeat-y; }
|
||||
.aui_w { background-position:left top; _png:blue/ie6/w.png; }
|
||||
.aui_e { background-position: right bottom; _png:blue/ie6/e.png; }
|
||||
aui_icon, .aui_main { padding-top:3px; }
|
||||
@media screen and (min-width:0) {
|
||||
.aui_outer { border-radius:8px; box-shadow:0 5px 15px rgba(2, 37, 69, .4); -moz-transition:-moz-box-shadow linear .2s; -webkit-transition: -webkit-box-shadow linear .2s; transition: -webkit-box-shadow linear .2s; }
|
||||
.aui_state_drag .aui_outer { box-shadow:none; }
|
||||
.aui_state_lock .aui_outer { box-shadow:0 3px 26px rgba(0, 0, 0, .9); }
|
||||
.aui_outer:active { box-shadow:0 0 5px rgba(2, 37, 69, .1)!important; }
|
||||
.aui_state_drag .aui_outer { box-shadow:none!important; }
|
||||
.aui_nw, .aui_ne, .aui_sw, .aui_se, .aui_n, .aui_s, .aui_close { background-image:url(blue/bg_css3.png); }
|
||||
.aui_nw { width:5px; height:31px; }
|
||||
.aui_ne { width:5px; height:31px; background-position: -5px 0; _png:blue/ie6/ne.png; }
|
||||
.aui_sw { width:5px; height:5px;background-position: 0 -31px; }
|
||||
.aui_se { width:5px; height:5px; background-position: -5px -31px; }
|
||||
.aui_close { background-position:0 -72px; }
|
||||
.aui_close:hover { background-position:0 -92px; }
|
||||
.aui_n { background-position: 0 -36px; }
|
||||
.aui_s { background-position: 0 -67px; }
|
||||
.aui_w, .aui_e { background-image:url(blue/bg_css3_2.png); }
|
||||
}
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_se { width:3px; height:3px; }
|
||||
.aui_state_noTitle .aui_inner { border:1px solid #666; background:#FFF; }
|
||||
.aui_state_noTitle .aui_outer { box-shadow:none; }
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_n, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_w, .aui_state_noTitle .aui_e, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_s, .aui_state_noTitle .aui_se { background:rgba(0, 0, 0, .05); background:#000\9!important; filter:alpha(opacity=5)!important; }
|
||||
.aui_state_noTitle .aui_titleBar { bottom:0; _bottom:0; _margin-top:0; }
|
||||
.aui_state_noTitle .aui_close { top:0; right:0; width:18px; height:18px; line-height:18px; text-align:center; text-indent:0; font-family: Helvetica, STHeiti; _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino; font-size:18px; text-decoration:none; color:#214FA3; background:none; filter:!important; }
|
||||
.aui_state_noTitle .aui_close:hover, .aui_state_noTitle .aui_close:active { text-decoration:none; color:#900; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 209 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 B |
Binary file not shown.
|
After Width: | Height: | Size: 1000 B |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 878 B |
Binary file not shown.
|
After Width: | Height: | Size: 947 B |
Binary file not shown.
|
After Width: | Height: | Size: 514 B |
Binary file not shown.
|
After Width: | Height: | Size: 459 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 363 B |
Binary file not shown.
|
After Width: | Height: | Size: 365 B |
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
@@ -0,0 +1,61 @@
|
||||
@charset "utf-8";
|
||||
/*
|
||||
* artDialog skin
|
||||
* http://code.google.com/p/artdialog/
|
||||
* (c) 2009-2011 TangBin, http://www.planeArt.cn
|
||||
*
|
||||
* This is licensed under the GNU LGPL, version 2.1 or later.
|
||||
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
|
||||
*/
|
||||
|
||||
/* common start */
|
||||
body { _margin:0; _height:100%; /*IE6 BUG*/ }
|
||||
.aui_outer { text-align:left; }
|
||||
table.aui_border, table.aui_dialog { border:0; margin:0; border-collapse:collapse; width:auto; }
|
||||
.aui_nw, .aui_n, .aui_ne, .aui_w, .aui_c, .aui_e, .aui_sw, .aui_s, .aui_se, .aui_header, .aui_tdIcon, .aui_main, .aui_footer { padding:0; }
|
||||
.aui_header, .aui_buttons button { font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial; }
|
||||
.aui_title { overflow:hidden; text-overflow: ellipsis; }
|
||||
.aui_state_noTitle .aui_title { display:none; }
|
||||
.aui_close { display:block; position:absolute; text-decoration:none; outline:none; _cursor:pointer; }
|
||||
.aui_close:hover { text-decoration:none; }
|
||||
.aui_main { text-align:center; min-width:9em; min-width:0\9/*IE8 BUG*/; }
|
||||
.aui_content { display:inline-block; *zoom:1; *display:inline; text-align:left; border:none 0; }
|
||||
.aui_content.aui_state_full { display:block; width:100%; margin:0; padding:0!important; height:100%; }
|
||||
.aui_loading { width:96px; height:32px; text-align:left; text-indent:-999em; overflow:hidden; background:url(icons/loading.gif) no-repeat center center; }
|
||||
.aui_icon { vertical-align: middle; }
|
||||
.aui_icon div { width:48px; height:48px; margin:10px 0 10px 10px; background-position: center center; background-repeat:no-repeat; }
|
||||
.aui_buttons { padding:8px; text-align:right; white-space:nowrap; }
|
||||
.aui_buttons button { margin-left:15px; padding: 6px 8px; cursor: pointer; display: inline-block; text-align: center; line-height: 1; *padding:4px 10px; *height:2em; letter-spacing:2px; font-family: Tahoma, Arial/9!important; width:auto; overflow:visible; *width:1; color: #333; border: solid 1px #999; border-radius: 5px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); background: linear-gradient(top, #FFF, #DDD); background: -moz-linear-gradient(top, #FFF, #DDD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD)); text-shadow: 0px 1px 1px rgba(255, 255, 255, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .09); -moz-transition:-moz-box-shadow linear .2s; -webkit-transition: -webkit-box-shadow linear .2s; transition: box-shadow linear .2s; }
|
||||
.aui_buttons button::-moz-focus-inner{ border:0; padding:0; margin:0; }
|
||||
.aui_buttons button:focus { outline:none 0; border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); }
|
||||
.aui_buttons button:hover { color:#000; border-color:#666; }
|
||||
.aui_buttons button:active { border-color:#666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF'); background: linear-gradient(top, #DDD, #FFF); background: -moz-linear-gradient(top, #DDD, #FFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF)); box-shadow:inset 0 1px 5px rgba(66, 109, 201, .9), inset 0 1px 1em rgba(0, 0, 0, .3); }
|
||||
.aui_buttons button[disabled] { cursor:default; color:#666; background:#DDD; border: solid 1px #999; filter:alpha(opacity=50); opacity:.5; box-shadow:none; }
|
||||
button.aui_state_highlight { color: #FFF; border: solid 1px #1c6a9e; background: #2288cc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); text-shadow: -1px -1px 1px #1c6a9e; }
|
||||
button.aui_state_highlight:hover { color:#FFF; border-color:#0F3A56; }
|
||||
button.aui_state_highlight:active { border-color:#1c6a9e; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bbee', endColorstr='#2288cc'); background: linear-gradient(top, #33bbee, #2288cc); background: -moz-linear-gradient(top, #33bbee, #2288cc); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#33bbee), to(#2288cc)); }
|
||||
/* common end */
|
||||
|
||||
.aui_inner { background:#FFF; }
|
||||
.aui_titleBar { width:100%; height:0; position:relative; bottom:26px; _bottom:0; _margin-top:-26px;}
|
||||
.aui_title { height:26px; line-height:23px; padding:0 60px 0 5px; color:#FFF; font-weight:700; text-shadow:0 1px 0 #000; }
|
||||
.aui_nw, .aui_ne, .aui_w, .aui_e, .aui_sw, .aui_se, .aui_close { background-image:url(chrome/chrome_s.png); background-repeat:no-repeat; }
|
||||
.aui_nw { width:5px; height:26px; background-position: -46px -8px; }
|
||||
.aui_ne { width:5px; height:26px; background-position: -53px -8px; }
|
||||
.aui_w { background-position:-60px 0; background-repeat:repeat-y; }
|
||||
.aui_e { background-position:-65px 0; background-repeat:repeat-y; }
|
||||
.aui_sw { width:5px; height:5px; background-position: -46px -2px;}
|
||||
.aui_se { width:5px; height:5px; background-position: -53px -2px;}
|
||||
.aui_close { top:1px; right:0; width:44px; height:17px; background-position:0 0; _font-size:0; _line-height:0; text-indent:-9999em; }
|
||||
.aui_close:hover { background-position:0 -18px; }
|
||||
.aui_n, .aui_s { background-image:url(chrome/border.png); background-repeat:repeat-x; }
|
||||
.aui_n { background-position:0 top; }
|
||||
.aui_s { background-position: 0 bottom; }
|
||||
.aui_buttons { background-color:#F6F6F6; border-top:solid 1px #DADEE5; }
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_se { width:3px; height:3px; }
|
||||
.aui_state_noTitle .aui_inner { border:1px solid #666; background:#FFF; }
|
||||
.aui_state_noTitle .aui_outer { box-shadow:none; }
|
||||
.aui_state_noTitle .aui_nw, .aui_state_noTitle .aui_n, .aui_state_noTitle .aui_ne, .aui_state_noTitle .aui_w, .aui_state_noTitle .aui_e, .aui_state_noTitle .aui_sw, .aui_state_noTitle .aui_s, .aui_state_noTitle .aui_se { background:rgba(0, 0, 0, .05); background:#000\9!important; filter:alpha(opacity=5)!important; }
|
||||
.aui_state_noTitle .aui_titleBar { bottom:0; _bottom:0; _margin-top:0; }
|
||||
.aui_state_noTitle .aui_close { top:0; right:0; width:18px; height:18px; line-height:18px; text-align:center; text-indent:0; font-family: Helvetica, STHeiti; _font-family: '\u9ed1\u4f53', 'Book Antiqua', Palatino; font-size:18px; text-decoration:none; color:#214FA3; background:none; filter:!important; }
|
||||
.aui_state_noTitle .aui_close:hover, .aui_state_noTitle .aui_close:active { text-decoration:none; color:#900; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 260 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user