index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="description" content="artDialog" />
<meta name="keywords" content="artDialog, dialog" />
<title>artDialog</title>
<!--[if gte IE 7]><!-->
    <link id="artDialog-skin" href="./skins/green.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lt IE 7]>
    <link id="artDialog-skin" href="./skins/default.css" rel="stylesheet" />
<![endif]-->
<script src="source/artDialog.js" type="text/javascript"></script>
<script type="text/javascript">
(function (d) {
    d['okValue'] = '确定';
    d['cancelValue'] = '取消';
    d['title'] = '消息';
    // [more..]
})(art.dialog.defaults);
</script>
<style type="text/css">
body { font-size:14px; color:#666; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:Tahoma, Arial; background:#dbdfe3; }
a { color:#039; }
a:hover { color:#06C; }
img { border:none 0; }
body.showChange .change { background:#FF0; border-radius: 3px; }
h1.title { text-align:center; color:#30475e; }
h1.title strong { font-size:42px; position:relative; }
h1.title strong:after { content:''; display:block; position:absolute; left:0; bottom:24px; width:90%; height:1px; box-shadow:0 20px 15px rgba(0, 0, 0, .8); }
#header, #main, #footer { width:640px; margin:auto; }
#header .summary { padding:20px; background:#30475e; color:#FFF; border-radius: 8px; zoom:1; }
#header .summary:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#header .summary a { color:#FFF; }
#header .summary a:hover { color:#CCC; }
#header .summary strong { display:inline-block; width:5em; }
#header .summary dl { padding:0; margin:0; }
#header .summary dd { margin-left:0; padding:3px 0; }
#header .summary dt { display:none; }
#header .summary dd.photo { float:right; }
#header .summary img { border:1px #506f8e solid; }
#main .card { padding:20px; margin-top:30px; background: #FFF; border:1px solid #d1d6db; border-radius: 8px; }
#main .card:after { position:relative; z-index:-1; content: ""; padding:20px; display: block; height: 10px; border-radius: 10px; box-shadow:0 20px 20px rgba(2, 37, 69, .6); }
#main .card h2 { text-align:center; color:#000; }
#main .card ul dl { padding-left:1em; border-left:1px dashed #DDD; }
#main .card ul dt { padding:8px 0; font-weight:bold; }
#main .card ul dd { margin-left:0; }
#main .card ul dd dl { margin-left:2em; }
#footer { padding:20px 0; text-align:center; color:#999; }
#footer .copyright a { color:#999; }
/*///// code /////*/
.runCode:after { content: "..."; }
.button, .runCode { display:inline-block; padding:1px 12px; text-decoration:none; color: #333 !important; cursor:pointer; border: solid 1px #999; border-radius: 5px; background: #DDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD');
background: linear-gradient(top, #FFF, #DDD); background: -moz-linear-gradient(top, #FFF, #DDD); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD)); text-shadow: 0px 1px 1px rgba(255, 255, 255, 1); box-shadow: 0 1px 0 rgba(255, 255, 255, .2), 0 -1px 0 rgba(0, 0, 0, .09); -moz-transition:-moz-box-shadow linear .2s;
-webkit-transition: -webkit-box-shadow linear .2s;
transition: box-shadow linear .2s;
white-space: nowrap; }
.button:focus, .runCode:focus { outline:none 0; border-color:#426DC9; box-shadow:0 0 8px rgba(66, 109, 201, .9); }
.button:hover, .runCode:hover { color:#000; border-color:#666; }
.button:active, .runCode:active { border-color:#666; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF');
background: linear-gradient(top, #DDD, #FFF); background: -moz-linear-gradient(top, #DDD, #FFF); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF)); box-shadow:inset 0 1px 5px rgba(66, 109, 201, .9), inset 0 1px 1em rgba(0, 0, 0, .3); }
.button[disabled] { cursor:default; color:#666; background:#DDD; border: 1px solid #999; filter:alpha(opacity=50); opacity:.5; box-shadow:none; }
pre { position:relative; padding:5px; font-size:12px; border:1px solid #EFEFEF; background:#F9F9F9; z-index:2; border-radius: 5px; }
pre:before, pre:after { visibility:hidden; display:block; content:""; width:0; height:0; border:9px solid transparent; position:absolute; }
pre:before { border-top-color:#EEF7F5; position:absolute; left:18px; bottom:-18px; z-index:2; }
pre:after { border-top-color:#c7dcd3; left:18px; bottom:-19px; z-index:1; }
pre.select { background:#EEF7F5 !important; border:1px solid #D7EAE2; border-right-color:#c7dcd3; border-bottom-color:#c7dcd3; }
pre.select:before, pre.select:after { visibility:visible; }
/*//// skin ////*/
#skins { width:560px; padding:8px 0; }
#skins .button { width:82px; text-align:center; }
#skins ul, #skins li { padding:0; margin:0; list-style:none; }
#skins li { display:inline; }
#skins ul { text-align:center; }

#showChange { position:fixed; bottom:0; right:0; z-index:87; }
@media only screen and (max-width:980px) {
 h1.title {
font-size:24px;
}
 #header, #main, #footer {
max-width:100%;
}
 img {
max-width:100%
}
}
@media print {
#header .summary, a { color: #000 !important; }
#header, #main, #footer { width:auto; }
#main .card { padding:10px; margin-top:10px; box-shadow:none; border:none 0; border-top: 1px dashed #666; border-radius:0; }
#main .card h2 { text-align:left; }
#main .card:after { display:none; }
h1.title strong:after, #index, #print, .runCode, .button, #skin-menu { display:none; }
}
</style>

<!-- Dw 风格代码高亮 -->
<style type="text/css">
pre.sh_sourceCode { color: #000000; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_keyword { color: #009; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_type { color: #0000ff; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_string { color: #00F; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_regexp { color: #060; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_specialchar { color: #C42DA8; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_comment { color: #999; font-weight: normal; font-style: italic; }
pre.sh_sourceCode .sh_number { color: #F00; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_preproc { color: #00b800; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_symbol { color: #009; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_function { color: #000; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_cbracket { color: #009; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_url { color: #ff0000; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_date { color: #0000ff; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_time { color: #0000ff; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_file { color: #0000ff; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_ip { color: #ff0000; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_name { color: #ff0000; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_variable { color: #ec7f15; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_oldfile { color: #C42DA8; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_newfile { color: #ff0000; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_difflines { color: #0000ff; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_selector { color: #ec7f15; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_property { color: #0000ff; font-weight: bold; font-style: normal; }
pre.sh_sourceCode .sh_value { color: #ff0000; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_predef_var { color: #909; font-weight: normal; font-style: normal; }
pre.sh_sourceCode .sh_predef_func { color: #099; font-weight: normal; font-style: normal; }
</style>
</head>

<body>
<div id="header">
  <h1 class="title"><strong>artDialog&#8482;</strong><span id="artVersion"></span></h1>
  <div class="summary" id="summary">
    <p>artDialog 是一个设计得十分巧妙的对话框组件，小巧身材却拥有丰富的接口与漂亮的外观。</p>
    <ul>
      <li>自适应内容</li>
      <li>优雅的接口</li>
      <li>细致的体验</li>
      <li>跨平台兼容</li>
      <li>信息无障碍</li>
    </ul>
    <p><strong>项目主页</strong>: <a href="https://github.com/aui/artDialog">https://github.com/aui/artDialog</a></p>
    <p id="skin-menu">对话框样式选择：<a id="showSkinDialog" class="button" href="javascript:;">green</a></p>
  </div>
</div>
<div id="main">
  <div id="index" class="card">
    <h2>文档索引</h2>
    <ul>
      <li>
        <h3><a href="#lead">快速上手</a></h3>
      </li>
      <li>
        <h3><a href="#options">配置参数</a></h3>
        <ul>
          <li>
            <h4>内容</h4>
            <ul>
              <li><a href="#options-title">title</a></li>
              <li><a href="#options-content">content</a></li>
            </ul>
          </li>
          <li>
            <h4>按钮</h4>
            <ul>
              <li><a href="#options-ok" class="change">ok</a></li>
              <li><a href="#options-cancel" class="change">cancel</a></li>
              <li><a href="#options-okValue" class="change">okValue</a></li>
              <li><a href="#options-cancelValue" class="change">cancelValue</a></li>
              <li><a href="#options-button" class="change">button</a></li>
            </ul>
          </li>
          <li>
            <h4>尺寸</h4>
            <ul>
              <li><a href="#options-width">width</a></li>
              <li><a href="#options-height">height</a></li>
            </ul>
          </li>
          <li>
            <h4>位置</h4>
            <ul>
              <li><a href="#options-fixed">fixed</a><a href="#width"></a></li>
              <li><a href="#options-follow">follow</a><a href="#height"></a></li>
            </ul>
          </li>
          <li>
            <h4>视觉</h4>
            <ul>
              <li><a href="#options-lock">lock</a><a href="#fixed"></a><a href="#width"></a></li>
              <li><a href="#options-padding">padding</a></li>
            </ul>
          </li>
          <li>
            <h4>高级</h4>
            <ul>
              <li><a href="#options-id">id</a></li>
              <li><a href="#options-zIndex">zIndex</a></li>
              <li><a href="#options-initialize" class="change">initialize</a></li>
              <li><a href="#options-beforeunload" class="change">beforeunload</a></li>
              <li><a href="#options-visible" class="change">visible</a></li>
              <li><a href="#options-time" class="change">time</a></li>
              <li><a href="#options-esc">esc</a></li>
              <li><a href="#options-focus" class="change">focus</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <h3><a href="#api">接口</a></h3>
        <ul>
          <li><a href="#api-get" class="change">art.dialog.get(id)</a></li>
          <li><a href="#api-closed" class="change">closed</a></li>
          <li><a href="#api-close">close()</a></li>
          <li><a href="#api-visible" class="change">visible()</a></li>
          <li><a href="#api-hidden" class="change">hidden()</a></li>
          <li><a href="#api-title">title(value)</a></li>
          <li><a href="#api-content">content(value)</a></li>
          <li><a href="#api-button">button(button, button, ..)</a></li>
          <li><a href="#api-follow">follow(element)</a></li>
          <li><a href="#api-size">size(width, height)</a></li>
          <li><a href="#api-lock">lock()</a></li>
          <li><a href="#api-unlock">unlock()</a></li>
          <li><a href="#api-time" class="change">time(value)</a></li>
        </ul>
      </li>
      <li>
        <h3><a href="#plugins">插件</a></h3>
      </li>
    </ul>
  </div>
  <div id="lead" class="card">
    <h2>快速上手</h2>
    <p>artDialog api 风格统一，有一定前端开发经验的同学通过阅读文档5分钟即可上手。
      <button id="showChange" class="button">高亮显示更改</button>
    </p>
    <h3>引入文件</h3>
    <p>在页面 head 引入 artDialog 样式与脚本文件:</p>
    <pre class="sh_javascript">&lt;link href="./skins/default.css" rel="stylesheet" /&gt;
&lt;script src="./artDialog.min.js"&gt;&lt;/script&gt;</pre>
    <h3>调用方式</h3>
    <ol>
      <li>
        <p><strong>art.dialog</strong>(<em>content</em>, <em>[ok]</em>, <em>[cancel]</em>)</p>
        <pre class="sh_javascript" id="lead-demo-1">art.dialog('artDialog: I Love You!', function () {alert('Thank you!')});
  </pre>
        <a class="runCode" href="#lead-demo-1">运行</a> </li>
      <li>
        <p><strong>art.dialog</strong>(<em>options</em>)</p>
        <pre class="sh_javascript" id="lead-demo-2">art.dialog({
    title: '欢迎',
    content: '欢迎使用artDialog对话框组件！',
    ok: function () {
        this
        .title('警告')
        .content('请注意artDialog两秒后将关闭！')
        .lock()
        .time(2000);
        return false;
    }
});
  </pre>
        <a class="runCode" href="#lead-demo-2">运行</a> </li>
    </ol>
    <p>artDialog 有两种调用方式，第一种是最简单的直接传入参数方式；第二种拥有更多的可选项，参见 <a href="#options">配置参数</a>。</p>
    <p><a href="javascript:;" style="cursor:help" title="引用 jquery.artDialog.min.js 即可，调用时把 'art' 前缀替换成 '$'。jQuery 版本支持 1.32 +">[使用jQuery?]</a></p>
    <h3>扩展接口</h3>
    <p>除了上述两种调用方式之外，artDialog 还提供一些接口方便异步操作，比如实现外部程序更新对话框内容、关闭窗口等。这是属于高级操作，详情参见 <a href="#api">接口</a>。</p>
    <p>若无特别说明，扩展方法均支持链式调用。</p>
  </div>
  <div id="options" class="card">
    <h2>配置参数</h2>
    <ul>
      <li>
        <h3 id="options-title">title</h3>
        <dl>
          <dt>概述</dt>
          <dd> (默认值: "message") 标题内容</dd>
          <dt>类型</dt>
          <dd>String</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-title-demo" class="sh_javascript">art.dialog({
    title: 'hello world!'
});</pre>
            <a class="runCode" href="#options-title-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-content">content</h3>
        <dl>
          <dt>概述</dt>
          <dd> (默认值: "&lt;div class="d-loading"&gt;&lt;span&gt;loading..&lt;/span&gt;&lt;/div&gt;") 设置消息内容。<br />
            <br />
            如果传入的是 HTMLElement 类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置</dd>
          <dt>类型</dt>
          <dd>String, HTMLElement</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-content-demo-string" class="sh_javascript">art.dialog({
    content: 'hello world!'
});</pre>
            <a class="runCode" href="#options-content-demo-string">运行</a></dd>
          <dd>
            <pre id="options-content-demo-element" class="sh_javascript">art.dialog({
    content: document.getElementById('options-content-demo-element'),
    id: 'EF893L'
});</pre>
            <a class="runCode" href="#options-content-demo-element">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-ok"><span class="change">ok</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>确定按钮。<br />
            <br />
            回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭 </dd>
          <dt>类型</dt>
          <dd>Function</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-ok-demo" class="sh_javascript">art.dialog({
    ok: function () {
        this.content('hello world!');
        return false;
    }
});</pre>
            <a class="runCode" href="#options-ok-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="options-cancel"><span class="change">cancel</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>取消按钮。<br />
            <br />
            取消按钮也等同于标题栏的关闭按钮。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭 </dd>
          <dt>类型</dt>
          <dd>Function</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-cancel-demo" class="sh_javascript">art.dialog({
    cancel: function () {
        alert('关闭');
    }
});</pre>
            <a class="runCode" href="#options-cancel-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="options-okValue"><span class="change">okValue</span></h3>
        <dl>
          <dt>概述</dt>
          <dd> (默认值: "ok")  确定按钮文本</dd>
          <dt>类型</dt>
          <dd>String</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-okValue-demo" class="sh_javascript">art.dialog({
    okValue: '猛击我',
    ok: function () {
        this.content('hello world!');
        return false;
    }
});</pre>
            <a class="runCode" href="#options-okValue-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="options-cancelValue"><span class="change">cancelValue</span></h3>
        <dl>
          <dt>概述</dt>
          <dd> (默认值: cancel) 取消按钮文本</dd>
          <dt>类型</dt>
          <dd>String</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-cancelValue-demo" class="sh_javascript">art.dialog({
    cancelValue: '取消我',
    cancel: function () {
        alert('关闭');
    }
});</pre>
            <a class="runCode" href="#options-cancelValue-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="options-button"><span class="change">button</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>
            <p>自定义按钮组。<br />
              <br />
              回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭</p>
          </dd>
          <dt>类型</dt>
          <dd>Array</dd>
          <dt>选项</dt>
          <dd>
            <dl>
              <dt title="String"><span class="change">value</span></dt>
              <dd>按钮显示文本</dd>
              <dt title="Function">callback</dt>
              <dd>(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭</dd>
              <dt title="Boolean">focus</dt>
              <dd>(默认值: true) 是否聚焦</dd>
              <dt title="String"><span class="change">width</span></dt>
              <dd>(可选) 设置按钮 CSS width 值</dd>
              <dt title="Boolean">disabled</dt>
              <dd>(默认值: false) 是否禁用</dd>
              <dt title="String"><span class="change">id</span></dt>
              <dd>(默认值: 与 value 一致) 唯一标识</dd>
            </dl>
          </dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-button-demo" class="sh_javascript">art.dialog({
    button: [
        {
            value: '同意',
            callback: function () {
                this
                .content('你同意了')
                .button({
                    id: 'button-disabled',
                    value: '我变成有效按钮了',
                    disabled: false
                 });
                return false;
            },
            focus: true
        },
        {
            value: '不同意',
            callback: function () {
                alert('你不同意')
            }
        },
        {
            id: 'button-disabled',
            value: '无效按钮',
            disabled: true
        },
        {
            value: '关闭我'
        }
    ]
});</pre>
            <a class="runCode" href="#options-button-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-width">width</h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: "auto") 设置对话框 <strong>内容</strong> 宽度。<br />
            <br />
            一般情况下无需设置此值，对话框会自适应内容宽度</dd>
          <dt>类型</dt>
          <dd>Number, String</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-width-demo" class="sh_javascript">art.dialog({
    width: 460
});</pre>
            <a class="runCode" href="#options-width-demo">运行</a> </dd>
          <dd>
            <pre id="options-width-demo-string" class="sh_javascript">art.dialog({
    width: '20em'
});</pre>
            <a class="runCode" href="#options-width-demo-string">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="options-height">height</h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: "auto") 设置对话框 <strong>内容</strong> 高度。<br />
            <br />
            一般情况下无需设置此值，对话框会自适应内容宽度</dd>
          <dt>类型</dt>
          <dd>Number, String</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-height-demo" class="sh_javascript">art.dialog({
    height: 460
});</pre>
            <a class="runCode" href="#options-height-demo">运行</a> </dd>
          <dd>
            <pre id="options-height-demo-string" class="sh_javascript">art.dialog({
    height: '20em'
});</pre>
            <a class="runCode" href="#options-height-demo-string">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="options-fixed">fixed</h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: false) 开启固定定位。<br />
            <br />
            固定定位是 css2.1 position 的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与 部分移动浏览器对其支持不好，内部会转成绝对定位</dd>
          <dt>类型</dt>
          <dd>Boolean</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-fixed-demo" class="sh_javascript">art.dialog({
    fixed: true,
    content: '请拖动滚动条查看'
});</pre>
            <a class="runCode" href="#options-fixed-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-follow">follow</h3>
        <dl>
          <dt>概述</dt>
          <dd>让对话框依附在指定元素附近</dd>
          <dt>类型</dt>
          <dd>HTMLElement</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-follow-demo" class="sh_javascript">art.dialog({
    follow: document.getElementById('options-follow-demo-runCode'),
    content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
});</pre>
            <a id="options-follow-demo-runCode" class="runCode" href="#options-follow-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-lock">lock</h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: false) 开启锁屏遮罩。<br />
            <br />
            中断用户对话框之外的交互，用于显示非常重要的操作/消息。建议只在适合的时候使用它。遮罩的颜色与透明度可在皮肤CSS中设置。</dd>
          <dt>类型</dt>
          <dd>Boolean</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-lock-demo" class="sh_javascript">art.dialog({
    lock: true
});</pre>
            <a class="runCode" href="#options-lock-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-padding">padding</h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: "20px 25px") 设置消息内容与消息容器的填充边距，即 style padding 属性</dd>
          <dt>类型</dt>
          <dd>String</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-padding-demo" class="sh_javascript">art.dialog({
    content: 'hello world',
    padding: 0
})</pre>
            <a class="runCode" href="#options-padding-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-id">id</h3>
        <dl>
          <dt>概述</dt>
          <dd>设定对话框唯一标识。<br />
            <br />
            作用：
            <ol>
              <li>可防止重复 ID 对话框弹出</li>
              <li>可后续使用 <a href="#api-get">art.dialog.<strong>get</strong>(id)</a> 获取某个对话框的接口</li>
            </ol>
          </dd>
          <dt>类型</dt>
          <dd>String</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-id-demo" class="sh_javascript">art.dialog({
    id: 'id-demo',
    content: '再次点击运行看看'
});
art.dialog.get('id-demo').title('8888888888');</pre>
            <a class="runCode" href="#options-id-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-zIndex">zIndex</h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: 1987) 重置全局 zIndex 初始值，用来改变对话框叠加高度。<br />
            <br />
            比如有时候配合外部浮动层UI组件，但是它们可能默认 zIndex 没有 artDialog 高，导致无法浮动到 artDialog 之上，这个时候你就可以给对话框指定一个较小的 zIndex 值。
            请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。</dd>
          <dt>类型</dt>
          <dd>Number</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-zIndex-demo" class="sh_javascript">art.dialog({
    zIndex: 87
});</pre>
            <a class="runCode" href="#options-zIndex-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-initialize"><span class="change">initialize</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>对话框初始化完成后执行的函数。<br />
            <br />
            回调函数 this 指向 art.dialog 对象</dd>
          <dt>类型</dt>
          <dd>Function</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-initialize-demo" class="sh_javascript">art.dialog({
    initialize: function () {
        this.content('对话框初始化完成');
    }
});</pre>
            <a class="runCode" href="#options-initialize-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-beforeunload"><span class="change">beforeunload</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>对话框关闭前执行的函数。<br />
            <br />
            回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭</dd>
          <dt>类型</dt>
          <dd>Function</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-beforeunload-demo" class="sh_javascript">art.dialog({
    beforeunload: function () {
        return confirm('确定关闭对话框吗');
    }
});</pre>
            <a class="runCode" href="#options-beforeunload-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-visible"><span class="change">visible</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: true) 是否显示对话框</dd>
          <dt>类型</dt>
          <dd>Boolean</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-visible-demo" class="sh_javascript">var dialog = art.dialog({
    visible: false,
    id: 'visible-demo'
});

confirm('显示对话框吗') ? dialog.visible() : dialog.hidden();</pre>
            <a class="runCode" href="#options-visible-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-time"><span class="change">time</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>设置对话框显示时间，超过时间自动关闭 (单位：<span class="change">毫秒</span>)</dd>
          <dt>类型</dt>
          <dd>Number</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-time-demo" class="sh_javascript">art.dialog({
    time: 2000
});</pre>
            <a class="runCode" href="#options-time-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-esc">esc</h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: false) 是否允许用户按 Esc 键关闭对话框</dd>
          <dt>类型</dt>
          <dd>Boolean</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-esc-demo" class="sh_javascript">art.dialog({
    esc: false,
    content: '按 Esc 不能关闭我'
});</pre>
            <a class="runCode" href="#options-esc-demo">运行</a></dd>
        </dl>
      </li>
      <li>
        <h3 id="options-focus"><span class="change">focus</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>(默认值: true) 是否支持对话框按钮自动聚焦</dd>
          <dt>类型</dt>
          <dd>Boolean</dd>
          <dt>示例</dt>
          <dd>
            <pre id="options-focus-demo" class="sh_javascript">art.dialog({
    focus: false,
    ok: function () {}
});</pre>
            <a class="runCode" href="#options-focus-demo">运行</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  <div id="api" class="card">
    <h2>接口</h2>
    <ul>
      <li>
        <h3 id="api-get"><span class="change">art.dialog.get(id)</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>根据 id 获取 art.dialog 对象。<strong>注意</strong>：这是一个静态方法</dd>
          <dt>参数</dt>
          <dd>
            <dl>
              <dt title="String">id</dt>
              <dd>对话框 id</dd>
            </dl>
          </dd>
          <dt>返回值</dt>
          <dd>如果存在 id 参数则返回 art.dialog 对象，否则返回页面所有 art.dialog 对象数组</dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-get-demo" class="sh_javascript">art.dialog({
    id: 'demo-get'
});

var dialog = art.dialog.get('demo-get');
dialog.title('hello').content('I Love You!');
</pre>
            <a class="runCode" href="#api-get-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-closed"><span class="change">closed</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>对话框是否已经关闭。<strong>注意</strong>：这是一个属性，对话框若关闭其值为 true</dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-closed-demo" class="sh_javascript">var dialog = art.dialog();

dialog.close();

alert(dialog.closed);
</pre>
            <a class="runCode" href="#api-closed-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-close">close()</h3>
        <dl>
          <dt>概述</dt>
          <dd>关闭对话框</dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-close-demo" class="sh_javascript">var dialog = art.dialog({
    content: 'hello world!'
});

if (confirm('关闭对话框吗')) {
    dialog.close();
};
</pre>
            <a class="runCode" href="#api-close-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-visible"><span class="change">visible()</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>把隐藏的对话框显示</dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-visible-demo" class="sh_javascript">var dialog = art.dialog({
    visible: false
});

dialog.visible();</pre>
            <a class="runCode" href="#api-visible-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-hidden"><span class="change">hidden()</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>隐藏对话框</dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-hidden-demo" class="sh_javascript">var dialog = art.dialog();

dialog.hidden();</pre>
            <a class="runCode" href="#api-hidden-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-title">title(value)</h3>
        <dl>
          <dt>概述</dt>
          <dd>设置对话框标题</dd>
          <dt>参数</dt>
          <dd>
            <dl>
              <dt title="String">value</dt>
              <dd>标题内容</dd>
            </dl>
          </dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-title-demo" class="sh_javascript">var dialog = art.dialog({
    title: '请等待..'
});

dialog.title('欢迎使用');</pre>
            <a class="runCode" href="#api-title-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-content">content(value)</h3>
        <dl>
          <dt>概述</dt>
          <dd>设置消息内容</dd>
          <dt>参数</dt>
          <dd>
            <dl>
              <dt title="String, HTMLElement">value</dt>
              <dd>消息内容</dd>
            </dl>
          </dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-content-demo" class="sh_javascript">var dialog = art.dialog();

dialog.content('加载完成！');</pre>
            <a class="runCode" href="#api-content-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-button">button(button, [button], ..)</h3>
        <dl>
          <dt>概述</dt>
          <dd>添加或者修改一个或者多个按钮</dd>
          <dt>参数</dt>
          <dd>
            <dl>
              <dt title="Options">button</dt>
              <dd>按钮配置</dd>
            </dl>
          </dd>
          <dt>选项</dt>
          <dd>
            <dl>
              <dt title="String"><span class="change">value</span></dt>
              <dd>按钮显示文本</dd>
              <dt title="Function">callback</dt>
              <dd>(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭</dd>
              <dt title="Boolean">focus</dt>
              <dd>(默认值: true) 是否聚焦</dd>
              <dt title="String"><span class="change">width</span></dt>
              <dd>(可选) 设置按钮 CSS width 值</dd>
              <dt title="Boolean">disabled</dt>
              <dd>(默认值: false) 是否禁用</dd>
              <dt title="String"><span class="change">id</span></dt>
              <dd>(默认值: 与 value 一致) 唯一标识</dd>
            </dl>
          </dd>
          <dt>示例</dt>
          <dd>
            <p>修改按钮与新增按钮：</p>
            <pre id="api-button-demo" class="sh_javascript">var dialog = art.dialog({
    button: [{
        value: '增加一个按钮',
        focus: true,
        callback: function () {
            this.button({
                value: '关闭我'
            });
            return false;
        }
    }, {
        id: 'button',
        value: '提交 (5)',
        width: '8em',
        callback: function () {
            alert(0);
            return false;
        },
        disabled: true
    }]
});

var i = 5;
var timer = setInterval(function () {
    i--;
    
    dialog.button({
        id: 'button',
        value: '提交 (' + i + ')',
        disabled: true
    });
    
    if (i === 0) {
        clearInterval(timer);
        dialog.button({
            id: 'button',
            value: '提交',
            disabled: false
        });
    };
}, 1000);</pre>
            <a class="runCode" href="#api-button-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-follow">follow(element)</h3>
        <dl>
          <dt>概述</dt>
          <dd>让对话框依附在指定元素附近</dd>
          <dt>参数</dt>
          <dd>
            <dl>
              <dt title="HTMLElement">element</dt>
              <dd>元素</dd>
            </dl>
          </dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-follow-demo" class="sh_javascript">var dialog = art.dialog();

dialog.follow(document.getElementById('api-follow-demo-runCode'));</pre>
            <a id="api-follow-demo-runCode" class="runCode" href="#api-follow-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-size">size(width, height)</h3>
        <dl>
          <dt>概述</dt>
          <dd>指定对话框内容尺寸</dd>
          <dt>参数</dt>
          <dd>
            <dl>
              <dt title="Number, String">width</dt>
              <dd>内容宽度</dd>
              <dt title="Number, String">height</dt>
              <dd>内容高度</dd>
            </dl>
          </dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-size-demo" class="sh_javascript">var dialog = art.dialog();

dialog.size('20em', 60);</pre>
            <a class="runCode" href="#api-size-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-lock">lock()</h3>
        <dl>
          <dt>概述</dt>
          <dd>开启锁屏遮罩</dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-lock-demo" class="sh_javascript">var dialog = art.dialog();

dialog.lock();</pre>
            <a class="runCode" href="#api-lock-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-unlock">unlock()</h3>
        <dl>
          <dt>概述</dt>
          <dd>关闭锁屏遮罩</dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-unlock-demo" class="sh_javascript">var dialog = art.dialog({
    lock: true
});

dialog.unlock();</pre>
            <a class="runCode" href="#api-unlock-demo">运行</a> </dd>
        </dl>
      </li>
      <li>
        <h3 id="api-time"><span class="change">time(value)</span></h3>
        <dl>
          <dt>概述</dt>
          <dd>设置对话框显示时间，超过时间自动关闭 (单位：<span class="change">毫秒</span>)</dd>
          <dt>参数</dt>
          <dd>
            <dl>
              <dt title="Number"><span class="change">value</span></dt>
              <dd>毫秒</dd>
            </dl>
          </dd>
          <dt>示例</dt>
          <dd>
            <pre id="api-time-demo" class="sh_javascript">var dialog = art.dialog();

dialog.time(2000);</pre>
            <a class="runCode" href="#api-time-demo">运行</a> </dd>
        </dl>
      </li>
    </ul>
  </div>
  <div id="plugins" class="card">
    <h2>插件</h2>
    <p>artDialog 可以通过插件支持拖动、抖动效果， alert、confirm、prompt 方法。只需在 artDialog 之后引用如下文件即可：</p>
    <pre class="sh_javascript">
&lt;script src="./artDialog.plugins.min.js"&gt;&lt;/script&gt;</pre>
    <p>
      <button id="getPlugins" class="button">加载插件</button>
    </p>
    <div id="plugins-demos">
      <h3>演示插件</h3>
      <ul>
        <li>
          <h3 id="plugins-alert">art.alert(content, [callback])</h3>
          <pre id="plugins-alert-demo" class="sh_javascript">art.alert('那些年，我们一起追的女孩');
</pre>
          <a class="runCode" href="#plugins-alert-demo">运行</a> </li>
        <li>
          <h3 id="plugins-confirm">art.confirm(content, ok, [cancel])</h3>
          <pre id="plugins-confirm-demo" class="sh_javascript">art.confirm('你再也不相信爱情了么？', function () {
    alert(0);
}, function () {
    alert(1);
});
</pre>
          <a class="runCode" href="#plugins-confirm-demo">运行</a> </li>
        <li>
          <h3 id="plugins-prompt">art.prompt(content, ok, [defaultValue])</h3>
          <pre id="plugins-prompt-demo" class="sh_javascript">art.prompt('你的名字是什么？', function (value) {
    alert(value);
}, '糖饼');
</pre>
          <a class="runCode" href="#plugins-prompt-demo">运行</a> </li>
        <li>
          <h3 id="plugins-shake">shake()</h3>
          <pre id="plugins-shake-demo" class="sh_javascript">art.dialog({
    id: 'shake-demo',
    title: '登录',
    content: '帐号：&lt;input type="text" value="guest" /&gt;&lt;br /&gt;'
        + '密码：&lt;input id="login-pw" type="text" value="****" /&gt;',
    lock: true,
    fixed: true,
    ok: function () {
        var pw = document.getElementById('login-pw');
        pw.select();
      pw.focus();
      this.shake();
        return false;
    },
    okValue: '登录',
    cancel: function () {}
});</pre>
          <a class="runCode" href="#plugins-shake-demo">运行</a> </li>
      </ul>
    </div>
  </div>
  <div id="donate" class="card">
    <p>artDialog 自从 2009 第一个版本到现在，这期间进行了很多次重构，因为作者相信：只要用心，哪怕一个小玩意都可以做到极致。</p>
    <p>若喜欢 artDialog，期待小额资金捐赠以支持开源 :-) <a href="https://me.alipay.com/planeart">https://me.alipay.com/planeart</a></p>
  </div>
</div>
<div id="footer">
  <p class="time">(本文档于 2013-02-20 更新) <a id="print" href="#header">打印</a></p>
  <p class="copyright">&copy; 2009-2013 TangBin, <a href="http://www.planeart.cn">planeArt.cn</a></p>
  <p class="validators"> <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p>
</div>
<!-- //////////// -->
<div id="skins" style="display:none">
  <ul id="skins-list">
    <li><a class="button" href="javascript:;">default</a></li>
    <li><a class="button" href="javascript:;">aero</a></li>
    <li><a class="button" href="javascript:;">chrome</a></li>
    <li><a class="button" href="javascript:;">opera</a></li>
    <li><a class="button" href="javascript:;">simple</a></li>
    <li><a class="button" href="javascript:;">idialog</a></li>
    <li><a class="button" href="javascript:;">twitter</a></li>
    <li><a class="button" href="javascript:;">blue</a></li>
    <li><a class="button" href="javascript:;">black</a></li>
    <li><a class="button" href="javascript:;">green</a></li>
  </ul>
  <div id="skins-dialog-content">
    <p style="text-align:center">备注：带阴影的效果的皮肤不被IE6支持。可使用渐进增强方式 <a href="javascript:;" onclick="document.getElementById('skins-ie6').style.display='block';return false">解决[+]</a></p>
    <pre id="skins-ie6" class="sh_javascript" style="display:none">&lt;!--[if gte IE 7]&gt;&lt;!--&gt;
    &lt;link href="./skins/aero.css" rel="stylesheet" /&gt;
&lt;!--&lt;![endif]--&gt;
&lt;!--[if lt IE 7]&gt;
    &lt;link href="./skins/default.css" rel="stylesheet" /&gt;
&lt;![endif]--&gt;</pre>
  </div>
</div>
<script type="text/javascript">(function () {
//<![CDATA[
/*
SHJS - Syntax Highlighting in JavaScript
Copyright (C) 2007, 2008 gnombat@users.sourceforge.net
License: http://shjs.sourceforge.net/doc/gplv3.html
*/
var sh_languages = {};function sh_isEmailAddress(a){return/^mailto:/.test(a)?!1:a.indexOf("@")!==-1}function sh_setHref(a,b,c){var d=c.substring(a[b-2].pos,a[b-1].pos);d.length>=2&&d.charAt(0)==="<"&&d.charAt(d.length-1)===">"&&(d=d.substr(1,d.length-2)),sh_isEmailAddress(d)&&(d="mailto:"+d),a[b-2].node.href=d}function sh_konquerorExec(a){var b=[""];return b.index=a.length,b.input=a,b}function sh_highlightString(a,b){if(/Konqueror/.test(navigator.userAgent)&&!b.konquered){for(var c=0;c<b.length;c++)for(var d=0;d<b[c].length;d++){var e=b[c][d][0];e.source==="$"&&(e.exec=sh_konquerorExec)}b.konquered=!0}var f=document.createElement("a"),g=document.createElement("span"),h=[],i=0,j=[],k=0,l=null,m=function(b,c){var d=b.length;if(d===0)return;if(!c){var e=j.length;if(e!==0){var m=j[e-1];m[3]||(c=m[1])}}if(l!==c){l&&(h[i++]={pos:k},l==="sh_url"&&sh_setHref(h,i,a));if(c){var n;c==="sh_url"?n=f.cloneNode(!1):n=g.cloneNode(!1),n.className=c,h[i++]={node:n,pos:k}}}k+=d,l=c},n=/\r\n|\r|\n/g;n.lastIndex=0;var o=a.length;while(k<o){var p=k,q,r,s=n.exec(a);s===null?(q=o,r=o):(q=s.index,r=n.lastIndex);var t=a.substring(p,q),u=[];for(;;){var v=k-p,w,x=j.length;x===0?w=0:w=j[x-1][2];var y=b[w],z=y.length,A=u[w];A||(A=u[w]=[]);var B=null,C=-1;for(var D=0;D<z;D++){var E;if(D<A.length&&(A[D]===null||v<=A[D].index))E=A[D];else{var F=y[D][0];F.lastIndex=v,E=F.exec(t),A[D]=E}if(E!==null&&(B===null||E.index<B.index)){B=E,C=D;if(E.index===v)break}}if(B===null){m(t.substring(v),null);break}B.index>v&&m(t.substring(v,B.index),null);var G=y[C],H=G[1],I;if(H instanceof Array)for(var J=0;J<H.length;J++)I=B[J+1],m(I,H[J]);else I=B[0],m(I,H);switch(G[2]){case-1:break;case-2:j.pop();break;case-3:j.length=0;break;default:j.push(G)}}l&&(h[i++]={pos:k},l==="sh_url"&&sh_setHref(h,i,a),l=null),k=r}return h}function sh_getClasses(a){var b=[],c=a.className;if(c&&c.length>0){var d=c.split(" ");for(var e=0;e<d.length;e++)d[e].length>0&&b.push(d[e])}return b}function sh_addClass(a,b){var c=sh_getClasses(a);for(var d=0;d<c.length;d++)if(b.toLowerCase()===c[d].toLowerCase())return;c.push(b),a.className=c.join(" ")}function sh_extractTagsFromNodeList(a,b){var c=a.length;for(var d=0;d<c;d++){var e=a.item(d);switch(e.nodeType){case 1:if(e.nodeName.toLowerCase()==="br"){var f;/MSIE/.test(navigator.userAgent)?f="\r":f="\n",b.text.push(f),b.pos++}else b.tags.push({node:e.cloneNode(!1),pos:b.pos}),sh_extractTagsFromNodeList(e.childNodes,b),b.tags.push({pos:b.pos});break;case 3:case 4:b.text.push(e.data),b.pos+=e.length}}}function sh_extractTags(a,b){var c={};return c.text=[],c.tags=b,c.pos=0,sh_extractTagsFromNodeList(a.childNodes,c),c.text.join("")}function sh_mergeTags(a,b){var c=a.length;if(c===0)return b;var d=b.length;if(d===0)return a;var e=[],f=0,g=0;while(f<c&&g<d){var h=a[f],i=b[g];h.pos<=i.pos?(e.push(h),f++):(e.push(i),b[g+1].pos<=h.pos?(g++,e.push(b[g]),g++):(e.push({pos:h.pos}),b[g]={node:i.node.cloneNode(!1),pos:h.pos}))}while(f<c)e.push(a[f]),f++;while(g<d)e.push(b[g]),g++;return e}function sh_insertTags(a,b){var c=document,d=document.createDocumentFragment(),e=0,f=a.length,g=0,h=b.length,i=d;while(g<h||e<f){var j,k;e<f?(j=a[e],k=j.pos):k=h;if(k<=g){if(j.node){var l=j.node;i.appendChild(l),i=l}else i=i.parentNode;e++}else i.appendChild(c.createTextNode(b.substring(g,k))),g=k}return d}function sh_highlightElement(a,b){sh_addClass(a,"sh_sourceCode");var c=[],d=sh_extractTags(a,c),e=sh_highlightString(d,b),f=sh_mergeTags(c,e),g=sh_insertTags(f,d);while(a.hasChildNodes())a.removeChild(a.firstChild);a.appendChild(g)}function sh_getXMLHttpRequest(){if(window.ActiveXObject)return new ActiveXObject("Msxml2.XMLHTTP");if(window.XMLHttpRequest)return new XMLHttpRequest;throw"No XMLHttpRequest implementation available"}function sh_load(language,element,prefix,suffix){if(language in sh_requests){sh_requests[language].push(element);return}sh_requests[language]=[element];var request=sh_getXMLHttpRequest(),url=prefix+"sh_"+language+suffix;request.open("GET",url,!0),request.onreadystatechange=function(){if(request.readyState===4)try{if(!!request.status&&request.status!==200)throw"HTTP error: status "+request.status;eval(request.responseText);var elements=sh_requests[language];for(var i=0;i<elements.length;i++)sh_highlightElement(elements[i],sh_languages[language])}finally{request=null}},request.send(null)}function sh_highlightDocument(a,b){var c=document.getElementsByTagName("pre");for(var d=0;d<c.length;d++){var e=c.item(d),f=sh_getClasses(e);for(var g=0;g<f.length;g++){var h=f[g].toLowerCase();if(h==="sh_sourcecode")continue;if(h.substr(0,3)==="sh_"){var i=h.substring(3);if(i in sh_languages)sh_highlightElement(e,sh_languages[i]);else if(typeof a=="string"&&typeof b=="string")sh_load(i,e,a,b);else throw'Found <pre> element with class="'+h+'", but no such language exists';break}}}}var sh_requests={};sh_languages.javascript=[[[/\/\/\//g,"sh_comment",1],[/\/\//g,"sh_comment",7],[/\/\*\*/g,"sh_comment",8],[/\/\*/g,"sh_comment",9],[/\b(?:abstract|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|final|finally|for|function|goto|if|implements|in|instanceof|interface|native|new|null|private|protected|prototype|public|return|static|super|switch|synchronized|throw|throws|this|transient|true|try|typeof|var|volatile|while|with)\b/g,"sh_keyword",-1],[/(\+\+|--|\)|\])(\s*)(\/=?(?![*\/]))/g,["sh_symbol","sh_normal","sh_symbol"],-1],[/(0x[A-Fa-f0-9]+|(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?)(\s*)(\/(?![*\/]))/g,["sh_number","sh_normal","sh_symbol"],-1],[/([A-Za-z$_][A-Za-z0-9$_]*\s*)(\/=?(?![*\/]))/g,["sh_normal","sh_symbol"],-1],[/\/(?:\\.|[^*\\\/])(?:\\.|[^\\\/])*\/[gim]*/g,"sh_regexp",-1],[/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,"sh_number",-1],[/"/g,"sh_string",10],[/'/g,"sh_string",11],[/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,"sh_symbol",-1],[/\{|\}/g,"sh_cbracket",-1],[/\b(?:Math|Infinity|NaN|undefined|arguments)\b/g,"sh_predef_var",-1],[/\b(?:Array|Boolean|Date|Error|EvalError|Function|Number|Object|RangeError|ReferenceError|RegExp|String|SyntaxError|TypeError|URIError|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|eval|isFinite|isNaN|parseFloat|parseInt)\b/g,"sh_predef_func",-1],[/\b(?:applicationCache|closed|Components|content|controllers|crypto|defaultStatus|dialogArguments|directories|document|frameElement|frames|fullScreen|globalStorage|history|innerHeight|innerWidth|length|location|locationbar|menubar|name|navigator|opener|outerHeight|outerWidth|pageXOffset|pageYOffset|parent|personalbar|pkcs11|returnValue|screen|availTop|availLeft|availHeight|availWidth|colorDepth|height|left|pixelDepth|top|width|screenX|screenY|scrollbars|scrollMaxX|scrollMaxY|scrollX|scrollY|self|sessionStorage|sidebar|status|statusbar|toolbar|top|window)\b/g,"sh_predef_var",-1],[/\b(?:alert|addEventListener|atob|back|blur|btoa|captureEvents|clearInterval|clearTimeout|close|confirm|dump|escape|find|focus|forward|getAttention|getComputedStyle|getSelection|home|moveBy|moveTo|open|openDialog|postMessage|print|prompt|releaseEvents|removeEventListener|resizeBy|resizeTo|scroll|scrollBy|scrollByLines|scrollByPages|scrollTo|setInterval|setTimeout|showModalDialog|sizeToContent|stop|unescape|updateCommands|onabort|onbeforeunload|onblur|onchange|onclick|onclose|oncontextmenu|ondragdrop|onerror|onfocus|onkeydown|onkeypress|onkeyup|onload|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onpaint|onreset|onresize|onscroll|onselect|onsubmit|onunload)\b/g,"sh_predef_func",-1],[/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,"sh_function",-1]],[[/$/g,null,-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\?>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/\\(?:\\|")/g,null,-1],[/"/g,"sh_string",-2]],[[/>/g,"sh_preproc",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/-->/g,"sh_comment",-2],[/<!--/g,"sh_comment",5]],[[/(?:\/)?>/g,"sh_keyword",-2],[/([^=" \t>]+)([ \t]*)(=?)/g,["sh_type","sh_normal","sh_symbol"],-1],[/"/g,"sh_string",3]],[[/$/g,null,-2]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/<\?xml/g,"sh_preproc",2,1],[/<!DOCTYPE/g,"sh_preproc",4,1],[/<!--/g,"sh_comment",5],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,"sh_keyword",6,1],[/&(?:[A-Za-z0-9]+);/g,"sh_preproc",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,"sh_keyword",-1],[/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,"sh_keyword",6,1],[/@[A-Za-z]+/g,"sh_type",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/\*\//g,"sh_comment",-2],[/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,"sh_url",-1],[/(?:TODO|FIXME|BUG)(?:[:]?)/g,"sh_todo",-1]],[[/"/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]],[[/'/g,"sh_string",-2],[/\\./g,"sh_specialchar",-1]]];




sh_highlightDocument();

$('#artVersion').html(art.dialog.version || '');

// 运行代码
$.prototype.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);
    
  try {
    new Function(code).call(window);
  } catch (e) {
    window.console && console.error(e);
  };
    
    return this;
};

// 代码运行按钮
var runCodeBtn = function (event) {
    var target = event.target,
        type = event.type,
        $target = $(target);

    if (!target.nodeName === 'A' || !$target.hasClass('runCode')) {
        return;
    };
    
  var code = target.getAttribute('href', 2);
    var $code = $(code);
    
    
    
    if (type === 'click') {
        $code.runCode();
    } else if (type === 'mouseover') {
        
        clearTimeout(target.timer);
        $code.addClass('select');
        
    } else if (type === 'mouseout') {
        
        target.timer = setTimeout(function () {
            $code.removeClass('select');
        }, 300);
    };
    
    
    return false;
};
$(document).bind('click', runCodeBtn);
$(document).bind('mouseover', runCodeBtn);
$(document).bind('mouseout', runCodeBtn);


// 异步加载 js
$.getScript = $.getScript || function (url, callback) {
  
  var query = arguments[2] || '';
  var ts = + new Date;
  var ret = url.replace(/([?&])_=[^&]*/, "$1_=" + ts );
  

  url = ret + ((ret === url) ? (/\?/.test(url) ? '&' : '?') + '_=' + ts : '');
  url = url + query;

  var head = document.head || document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  
  
  script.async = 'async';
  
  
  script.onload = script.onreadystatechange = function () {
  
    var isReady = !script.readyState
    || /loaded|complete/.test(script.readyState);
    
    if (isReady) {

      script.onload = script.onreadystatechange = null;
      head.removeChild(script);

      callback && callback();
    };
    
  };
  
  script.src = url;
  head.appendChild(script);
};

$('#plugins-demos').hide();
$('#getPlugins').bind('click', function () {
  var that = this,
    url = './source/artDialog.plugins.js';
    
  that.disabled = true;
  
  $.getScript(url, function () {
    //$.alert(url + ' 插件加载成功！');
    that.innerHTML = '插件已加载';
    $('#plugins-demos').show();
  });
  
  return false;
})[0].disabled = false;


// 皮肤演示
var skinDialog = art.dialog({
    id: 'dialog-skins-demo',
    title: '皮肤演示',
    content: $('#skins')[0],
    fixed: true,
    initialize: function () {
        this.hidden();
    },
    beforeunload: function () {
        this.hidden();
        return false;
    }
});

var getDemoStyle = function (skin) {
    $('#artDialog-skin')[0].href = 'skins/' + skin + '.css?' + + new Date;
    skinDialog.hidden();
    setTimeout(function () {
        skinDialog.visible();
        $('#showSkinDialog')[0].innerHTML = skin;
    }, 150);
};

$('#skins-list').bind('click', function (event) {
    var target = event.target;
    var skin = target.innerHTML;
    
    if (target.nodeName === 'A') {
        getDemoStyle(skin);
        return false;
    };

});

$('#showSkinDialog').bind('click', function () {
    skinDialog.visible().zIndex();
    return false;
});

$('#showChange').bind('click', function () {
    $(document.body).addClass('showChange');
  this.disabled = true;
    this.innerHTML += '-已设置!';
    return false;
})[0].disabled = false;


// 打印按钮
$('#print').bind('click', function () {
    print();
    return false;
});


//]]>
})();</script> 
<script type="text/javascript">
//<![CDATA[

// 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);

})();
//]]>
</script>
</body>
</html>