Skip to content

Commit

Permalink
更新文档
Browse files Browse the repository at this point in the history
  • Loading branch information
唐斌 committed Apr 18, 2013
1 parent ec058ee commit 1962ffa
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 78 deletions.
33 changes: 19 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# artDialog
=========
===========

优雅的web对话框控件
###### 优雅的web对话框控件

artDialog 是一个精心设计的对话框控件，它拥有精致的界面与易用的编程接口。

**演示与文档：**

http://aui.github.com/artDialog/
<http://aui.github.com/artDialog/>

## 概述

Expand All @@ -17,36 +17,36 @@ artDialog 是一个精心设计的 web 对话框控件，它继承与延伸了

#### 1. 自适应内容尺寸

对话框采用特殊UI结构，无论使用AJAX异步填充内容还是类似tabs等控件导致内容变化，对话框均可自动自适应内容尺寸。
> 对话框采用特殊UI结构，无论使用AJAX异步填充内容还是类似tabs等控件导致内容变化，对话框均可自动自适应内容尺寸。
#### 2. 智能文本对齐

如果设置了对话框宽度（包括用户通过调节把柄改变了尺寸），对话框中的文本会自动居中或者居左对齐，这些都是使用用CSS实现的。
> 如果设置了对话框宽度（包括用户通过调节把柄改变了尺寸），对话框中的文本会自动居中或者居左对齐，这些都是使用用CSS实现的。
#### 3. 黄金比例垂直居中

对话框默认会采用黄金比例垂直居中弹出，正如网页中重要的内容会被安排在垂直黄金区域一样，这样更舒适。
> 对话框默认会采用黄金比例垂直居中弹出，正如网页中重要的内容会被安排在垂直黄金区域一样，这样更舒适。
#### 4. 可定位到元素附近

宽屏笔记本用户已经逐渐成为主流，很多时候大幅度的移动鼠标操作也是一个麻烦的事情（尤其是使用触控板），artDialog支持设置在onclick事件触发源弹出，以让用户操作更加便捷。
> 宽屏笔记本用户已经逐渐成为主流，很多时候大幅度的移动鼠标操作也是一个麻烦的事情（尤其是使用触控板），artDialog支持设置在onclick事件触发源弹出，以让用户操作更加便捷。
#### 5. 支持键盘操作

* ESC键可关闭对话框。
> * ESC键可关闭对话框。
* 若有确定按钮，焦点默认停留在确定按钮上，否则停留在右上角关闭按钮上。
> * 若有确定按钮，焦点默认停留在确定按钮上，否则停留在右上角关闭按钮上。
* 对话框关闭后焦点将恢复至原来的元素。
> * 对话框关闭后焦点将恢复至原来的元素。
### 6. 支持信息无障碍(ARIA)

支持读屏器操作，让盲人能够平等的获取信息。
> 支持读屏器操作，让盲人能够平等的获取信息。

### 7. 友好的API

在保持小巧的程序体积之外，artDialog提供了丰富的可选配置与方法。它的API风格统一，简单易用，稍微阅读文档一个示例即可举一反三。
> 在保持小巧的程序体积之外，artDialog提供了丰富的可选配置与方法。它的API风格统一，简单易用，稍微阅读文档一个示例即可举一反三。
## 用户

Expand All @@ -58,6 +58,11 @@ artDialog 是一个精心设计的 web 对话框控件，它继承与延伸了

## 更新记录

### 5.0.4

1. 取消focus参数，对话框能自动处理
2. 取消鸡肋的esc参数

### 5.0.3

1. **支持信息无障碍（ARIA）**
Expand Down Expand Up @@ -100,7 +105,7 @@ artDialog 是一个精心设计的 web 对话框控件，它继承与延伸了
19. 取消对 ie6 提供 select 标签遮盖支持
20. 增加 focus 参数
21. 取消 position 方法
22. 取消对 <script type="text/dialog"></script> 的支持
22. 取消对 ``<script type="text/dialog"></script>`` 的支持
23. **取消对 iframe 的支持**
24. title 方法不支持空参数
25. content 方法不支持空参数
Expand All @@ -113,7 +118,7 @@ artDialog 是一个精心设计的 web 对话框控件，它继承与延伸了

[严谨的跨浏览器支持、对框架应用提供强大的api支持]

源码：http://code.google.com/p/artdialog/
源码：<http://code.google.com/p/artdialog/>

1. 修复刷新框架后脚本报错的问题
2. 修复异步加载 artDialog.js 导致锁屏无法使用的问题
Expand Down
46 changes: 8 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,8 +202,6 @@ <h4>高级</h4>
<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>
Expand Down Expand Up @@ -240,7 +238,9 @@ <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>
<p>如果使用jquery，引用jquery.artDialog.min.js即可，调用时请把 'art' 前缀替换成 '$'。</p>
<h3>调用方式</h3>
<p>artDialog 有两种调用方式，第一种是最简单的直接传入参数方式；第二种拥有更多的可选项，参见 <a href="#options">配置参数</a>。</p>
<ol>
<li>
<p><strong>art.dialog</strong>(<em>content</em>, <em>[ok]</em>, <em>[cancel]</em>)</p>
Expand All @@ -264,8 +264,7 @@ <h3>调用方式</h3>
</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>
Expand Down Expand Up @@ -676,38 +675,6 @@ <h3 id="options-time"><span class="change">time</span></h3>
<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">
Expand Down Expand Up @@ -1048,8 +1015,11 @@ <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;',
content: '帐号：&lt;input id="login-na" type="text" value="guest" /&gt;'
+ '&lt;br /&gt;密码：&lt;input id="login-pw" type="text" value="****" /&gt;',
initialize: function () {
document.getElementById('login-na').focus();
},
lock: true,
fixed: true,
ok: function () {
Expand Down
53 changes: 27 additions & 26 deletions source/artDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* artDialog 5.0.3
* Date: 2013-02-20
* artDialog 5.0.4
* Date: 2013-02-24
* https://github.com/aui/artDialog
* (c) 2009-2013 TangBin, http://www.planeArt.cn
*
Expand Down Expand Up @@ -615,7 +615,6 @@ var artDialog = function (config, ok, cancel) {
api.follow(elem)
};
api.zIndex().focus();
_activeElement = document.activeElement;
return api;
};

Expand Down Expand Up @@ -666,18 +665,16 @@ var artDialog = function (config, ok, cancel) {
_count ++;

return artDialog.list[config.id] = _singleton ?
_singleton.constructor(config) : new artDialog.fn.constructor(config);
_singleton._create(config) : new artDialog.fn._create(config);
};

artDialog.version = '5.0.3';
artDialog.version = '5.0.4';

artDialog.fn = artDialog.prototype = {

/** @inner */
constructor: function (config) {
var dom;

_activeElement = document.activeElement;
_create: function (config) {
var dom;

this.closed = false;
this.config = config;
Expand Down Expand Up @@ -1116,16 +1113,25 @@ artDialog.fn = artDialog.prototype = {
/** @inner 设置焦点 */
focus: function () {

if (this.config.focus) {
//setTimeout(function () {
var that = this,
isFocus = function () {
return that.dom.wrap[0].contains(document.activeElement);
};

if (!isFocus()) {
_activeElement = document.activeElement;
}

setTimeout(function () {
if (!isFocus()) {
try {
var elem = this._focus && this._focus[0] || this.dom.close[0];
elem && elem.focus();
var elem = that._focus || that.dom.close || taht.dom.wrap;
elem[0].focus();
// IE对不可见元素设置焦点会报错
} catch (e) {};
//}, 0);
};
}
}, 16);

return this;
},

Expand Down Expand Up @@ -1317,10 +1323,11 @@ artDialog.fn = artDialog.prototype = {

};

artDialog.fn.constructor.prototype = artDialog.fn;
artDialog.fn._create.prototype = artDialog.fn;



// 快捷方式绑定触发元素
$.fn.dialog = $.fn.artDialog = function () {
var config = arguments;
this[this.live ? 'live' : 'bind']('click', function () {
Expand Down Expand Up @@ -1360,7 +1367,7 @@ $(document).bind('keydown', function (event) {
api = artDialog.focus,
keyCode = event.keyCode;

if (!api || !api.config.esc || rinput.test(nodeName) && target.type !== 'button') {
if (!api || rinput.test(nodeName) && target.type !== 'button') {
return;
};

Expand Down Expand Up @@ -1495,15 +1502,9 @@ artDialog.defaults = {
// 皮肤名(多皮肤共存预留接口)
skin: null,

// 自动关闭时间
// 自动关闭时间(毫秒)
time: null,

// 是否支持Esc键关闭
esc: true,

// 是否支持对话框按钮自动聚焦
focus: true,


// 初始化后是否显示对话框
visible: true,

Expand Down

1 comment on commit 1962ffa

@code33
Copy link

@code33 code33 commented on 1962ffa Apr 21, 2013

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

请问如何获得弹出框在ajax加载后的html中标签成员呢?

Please sign in to comment.