raolu
/
PC-application


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
body {
  max-width: 620px;
  margin: auto;
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px;
}
body > *:first-child {
  margin-top: 0 !important;
}
body > *:last-child {
  margin-bottom: 0 !important;
}
a {
  color: #4183C4;
}
h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative;
}
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
  text-decoration: none;
}
h1 tt, h1 code {
  font-size: inherit;
}
h2 tt, h2 code {
  font-size: inherit;
}
h3 tt, h3 code {
  font-size: inherit;
}
h4 tt, h4 code {
  font-size: inherit;
}
h5 tt, h5 code {
  font-size: inherit;
}
h6 tt, h6 code {
  font-size: inherit;
}
h1 {
  font-size: 28px;
  color: black;
  text-align: center;
}
h6 {
  text-align: center;
}
h2 {
  font-size: 24px;
  border-bottom: 1px solid #cccccc;
  color: black;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 16px;
}
h5 {
  font-size: 14px;
}
h6 {
  color: #777777;
  font-size: 14px;
}
p, blockquote, ul, ol, dl, li, table, pre {
  margin: 15px 0;
}
hr {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0;
}
body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
}
body > h1:first-child {
  margin-top: 0;
  padding-top: 0;
}
body > h1:first-child + h2 {
  margin-top: 0;
  padding-top: 0;
}
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0;
}
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0;
}
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0;
}
li p.first {
  display: inline-block;
}
li {
  margin: 0;
}
ul, ol {
  padding-left: 30px;
}
ul :first-child, ol :first-child {
  margin-top: 0;
}
dl {
  padding: 0;
}
dl dt {
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  padding: 0;
  margin: 15px 0 5px;
}
dl dd {
  margin: 0 0 15px;
  padding: 0 15px;
}
blockquote {
  border-left: 2px solid #dddddd;
  padding: 0 15px;
  color: #777777;
}
blockquote > :first-child {
  margin-top: 0;
}
blockquote > :last-child {
  margin-bottom: 0;
}
table {
  padding: 0;
  border-collapse: collapse;
}
tr {
  border-top: 1px solid #cccccc;
  background-color: white;
  margin: 0;
  padding: 0;
}
tr:nth-child(2n) {
  background-color: #f8f8f8;
}
th {
  font-weight: bold;
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
td {
  border: 1px solid #cccccc;
  text-align: left;
  margin: 0;
  padding: 6px 13px;
}
th :first-child, td :first-child {
  margin-top: 0;
}
th :last-child, td :last-child {
  margin-bottom: 0;
}
img {
  max-width: 100%;
}
code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px;
}
pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}
pre {
  background-color: #303030;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
}
pre code {
  color: #f2f2f2;
  border: none;
  padding: 0;
  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
  margin-bottom: 30px;
  font-size: 14px;
}
pre tt {
  background-color: transparent;
  border: none;
}
@media print {
  table, pre {
    page-break-inside: avoid;
  }
}

</style>
<title>artDialog</title>

</head>
<body>
<h1>artDialog</h1>

<p><a href="http://aui.github.io/artDialog/">首页</a> &gt; <a href="http://aui.github.io/artDialog/doc/index.html">文档与示例</a></p>

<hr />

<p>artDialog —— 经典、优雅的网页对话框控件。</p>

<ol>
<li>支持普通与 12 方向气泡状对话框</li>
<li>完善的焦点处理，自动焦点附加与回退</li>
<li>支持 ARIA 标准</li>
<li>面向未来：基于 HTML5 Dialog 的 API</li>
<li>支持标准与模态对话框</li>
<li>丰富且友好的编程接口</li>
<li>能自适应内容尺寸</li>
<li>仅 4kb (gzip)</li>
</ol>


<h2>文档导航</h2>

<ul>
<li><a href="#module">引入 artDialog</a></li>
<li><a href="#quickref">快速参考</a>

<ul>
<li><a href="#quickref-basic">普通对话框</a></li>
<li><a href="#quickref-modal">模态对话框</a></li>
<li><a href="#quickref-bubble">气泡浮层</a></li>
<li><a href="#quickref-button">添加按钮</a></li>
<li><a href="#quickref-close">控制对话框关闭</a></li>
<li><a href="#quickref-statusbar">给对话框左下脚添加复选框</a></li>
<li><a href="#quickref-callback">点按钮不关闭对话框</a></li>
<li><a href="#quickref-cancel">不显示关闭按钮</a></li>
<li><a href="#quickref-iframe">创建 iframe 内容</a></li>
</ul>
</li>
<li><a href="#api">方法</a>

<ul>
<li><a href="#api-show">show([anchor])</a></li>
<li><a href="#api-showModal">showModal([anchor])</a></li>
<li><a href="#api-close">close([result])</a></li>
<li><a href="#api-remove">remove()</a></li>
<li><a href="#api-content">content(html)</a></li>
<li><a href="#api-title">title(text)</a></li>
<li><a href="#api-width">width(value)</a></li>
<li><a href="#api-height">height(value)</a></li>
<li><a href="#api-reset">reset()</a></li>
<li><a href="#api-button">button(args)</a></li>
<li><a href="#api-focus">focus()</a></li>
<li><a href="#api-blur">blur()</a></li>
<li><a href="#api-addEventListener">addEventListener(type, callback)</a></li>
<li><a href="#api-removeEventListener">removeEventListener(type, callback)</a></li>
<li><a href="#api-dialog-get">dialog.get(id)</a></li>
<li><a href="#api-dialog-getCurrent">dialog.getCurrent()</a></li>
</ul>
</li>
<li><a href="#option">选项</a>

<ul>
<li>内容

<ul>
<li><a href="#option-title">title</a></li>
<li><a href="#option-content">content</a></li>
<li><a href="#option-statusbar">statusbar</a></li>
</ul>
</li>
<li>按钮

<ul>
<li><a href="#option-ok">ok</a></li>
<li><a href="#option-okValue">okValue</a></li>
<li><a href="#option-cancel">cancel</a></li>
<li><a href="#option-cancelValue">cancelValue</a></li>
<li><a href="#option-cancelDisplay">cancelDisplay</a></li>
<li><a href="#option-button">button</a></li>
</ul>
</li>
<li>外观

<ul>
<li><a href="#option-width">width</a></li>
<li><a href="#option-height">height</a></li>
<li><a href="#option-skin">skin</a></li>
<li><a href="#option-padding">padding</a></li>
</ul>
</li>
<li>交互

<ul>
<li><a href="#option-fixed">fixed</a></li>
<li><a href="#option-align">align</a></li>
<li><a href="#option-quickClose">quickClose</a></li>
<li><a href="#option-autofocus">autofocus</a></li>
<li><a href="#option-zIndex">zIndex</a></li>
</ul>
</li>
<li>事件

<ul>
<li><a href="#option-onshow">onshow</a></li>
<li><a href="#option-onbeforeremove">onbeforeremove</a></li>
<li><a href="#option-onremove">onremove</a></li>
<li><a href="#option-onclose">onclose</a></li>
<li><a href="#option-onfocus">onfocus</a></li>
<li><a href="#option-onblur">onblur</a></li>
<li><a href="#option-onreset">onreset</a></li>
</ul>
</li>
<li>高级

<ul>
<li><a href="#option-id">id</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#property">属性</a>

<ul>
<li><a href="#property-open">open</a></li>
<li><a href="#property-returnValue">returnValue</a></li>
</ul>
</li>
<li><a href="#other">其他</a>

<ul>
<li><a href="#other-skin">自定义样式</a></li>
<li><a href="#other-grunt">源码构建</a></li>
<li><a href="#other-upgrade">artDialog v5 升级 v6 参考</a></li>
<li><a href="#other-support">支持</a></li>
</ul>
</li>
</ul>


<h2><span id="module">引入 artDialog</span></h2>

<h3>1.直接引用</h3>

<pre><code>&lt;script src="lib/jquery-1.10.2.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="css/ui-dialog.css"&gt;
&lt;script src="dist/dialog-min.js"&gt;&lt;/script&gt;
//..
</code></pre>

<h3>2.作为 RequireJS 或 SeaJS 的模块引入</h3>

<pre><code>var dialog = require('./src/dialog');
//..
</code></pre>

<p><strong>注意：</strong>内部依赖全局模块<code>require('jquery')</code>，请注意全局模块配置是否正确。<a href="../test/show.html">seajs加载示例</a></p>

<blockquote><ul>
<li>如果需要支持 <a href="#quickref-iframe">iframe</a> 内容与拖拽，请引用加强版 dialog-plus.js</li>
<li>jquery 最低要求版本为<code>1.7+</code></li>
</ul>
</blockquote>

<h2><span id="quickref">快速参考</span></h2>

<h3><span id="quickref-basic">普通对话框</span></h3>

<pre><code>var d = dialog({
    title: '欢迎',
    content: '欢迎使用 artDialog 对话框组件！'
});
d.show();
</code></pre>

<h3><span id="quickref-modal">模态对话框</span></h3>

<pre><code>var d = dialog({
    title: 'message',
    content: '&lt;input autofocus /&gt;'
});
d.showModal();
</code></pre>

<h3><span id="quickref-bubble">气泡浮层</span></h3>

<pre><code>var d = dialog({
    content: 'Hello World!',
    quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById('quickref-bubble'));
</code></pre>

<p><a href="../test/align.html">12 个方向定位演示</a></p>

<h3><span id="quickref-button">添加按钮</span></h3>

<p>1.确定与取消按钮：</p>

<pre><code>var d = dialog({
    title: '提示',
    content: '按钮回调函数返回 false 则不许关闭',
    okValue: '确定',
    ok: function () {
        this.title('提交中…');
        return false;
    },
    cancelValue: '取消',
    cancel: function () {}
});
d.show();
</code></pre>

<p>2.指定更多按钮：</p>

<p>请参考 <a href="#option-button"><code>button</code></a> 方法或参数。</p>

<h3><span id="quickref-close">控制对话框关闭</span></h3>

<pre><code>var d = dialog({
    content: '对话框将在两秒内关闭'
});
d.show();
setTimeout(function () {
    d.close().remove();
}, 2000);
</code></pre>

<h3><span id="quickref-statusbar">给对话框左下脚添加复选框</span></h3>

<pre><code>var d = dialog({
    title: '欢迎',
    content: '欢迎使用 artDialog 对话框组件！',
    ok: function () {},
    statusbar: '&lt;label&gt;&lt;input type="checkbox"&gt;不再提醒&lt;/label&gt;'
});
d.show();
</code></pre>

<h3><span id="quickref-callback">点按钮不关闭对话框</span></h3>

<p>按钮事件返回 false 则不会触发关闭。</p>

<pre><code>var d = dialog({
    title: '欢迎',
    content: '欢迎使用 artDialog 对话框组件！',
    ok: function () {
        var that = this;
        this.title('正在提交..');
        setTimeout(function () {
            that.close().remove();
        }, 2000);
        return false;
    },
    cancel: function () {
        alert('不许关闭');
        return false;
    }
});
d.show();
</code></pre>

<h3><span id="quickref-cancel">不显示关闭按钮</span></h3>

<pre><code>var d = dialog({
    title: '欢迎',
    content: '欢迎使用 artDialog 对话框组件！',
    cancel: false,
    ok: function () {}
});
d.show();
</code></pre>

<h3><span id="quickref-iframe">创建 iframe 内容</span></h3>

<p>artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面，可以在顶层页面创建一个可供 iframe 访问的对话框创建方法，例如：</p>

<pre><code>seajs.use(['dialog/src/dialog-plus'], function (dialog) {
    window.dialog = dialog;
});
//..
</code></pre>

<p>然后子页面就可以通过<code>top.dialog</code>控制对话框了。</p>

<p><a href="../test/iframe/index.html">打开示例页面</a></p>

<blockquote><p>  小提示：增强版的<a href="#option">选项</a>比标准版多了<code>url</code>、<code>oniframeload</code>这几个字段。</p></blockquote>

<h2><span id="api">方法</span></h2>

<p>若无特别说明，方法均支持链式调用。</p>

<h3><span id="api-show">show([anchor])</span></h3>

<p>显示对话框。</p>

<p>默认居中显示，支持传入元素节点或者事件对象。</p>

<ul>
<li>参数类型为<code>HTMLElement</code>：可吸附到元素上，同时对话框将呈现气泡样式。</li>
<li>参数类型为<code>Event Object</code>：根据<code>event.pageX</code>与<code>event.pageY</code>定位。</li>
</ul>


<h4>示例</h4>

<pre><code>var d = dialog();
d.content('hello world');
d.show(document.getElementById('api-show'));
</code></pre>

<pre><code>var d = dialog({
    id: 'api-show-dialog',
    quickClose: true,
    content: '右键菜单'
});
$(document).on('contextmenu', function (event) {
    d.show(event);
    return d.destroyed;
});
</code></pre>

<h3><span id="api-showModal">showModal([anchor])</span></h3>

<p>显示一个模态对话框。</p>

<p>其余特性与参数可参见<code>show([anchor])</code>方法。</p>

<h4>示例</h4>

<pre><code>var d = dialog({
    title: 'message',
    content: '&lt;input autofocus /&gt;'
});
d.showModal();
</code></pre>

<h3><span id="api-close">close([result])</span></h3>

<p>关闭（隐藏）对话框。</p>

<p>可接收一个返回值，可以参见 <a href="#property-returnValue">returnValue</a>。</p>

<p><strong>注意</strong>：<code>close()</code>方法只隐藏对话框，不会在 DOM 中删除，删除请使用<code>remove()</code>方法。</p>

<h3><span id="api-remove">remove()</span></h3>

<p>销毁对话框。</p>

<p><strong>注意</strong>：不同于<code>close([result])</code>方法，<code>remove()</code>方法会从 DOM 中移出对话框相关节点，销毁后的对话框无法再次使用。</p>

<p>对话框按钮点击后默认会依次触发 <code>close()</code>、<code>remove()</code> 方法。如果想手动控制对话框关闭可以如下操作：</p>

<pre><code>var d = dialog();
// [..]
d.close().remove();
</code></pre>

<h3><span id="api-content">content(html)</span></h3>

<p>写入对话框内容。</p>

<p><code>html</code>参数支持<code>String</code>、<code>HTMLElement</code>类型。</p>

<h4>示例</h4>

<p>传入字符串：</p>

<pre><code>var d = dialog();
d.content('hello world');
d.show();
</code></pre>

<p>传入元素节点：</p>

<pre><code>//..
var elem = document.getElementById('test');
dialog({
    content: elem,
    id: 'EF893L'
}).show();
</code></pre>

<blockquote><p>v6.0.4 更新：隐藏元素将会自动显示，并且对话框卸载的时候会放回到<code>body</code>中</p></blockquote>

<h3><span id="api-title">title(text)</span></h3>

<p>写入对话框标题。</p>

<h4>示例</h4>

<pre><code>var d = dialog();
d.title('hello world');
d.show();
</code></pre>

<h3><span id="api-width">width(value)</span></h3>

<p>设置对话框宽度。</p>

<h3>示例</h3>

<pre><code>dialog({
    content: 'hello world'
})
.width(320)
.show();
</code></pre>

<h3><span id="api-height">height(value)</span></h3>

<p>设置对话框高度。</p>

<h3>示例</h3>

<pre><code>dialog({
    content: 'hello world'
})
.height(320)
.show();
</code></pre>

<h3><span id="api-reset">reset()</span></h3>

<p>手动刷新对话框位置。</p>

<p>通常动态改变了内容尺寸后需要刷新对话框位置。</p>

<h3><span id="api-button">button(args)</span></h3>

<p>自定义按钮。</p>

<p>参数请参考 <a href="#option-button">选项<code>button</code></a>；同时支持传入 HTML 字符串填充按钮区域。</p>

<h3><span id="api-focus">focus()</span></h3>

<p>聚焦对话框（置顶）。</p>

<h3><span id="api-blur">blur()</span></h3>

<p>让对话框失去焦点。</p>

<h3><span id="api-addEventListener">addEventListener(type, callback)</span></h3>

<p>添加事件。</p>

<p>支持的事件有：<code>show</code>、<code>close</code>、<code>beforeremove</code>、<code>remove</code>、<code>reset</code>、<code>focus</code>、<code>blur</code></p>

<h3><span id="api-removeEventListener">removeEventListener(type, callback)</span></h3>

<p>删除事件。</p>

<h3><span id="api-dialog-get">dialog.get(id)</span></h3>

<p>根据获取打开的对话框实例。</p>

<p><strong>注意</strong>：这是一个静态方法。</p>

<h3><span id="api-dialog-getCurrent">dialog.getCurrent()</span></h3>

<p>获取当前（置顶）对话框实例。</p>

<p><strong>注意</strong>：这是一个静态方法。</p>

<h2><span id="option">配置参数</span></h2>

<h3><span id="option-content">content</span></h3>

<p>设置消息内容。</p>

<h4>类型</h4>

<p>String, HTMLElement</p>

<h4>示例</h4>

<p>传入字符串：</p>

<pre><code>dialog({
    content: 'hello world!'
}).show();
</code></pre>

<p>传入元素节点：</p>

<pre><code>//..
var elem = document.getElementById('test');
dialog({
    content: elem,
    id: 'EF893L'
}).show();
</code></pre>

<h3><span id="option-title">title</span></h3>

<p>标题内容。</p>

<h4>类型</h4>

<p>String</p>

<h4>示例</h4>

<pre><code>dialog({
    title: 'hello world!'
}).show();
</code></pre>

<h3><span id="option-statusbar">statusbar</span></h3>

<p>状态栏区域 HTML 代码。</p>

<p>可以实现类似“不再提示”的复选框。<strong>注意</strong>：必须有按钮才会显示。</p>

<h4>类型</h4>

<p>String</p>

<h4>示例</h4>

<pre><code>var d = dialog({
    title: '欢迎',
    content: '欢迎使用 artDialog 对话框组件！',
    ok: function () {},
    statusbar: '&lt;label&gt;&lt;input type="checkbox"&gt;不再提醒&lt;/label&gt;'
});
d.show();
</code></pre>

<h3><span id="option-ok">ok</span></h3>

<p>确定按钮。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭。</p>

<h4>类型</h4>

<p>Function</p>

<h4>示例</h4>

<pre><code>dialog({
    ok: function () {
        this
        .title('消息')
        .content('hello world!')
        .width(130);
        return false;
    }
}).show();
</code></pre>

<h3><span id="option-okValue">okValue</span></h3>

<p>(默认值: <code>"ok"</code>)  确定按钮文本。</p>

<h4>类型</h4>

<p>String</p>

<h4>示例</h4>

<pre><code>dialog({
    okValue: '猛击我',
    ok: function () {
        this.content('hello world!');
        return false;
    }
}).show();
</code></pre>

<h3><span id="option-cancel">cancel</span></h3>

<p>取消按钮。</p>

<p>取消按钮也等同于标题栏的关闭按钮，若值为<code>false</code>则不显示关闭按钮。回调函数<code>this</code>指向<code>dialog</code>对象，执行完毕默认关闭对话框，若返回<code>false</code>则阻止关闭。</p>

<h4>类型</h4>

<p>Function, Boolean</p>

<h4>示例</h4>

<pre><code>dialog({
    title: '消息',
    ok: function () {},
    cancel: function () {
        alert('取消');
    }
}).show();
</code></pre>

<pre><code>dialog({
    title: '消息',
    content: '不显示关闭按钮',
    ok: function () {},
    cancel: false
}).show();
</code></pre>

<h3><span id="option-cancelValue">cancelValue</span></h3>

<p>(默认值: <code>"cancel"</code>) 取消按钮文本。</p>

<h4>类型</h4>

<p>String</p>

<h4>示例</h4>

<pre><code>dialog({
    cancelValue: '取消我',
    cancel: function () {
        alert('关闭');
    }
}).show();
</code></pre>

<h3><span id="option-cancelDisplay">cancelDisplay</span></h3>

<p>(默认值: <code>true</code>) 是否显示取消按钮。</p>

<h4>类型</h4>

<p>Boolean</p>

<h4>示例</h4>

<pre><code>dialog({
    title: '提示',
    content: '这是一个禁止关闭的对话框，并且没有取消按钮',
    cancel: function () {
        alert('禁止关闭');
        return false;
    },
    cancelDisplay: false
}).show();
</code></pre>

<h3><span id="option-button">button</span></h3>

<p>自定义按钮组。</p>

<h4>类型</h4>

<p>Array</p>

<h4>选项</h4>

<table>
<thead>
<tr>
<th>名称 </th>
<th> 类型 </th>
<th> 描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>value </td>
<td> String </td>
<td> 按钮显示文本</td>
</tr>
<tr>
<td>callback </td>
<td> Function </td>
<td> (可选) 回调函数<code>this</code>指向<code>dialog</code>对象，执行完毕默认关闭与销毁对话框（依次执行<code>close()</code>与<code>remove()</code>），若返回<code>false</code>则阻止关闭与销毁</td>
</tr>
<tr>
<td>autofocus </td>
<td> Boolean </td>
<td> (默认值:<code>false</code>) 是否自动聚焦</td>
</tr>
<tr>
<td>disabled </td>
<td> Boolean </td>
<td> (默认值: <code>false</code>) 是否禁用</td>
</tr>
</tbody>
</table>


<h4>示例</h4>

<pre><code>dialog({
    button: [
        {
            value: '同意',
            callback: function () {
                this
                .content('你同意了');
                return false;
            },
            autofocus: true
        },
        {
            value: '不同意',
            callback: function () {
                alert('你不同意')
            }
        },
        {
            id: 'button-disabled',
            value: '无效按钮',
            disabled: true
        },
        {
            value: '关闭我'
        }
    ]
}).show();
</code></pre>

<h3><span id="option-width">width</span></h3>

<p>设置对话框 <strong>内容</strong> 宽度。</p>

<h4>类型</h4>

<p>String, Number</p>

<h4>示例</h4>

<pre><code>dialog({
    width: 460
}).show();
</code></pre>

<pre><code>dialog({
    width: '20em'
}).show();
</code></pre>

<h3><span id="option-height">height</span></h3>

<p>设置对话框 <strong>内容</strong> 高度。</p>

<h4>类型</h4>

<p>String, Number</p>

<h4>示例</h4>

<pre><code>dialog({
    height: 460
}).show();
</code></pre>

<pre><code>dialog({
    height: '20em'
}).show();
</code></pre>

<h3><span id="option-skin">skin</span></h3>

<p>设置对话框额外的<code>className</code>参数。</p>

<p>多个<code>className</code>请使用空格隔开。</p>

<h4>类型</h4>

<p>String</p>

<h4>示例</h4>

<pre><code>//..
dialog({
    skin: 'min-dialog tips'
}).show();
</code></pre>

<h3><span id="option-padding">padding</span></h3>

<p>(默认值: <em>继承 css 文件设置</em>) 设置消息内容与消息容器的填充边距，即 style <code>padding</code>属性</p>

<h4>类型</h4>

<p>String</p>

<h4>示例</h4>

<pre><code>dialog({
    content: 'hello world',
    padding: 0
}).show();
</code></pre>

<h3><span id="option-fixed">fixed</span></h3>

<p>(默认值: <code>false</code>) 开启固定定位。</p>

<p>固定定位是 css2.1 <code>position</code>的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位。</p>

<h4>类型</h4>

<p>Boolean</p>

<h4>示例</h4>

<pre><code>dialog({
    fixed: true,
    title: '消息',
    content: '请拖动滚动条查看'
}).show();
</code></pre>

<h3><span id="option-align">align</span></h3>

<p>(默认值: <code>"bottom left"</code>) 设置对话框与其他元素的对齐方式。</p>

<p>如果<code>show(elem)</code>与<code>showModal(elem)</code>传入元素，<code>align</code>参数方可生效，支持如下对齐方式：</p>

<ul>
<li><code>"top left"</code></li>
<li><code>"top"</code></li>
<li><code>"top right"</code></li>
<li><code>"right top"</code></li>
<li><code>"right"</code></li>
<li><code>"right bottom"</code></li>
<li><code>"bottom right"</code></li>
<li><code>"bottom"</code></li>
<li><code>"bottom left"</code></li>
<li><code>"left bottom"</code></li>
<li><code>"left"</code></li>
<li><code>"left top"</code></li>
</ul>


<h3>类型</h3>

<p>String</p>

<h3>示例</h3>

<pre><code>var d = dialog({
    align: 'left',
    content: 'Hello World!',
    quickClose: true
});
d.show(document.getElementById('option-align'));
</code></pre>

<p><a href="../test/align.html">12 个方向定位演示</a></p>

<h3><span id="option-autofocus">autofocus</span></h3>

<p>(默认值: <code>true</code>) 是否支持自动聚焦。</p>

<h4>类型</h4>

<p>Boolean</p>

<h3><span id="option-quickClose">quickClose</span></h3>

<p>(默认值: false) 是否点击空白出快速关闭。</p>

<h4>类型</h4>

<p>Boolean</p>

<h3>示例</h3>

<pre><code>var d = dialog({
    content: '点击空白处快速关闭',
    quickClose: true
});
d.show(document.getElementById('option-quickClose'));
</code></pre>

<h3><span id="option-zIndex">zIndex</span></h3>

<p>(默认值: <code>1024</code>) 重置全局<code>zIndex</code>初始值，用来改变对话框叠加高度。</p>

<p>比如有时候配合外部浮动层 UI 组件，但是它们可能默认<code>zIndex</code>没有对话框高，导致无法浮动到对话框之上，这个时候你就可以给对话框指定一个较小的<code>zIndex</code>值。</p>

<p>请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。</p>

<h4>类型</h4>

<p>Number</p>

<h4>示例</h4>

<pre><code>dialog({
    zIndex: 87
}).show();
</code></pre>

<h3><span id="option-onshow">onshow</span></h3>

<p>对话框打开的事件。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>

<h4>类型</h4>

<p>Function</p>

<h4>示例</h4>

<pre><code>var d = dialog({
    content: 'loading..',
    onshow: function () {
        this.content('dialog ready');
    }
});
d.show();
</code></pre>

<h3><span id="option-onclose">onclose</span></h3>

<p>对话框关闭后执行的事件。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>

<h4>类型</h4>

<p>Function</p>

<h4>示例</h4>

<pre><code>var d = dialog({
    onclose: function () {
        alert('对话框已经关闭');
    },
    ok: function () {}
});
d.show();
</code></pre>

<h3><span id="option-onbeforeremove">onbeforeremove</span></h3>

<p>对话框销毁之前事件。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>

<h4>类型</h4>

<p>Function</p>

<h3><span id="option-onremove">onremove</span></h3>

<p>对话框销毁事件。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>

<h4>类型</h4>

<p>Function</p>

<h4>示例</h4>

<pre><code>var d = dialog({
    onclose: function () {
        alert('对话框已经关闭');
    },
    onremove: function () {
        alert('对话框已经销毁');
    },
    ok: function () {}
});
d.show();
</code></pre>

<h3><span id="option-onfocus">onfocus</span></h3>

<p>对话框获取焦点事件。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>

<h4>类型</h4>

<p>Function</p>

<h3><span id="option-onblur">onblur</span></h3>

<p>对话框失去焦点事件。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>

<h4>类型</h4>

<p>Function</p>

<h3><span id="option-onreset">onreset</span></h3>

<p>对话框位置重置事件。</p>

<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>

<h4>类型</h4>

<p>Function</p>

<h3><span id="option-id">id</span></h3>

<p>设定对话框唯一标识。</p>

<ol>
<li>可防止重复 ID 对话框弹出。</li>
<li>支持使用<code>dialog.get(id)</code>获取某个对话框的接口。</li>
</ol>


<h4>类型</h4>

<p>String</p>

<h4>示例</h4>

<pre><code>dialog({
    id: 'id-demo',
    content: '再次点击运行看看'
}).show();
dialog.get('id-demo').title('8888888888');
</code></pre>

<h2><span id="property">属性</span></h2>

<h3><span id="property-open">open</span></h3>

<p>判断对话框是否被打开。</p>

<h3><span id="property-returnValue">returnValue</span></h3>

<p>对话框返回值。</p>

<h4>示例</h4>

<pre><code>var d = dialog({
    title: '消息',
    content: '&lt;input id="property-returnValue-demo" value="1" /&gt;',
    ok: function () {
        var value = $('#property-returnValue-demo').val();
        this.close(value);
        this.remove();
    }
});
d.addEventListener('close', function () {
    alert(this.returnValue);
});
d.show();
</code></pre>

<h2><span id="other">其他</span></h2>

<h3><span id="other-skin">自定义样式</span></h3>

<p>打开配置文件： src/dialog-config.js，其中<code>cssUir</code>字段是 css 文件的路径，<code>innerHTML</code>字段则是 artDialog 的模板。修改这两个字段即可很方便的设计属于自己的皮肤。</p>

<p>一套皮肤可以添加不同的<code>className</code>实现多种状态，可参考 <a href="#option-skin">skin</a> 选项。</p>

<h3><span id="other-grunt">源码构建</span></h3>

<p>使用 <a href="http://gruntjs.cn">GruntJS</a> 在 artDialog 源码根目录执行即可。</p>

<h3><span id="other-upgrade">artDialog v5 升级 v6 参考</span></h3>

<p><a href="https://github.com/aui/artDialog/wiki/artDialog-v5%E5%8D%87%E7%BA%A7v6%E5%8F%82%E8%80%83">https://github.com/aui/artDialog/wiki/artDialog-v5%E5%8D%87%E7%BA%A7v6%E5%8F%82%E8%80%83</a></p>

<h3><span id="other-support">支持</span></h3>

<p>artDialog 是基于 <a href="https://github.com/aui/artDialog/blob/master/LICENSE.md">LGPL</a> 协议免费开源的程序，问题反馈可在 <a href="https://github.com/aui/artDialog/issues?state=open">Github issues</a> 上进行（为了保证效率，请务必描述清楚你的问题，例如包含 artDialog 版本号、浏览器版本等必要信息，有 demo 甚佳。不合格问题将可能会被关闭）。</p>

<hr />

<p><a href="https://github.com/aui/artDialog/blob/master/LICENSE.md">artDialog 商业授权</a></p>

<script src="./js/jquery.js"></script>


<p><link rel="stylesheet" href="./css/ui-dialog.css" /></p>

<script src="./js/dialog-plus.js"></script>


<p><link rel="stylesheet" href="./css/doc.css" /></p>

<script src="./js/doc.js"></script>

</body>
</html>