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%"代替
|
||||
Reference in New Issue
Block a user