artDialog v7 使用说明及API文档,artDialog ,artDialog具有bootstrap风格的弹窗组件<h1>artDialog具有bootstrap风格的弹窗组件</h1>
<img alt="artdialog1" class="img-thumbnail" src="/assist/images/blog/859e118e483b47189690b6836e9d8416.png" /><br />
<img alt="artdialog2" class="img-thumbnail" src="/assist/images/blog/02fcbce67bc649a2b475ede25c9a3fb6.png" /><br />
<img alt="artdialog3" class="img-thumbnail" src="/assist/images/blog/c31c53851106483f908c0eb7394f4eab.png" /><br />
<img alt="artdialog4" class="img-thumbnail" src="/assist/images/blog/1875d350bcf54980b6206de142705dec.png" /><br />
<img alt="artdialog5" class="img-thumbnail" src="/assist/images/blog/b16cadd97d0448b79ac83ee18ac45630.png" /><br />
<img alt="artdialog6" class="img-thumbnail" src="/assist/images/blog/c267c1d7647340b7851a79c9514ff708.png" /><br />
<p>首页 > 文档与示例</p>
<p>artDialog —— 经典、优雅的网页对话框控件。</p>
<ol>
<li>支持普通与 12 方向气泡状对话框</li>
<li>完善的焦点处理，自动焦点附加与回退</li>
<li>支持 ARIA 标准</li>
<li>面向未来：基于 HTML5 Dialog 的 API</li>
<li>支持标准与模态对话框</li>
<li>丰富且友好的编程接口</li>
<li>能自适应内容尺寸</li>
</ol>
<h2>引入 artDialog</h2>
<h3>1.直接引用</h3>
<pre>
<code class="language-javascript"><script src="lib/jquery-1.10.2.js"></script>
<script src="dist/dialog.js"></script></code></pre>
<h3>2.作为 Webpack、RequireJS 或 SeaJS 的模块引入</h3>
<p>使用 Npm 安装 <code>art-dialog</code></p>
<pre>
<code>npm install --save-dev art-dialog
</code></pre>
<pre>
<code>var dialog = require('art-dialog');</code></pre>
<p>**注意：**内部依赖全局模块<code>require('jquery')</code>，请注意全局模块配置是否正确</p>
<ul>
<li>如果需要支持 iframe 内容与拖拽，请引用加强版 dialog-plus.js</li>
<li>jquery 最低要求版本为<code>1.7+</code></li>
</ul>
<h2>快速参考</h2>
<h3>普通对话框</h3>
<pre>
<code class="language-javascript">var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！'
});
d.show();
</code></pre>
运行
<h3>模态对话框</h3>
<pre>
<code class="language-javascript">var d = dialog({
title: 'message',
content: '<input autofocus />'
});
d.showModal();
</code></pre>
运行
<h3>气泡浮层</h3>
<pre>
<code class="language-javascript">var d = dialog({
content: 'Hello World!',
quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById('quickref-bubble'));
</code></pre>
运行
<p>12 个方向定位演示</p>
<h3>添加按钮</h3>
<p>1.确定与取消按钮：</p>
<pre>
<code class="language-javascript">var d = dialog({
title: '提示',
content: '按钮回调函数返回 false 则不许关闭',
okValue: '确定',
ok: function () {
this.title('提交中…');
return false;
},
cancelValue: '取消',
cancel: function () {}
});
d.show();
</code></pre>
运行
<p>2.指定更多按钮：</p>
<p>请参考 <code>button</code> 方法或参数。</p>
<h3>控制对话框关闭</h3>
<pre>
<code class="language-javascript">var d = dialog({
content: '对话框将在两秒内关闭'
});
d.show();
setTimeout(function () {
d.close().remove();
}, 2000);
</code></pre>
运行
<h3>给对话框左下角添加复选框</h3>
<pre>
<code class="language-javascript">var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！',
ok: function () {},
statusbar: '<label><input type="checkbox">不再提醒</label>'
});
d.show();
</code></pre>
运行
<h3>点按钮不关闭对话框</h3>
<p>按钮事件返回 false 则不会触发关闭。</p>
<pre>
<code class="language-javascript">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>不显示关闭按钮</h3>
<pre>
<code class="language-javascript">var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！',
cancel: false,
ok: function () {}
});
d.show();
</code></pre>
运行
<h3>创建 iframe 内容</h3>
<p>artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面，可以在顶层页面创建一个可供 iframe 访问的对话框创建方法，例如：</p>
<pre>
<code class="language-javascript">require(['art-dialog/dist/dialog-plus'], function (dialog) {
window.dialog = dialog;
});</code></pre>
<p>然后子页面就可以通过<code>top.dialog</code>控制对话框了。</p>
<p>打开示例页面</p>
<p>小提示：增强版的选项比标准版多了<code>url</code>、<code>oniframeload</code>这几个字段。</p>
<h2>方法</h2>
<p>若无特别说明，方法均支持链式调用。</p>
<h3>show([anchor])</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 class="language-javascript">var d = dialog();
d.content('hello world');
d.show(document.getElementById('api-show'));
</code></pre>
运行
<pre>
<code class="language-javascript">var d = dialog({
id: 'api-show-dialog',
quickClose: true,
content: '右键菜单'
});
$(document).on('contextmenu', function (event) {
d.show(event);
return d.destroyed;
});
</code></pre>
运行
<h3>showModal([anchor])</h3>
<p>显示一个模态对话框。</p>
<p>其余特性与参数可参见<code>show([anchor])</code>方法。</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">var d = dialog({
title: 'message',
content: '<input autofocus />'
});
d.showModal();
</code></pre>
运行
<h3>close([result])</h3>
<p>关闭（隐藏）对话框。</p>
<p>可接收一个返回值，可以参见 returnValue。</p>
<p><strong>注意</strong>：<code>close()</code>方法只隐藏对话框，不会在 DOM 中删除，删除请使用<code>remove()</code>方法。</p>
<h3>remove()</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 class="language-javascript">var d = dialog();
// [..]
d.close().remove();
</code></pre>
运行
<h3>content(html)</h3>
<p>写入对话框内容。</p>
<p><code>html</code>参数支持<code>String</code>、<code>HTMLElement</code>类型。</p>
<h4>示例</h4>
<p>传入字符串：</p>
<pre>
<code class="language-javascript">var d = dialog();
d.content('hello world');
d.show();
</code></pre>
运行
<p>传入元素节点：</p>
<pre>
<code class="language-javascript">var elem = document.getElementById('test');
dialog({
content: elem,
id: 'EF893L'
}).show();
</code></pre>
<p>v6.0.4 更新：隐藏元素将会自动显示，并且对话框卸载的时候会放回到<code>body</code>中</p>
<h3>title(text)</h3>
<p> </p>
<p>写入对话框标题。</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">var d = dialog();
d.title('hello world');
d.show();
</code></pre>
运行
<h3>width(value)</h3>
<p>设置对话框宽度。</p>
<h3>示例</h3>
<pre>
<code class="language-javascript">dialog({
content: 'hello world'
})
.width(320)
.show();
</code></pre>
运行
<h3>height(value)</h3>
<p> </p>
<p>设置对话框高度。</p>
<h3>示例</h3>
<pre>
<code class="language-javascript">dialog({
content: 'hello world'
})
.height(320)
.show();
</code></pre>
运行
<h3>reset()</h3>
<p> </p>
<p>手动刷新对话框位置。</p>
<p>通常动态改变了内容尺寸后需要刷新对话框位置。</p>
<h3>button(args)</h3>
<p> </p>
<p>自定义按钮。</p>
<p>参数请参考 选项<code>button</code>；同时支持传入 HTML 字符串填充按钮区域。</p>
<h3>focus()</h3>
<p> </p>
<p>聚焦对话框（置顶）。</p>
<h3>blur()</h3>
<p> </p>
<p>让对话框失去焦点。</p>
<h3>addEventListener(type, callback)</h3>
<p> </p>
<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>removeEventListener(type, callback)</h3>
<p> </p>
<p>删除事件。</p>
<h3>dialog.get(id)</h3>
<p> </p>
<p>根据获取打开的对话框实例。</p>
<p><strong>注意</strong>：这是一个静态方法。</p>
<h3>dialog.getCurrent()</h3>
<p> </p>
<p>获取当前（置顶）对话框实例。</p>
<p><strong>注意</strong>：这是一个静态方法。</p>
<h2>配置参数</h2>
<p> </p>
<h3>content</h3>
<p> </p>
<p>设置消息内容。</p>
<h4>类型</h4>
<p>String, HTMLElement</p>
<h4>示例</h4>
<p>传入字符串：</p>
<pre>
<code class="language-javascript">dialog({
content: 'hello world!'
}).show();
</code></pre>
运行
<p>传入元素节点：</p>
<pre>
<code class="language-javascript">var elem = document.getElementById('test');
dialog({
content: elem,
id: 'EF893L'
}).show();
</code></pre>
<h3>title</h3>
<p> </p>
<p>标题内容。</p>
<h4>类型</h4>
<p>String</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
title: 'hello world!'
}).show();
</code></pre>
运行
<h3>statusbar</h3>
<p> </p>
<p>状态栏区域 HTML 代码。</p>
<p>可以实现类似“不再提示”的复选框。<strong>注意</strong>：必须有按钮才会显示。</p>
<h4>类型</h4>
<p>String</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！',
ok: function () {},
statusbar: '<label><input type="checkbox">不再提醒</label>'
});
d.show();
</code></pre>
运行
<h3>ok</h3>
<p> </p>
<p>确定按钮。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭。</p>
<h4>类型</h4>
<p>Function</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
ok: function () {
this
.title('消息')
.content('hello world!')
.width(130);
return false;
}
}).show();
</code></pre>
运行
<h3>okValue</h3>
<p> </p>
<p>(默认值: <code>"ok"</code>) 确定按钮文本。</p>
<h4>类型</h4>
<p>String</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
okValue: '猛击我',
ok: function () {
this.content('hello world!');
return false;
}
}).show();
</code></pre>
运行
<h3>cancel</h3>
<p> </p>
<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 class="language-javascript">dialog({
title: '消息',
ok: function () {},
cancel: function () {
alert('取消');
}
}).show();
</code></pre>
运行
<pre>
<code class="language-javascript">dialog({
title: '消息',
content: '不显示关闭按钮',
ok: function () {},
cancel: false
}).show();
</code></pre>
运行
<h3>cancelValue</h3>
<p> </p>
<p>(默认值: <code>"cancel"</code>) 取消按钮文本。</p>
<h4>类型</h4>
<p>String</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
cancelValue: '取消我',
cancel: function () {
alert('关闭');
}
}).show();
</code></pre>
运行
<h3>cancelDisplay</h3>
<p> </p>
<p>(默认值: <code>true</code>) 是否显示取消按钮。</p>
<h4>类型</h4>
<p>Boolean</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
title: '提示',
content: '这是一个禁止关闭的对话框，并且没有取消按钮',
cancel: function () {
alert('禁止关闭');
return false;
},
cancelDisplay: false
}).show();
</code></pre>
运行
<h3>button</h3>
<p> </p>
<p>自定义按钮组。</p>
<h4>类型</h4>
<p>Array</p>
<h4>选项</h4>
<table class="table table-bordered table-hover">
<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 class="language-javascript">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>width</h3>
<p> </p>
<p>设置对话框 <strong>内容</strong> 宽度。</p>
<h4>类型</h4>
<p>String, Number</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
width: 460
}).show();
</code></pre>
运行
<pre>
<code class="language-javascript">dialog({
width: '20em'
}).show();
</code></pre>
运行
<h3>height</h3>
<p> </p>
<p>设置对话框 <strong>内容</strong> 高度。</p>
<h4>类型</h4>
<p>String, Number</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
height: 460
}).show();
</code></pre>
运行
<pre>
<code class="language-javascript">dialog({
height: '20em'
}).show();
</code></pre>
运行
<h3>skin</h3>
<p> </p>
<p>设置对话框额外的<code>className</code>参数。</p>
<p>多个<code>className</code>请使用空格隔开。</p>
<h4>类型</h4>
<p>String</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
skin: 'min-dialog tips'
}).show();
</code></pre>
<h3>padding</h3>
<p> </p>
<p>(默认值: <em>继承 css 文件设置</em>) 设置消息内容与消息容器的填充边距，即 style <code>padding</code>属性</p>
<h4>类型</h4>
<p>String</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
content: 'hello world',
padding: 0
}).show();
</code></pre>
运行
<h3>fixed</h3>
<p> </p>
<p>(默认值: <code>false</code>) 开启固定定位。</p>
<p>固定定位是 css2.1 <code>position</code>的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位。</p>
<h4>类型</h4>
<p>Boolean</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
fixed: true,
title: '消息',
content: '请拖动滚动条查看'
}).show();
</code></pre>
运行
<h3>align</h3>
<p> </p>
<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 class="language-javascript">var d = dialog({
align: 'left',
content: 'Hello World!',
quickClose: true
});
d.show(document.getElementById('option-align'));
</code></pre>
运行
<p>12 个方向定位演示</p>
<h3>autofocus</h3>
<p> </p>
<p>(默认值: <code>true</code>) 是否支持自动聚焦。</p>
<h4>类型</h4>
<p>Boolean</p>
<h3>quickClose</h3>
<p> </p>
<p>(默认值: false) 是否点击空白出快速关闭。</p>
<h4>类型</h4>
<p>Boolean</p>
<h3>示例</h3>
<pre>
<code class="language-javascript">var d = dialog({
content: '点击空白处快速关闭',
quickClose: true
});
d.show(document.getElementById('option-quickClose'));
</code></pre>
运行
<h3>zIndex</h3>
<p> </p>
<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 class="language-javascript">dialog({
zIndex: 87
}).show();
</code></pre>
运行
<h3>onshow</h3>
<p> </p>
<p>对话框打开的事件。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>
<h4>类型</h4>
<p>Function</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">var d = dialog({
content: 'loading..',
onshow: function () {
this.content('dialog ready');
}
});
d.show();
</code></pre>
运行
<h3>onclose</h3>
<p> </p>
<p>对话框关闭后执行的事件。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>
<h4>类型</h4>
<p>Function</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">var d = dialog({
onclose: function () {
alert('对话框已经关闭');
},
ok: function () {}
});
d.show();
</code></pre>
运行
<h3>onbeforeremove</h3>
<p> </p>
<p>对话框销毁之前事件。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>
<h4>类型</h4>
<p>Function</p>
<h3>onremove</h3>
<p> </p>
<p>对话框销毁事件。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>
<h4>类型</h4>
<p>Function</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">var d = dialog({
onclose: function () {
alert('对话框已经关闭');
},
onremove: function () {
alert('对话框已经销毁');
},
ok: function () {}
});
d.show();
</code></pre>
运行
<h3>onfocus</h3>
<p> </p>
<p>对话框获取焦点事件。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>
<h4>类型</h4>
<p>Function</p>
<h3>onblur</h3>
<p> </p>
<p>对话框失去焦点事件。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>
<h4>类型</h4>
<p>Function</p>
<h3>onreset</h3>
<p> </p>
<p>对话框位置重置事件。</p>
<p>回调函数<code>this</code>指向<code>dialog</code>对象。</p>
<h4>类型</h4>
<p>Function</p>
<h3>id</h3>
<p> </p>
<p>设定对话框唯一标识。</p>
<ol>
<li>可防止重复 ID 对话框弹出。</li>
<li>支持使用<code>dialog.get(id)</code>获取某个对话框的接口。</li>
</ol>
<h4>类型</h4>
<p>String</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">dialog({
id: 'id-demo',
content: '再次点击运行看看'
}).show();
dialog.get('id-demo').title('8888888888');
</code></pre>
运行
<h2>属性</h2>
<h3>open</h3>
<p>判断对话框是否被打开。</p>
<h3>returnValue</h3>
<p>对话框返回值。</p>
<h4>示例</h4>
<pre>
<code class="language-javascript">var d = dialog({
title: '消息',
content: '<input id="property-returnValue-demo" value="1" />',
ok: function () {
var value = $('#property-returnValue-demo').val();
this.close(value);
this.remove();
}
});
d.addEventListener('close', function () {
alert(this.returnValue);
});
d.show();
</code></pre>
运行