以下是 对话框-artDialog5.0特效代码 的示例演示效果:
部分效果截图:
HTML代码(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>
<link id="artDialog-skin" href="skins/default.css" rel="stylesheet" />
<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™</strong><span id="artVersion"></span></h1>
<div class="summary" id="summary">
<p>artDialog 鏄竴涓璁″緱鍗佸垎宸у鐨勫璇濇缁勪欢锛屽皬宸ц韩鏉愬嵈鎷ユ湁涓板瘜鐨勬帴鍙ｄ笌婕備寒鐨勫瑙傘€?/p>
<ul>
<li>鑷€傚簲鍐呭</li>
<li>浼橀泤鐨勬帴鍙?/li>
<li>缁嗚嚧鐨勪綋楠?/li>
<li>璺ㄥ钩鍙板吋瀹?/li>
</ul>
<p><strong>椤圭洰涓婚〉</strong>: <a href="http://code.google.com/p/artdialog/">http://code.google.com/p/artdialog/</a></p>
<p id="skin-menu"><a id="showSkinDialog" class="button" href="javascript:;">鐨偆婕旂ず+</a> <span id="selectSkinValue">default</span></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"><link href="./skins/default.css" rel="stylesheet" />
<script src="./artDialog.min.js"></script></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('璇锋敞鎰廰rtDialog涓ょ鍚庡皢鍏抽棴锛?)
.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' 鍓嶇紑鏇挎崲鎴?'$'銆俲Query 鐗堟湰鏀寔 1.32 +">[浣跨敤jQuery?]</a></p>
<h3>鎵╁睍鎺ュ彛</h3>
<p>闄や簡涓婅堪涓ょ璋冪敤鏂瑰紡涔嬪锛宎rtDialog 杩樻彁渚涗竴浜涙帴鍙ｆ柟渚垮紓姝ユ搷浣滐紝姣斿瀹炵幇澶栭儴绋嬪簭鏇存柊瀵硅瘽妗嗗唴瀹广€佸叧闂獥鍙ｇ瓑銆傝繖鏄睘浜庨珮绾ф搷浣滐紝璇︽儏鍙傝 <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> (榛樿鍊? "<div class="d-loading"><span>loading..</span></div>") 璁剧疆娑堟伅鍐呭銆?br />
<br />
濡傛灉浼犲叆鐨勬槸 HTMLElement 绫诲瀷锛屽鏋滄槸闅愯棌鍏冪礌浼氱粰鍏惰缃甦isplay: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 鐨勪竴涓睘鎬э紝瀹冭兘鍥哄畾鍦ㄦ祻瑙堝櫒鏌愪釜鍦版柟锛屼篃涓嶅彈婊氬姩鏉℃嫋鍔ㄥ奖鍝嶃€侷E6 涓?閮ㄥ垎绉诲姩娴忚鍣ㄥ鍏舵敮鎸佷笉濂斤紝鍐呴儴浼氳浆鎴愮粷瀵瑰畾浣?/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 />
涓柇鐢ㄦ埛瀵硅瘽妗嗕箣澶栫殑浜や簰锛岀敤浜庢樉绀洪潪甯搁噸瑕佺殑鎿嶄綔/娑堟伅銆傚缓璁彧鍦ㄩ€傚悎鐨勬椂鍊欎娇鐢ㄥ畠銆傞伄缃╄繕鍙互璁剧疆棰滆壊涓庨€忔槑搴︼紝鍙傝锛?<a href="#options-background">background</a> 涓?<a href="#options-opacity">opacity</a> </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('纭畾鍏抽棴瀵硅瘽妗嗗悧');
}
}, function () {});</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銆乧onfirm銆乸rompt 鏂规硶銆傚彧闇€鍦?artDialog 涔嬪悗寮曠敤濡備笅鏂囦欢鍗冲彲锛?/p>
<pre class="sh_javascript">
<script src="./artDialog.plugins.min.js"></script></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" /><br />'
+ '瀵嗙爜锛?lt;input id="login-pw" type="text" value="****" />',
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">(鏈枃妗ｄ簬 2012-02-26 鏇存柊) <a id="print" href="#header">鎵撳嵃</a></p>
<p class="copyright">© 2009-2012 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"><!--[if gte IE 7]><!-->
<link href="./skins/aero.css" rel="stylesheet" />
<!--<![endif]-->
<!--[if lt IE 7]>
<link href="./skins/default.css" rel="stylesheet" />
<![endif]--></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();
$('#selectSkinValue')[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>JS代码(artDialog.plugins.js):
/*!* artDialog 5 plugins* Date:2012-03-16* http://code.google.com/p/artdialog/* (c) 2009-2012 TangBin,http://www.planeArt.cn** This is licensed under the GNU LGPL,version 2.1 or later.* For details,see:http://creativecommons.org/licenses/LGPL/2.1/*/
;
(function ($){
/** * 警告 * @param{
String,HTMLElement}
消息内容 * @param{
Function}
(可选) 回调函数 */
$.alert = $.dialog.alert = function (content,callback){
return $.dialog({
id:'Alert',fixed:true,lock:true,content:content,ok:true,beforeunload:callback}
);
}
;
/** * 确认选择 * @param{
String,HTMLElement}
消息内容 * @param{
Function}
确定按钮回调函数 * @param{
Function}
取消按钮回调函数 */
$.confirm = $.dialog.confirm = function (content,ok,cancel){
return $.dialog({
id:'Confirm',fixed:true,lock:true,content:content,ok:ok,cancel:cancel}
);
}
;
/** * 输入框 * @param{
String,HTMLElement}
消息内容 * @param{
Function}
确定按钮回调函数。函数第一个参数接收用户录入的数据 * @param{
String}
输入框默认文本 */
$.prompt = $.dialog.prompt = function (content,ok,defaultValue){
defaultValue = defaultValue || '';
var input;
return $.dialog({
id:'Prompt',fixed:true,lock:true,content:[ '<div style="margin-bottom:5px;
font-size:12px">',content,'</div>','<div>','<input type="text" class="d-input-text" value="',defaultValue,'" style="width:18em;
padding:6px 4px" />','</div>' ].join(''),initialize:function (){
input = this.dom.content.find('.d-input-text')[0];
input.select();
input.focus();
}
,ok:function (){
return ok && ok.call(this,input.value);
}
,cancel:function (){
}
}
);
}
;
/** 抖动效果 */
$.dialog.prototype.shake = (function (){
var fx = function (ontween,onend,duration){
var startTime = + new Date;
var timer = setInterval(function (){
var runTime = + new Date - startTime;
var pre = runTime / duration;
if (pre >= 1){
clearInterval(timer);
onend(pre);
}
else{
ontween(pre);
}
;
}
,13);
}
;
var animate = function (elem,distance,duration){
var quantity = arguments[3];
if (quantity === undefined){
quantity = 6;
duration = duration / quantity;
}
;
var style = elem.style;
var from = parseInt(style.marginLeft) || 0;
fx(function (pre){
elem.style.marginLeft = from + (distance - from) * pre + 'px';
}
,function (){
if (quantity !== 0){
animate( elem,quantity === 1 ? 0:(distance / quantity - distance) * 1.3,duration,-- quantity );
}
;
}
,duration);
}
;
return function (){
animate(this.dom.wrap[0],40,600);
return this;
}
;
}
)();
// 拖拽支持var DragEvent = function (){
var that = this,proxy = function (name){
var fn = that[name];
that[name] = function (){
return fn.apply(that,arguments);
}
;
}
;
proxy('start');
proxy('over');
proxy('end');
}
;
DragEvent.prototype ={
// 开始拖拽 // onstart:function (){
}
,start:function (event){
$(document) .bind('mousemove',this.over) .bind('mouseup',this.end);
this._sClientX = event.clientX;
this._sClientY = event.clientY;
this.onstart(event.clientX,event.clientY);
return false;
}
,// 正在拖拽 // onover:function (){
}
,over:function (event){
this._mClientX = event.clientX;
this._mClientY = event.clientY;
this.onover( event.clientX - this._sClientX,event.clientY - this._sClientY );
return false;
}
,// 结束拖拽 // onend:function (){
}
,end:function (event){
$(document) .unbind('mousemove',this.over) .unbind('mouseup',this.end);
this.onend(event.clientX,event.clientY);
return false;
}
}
;
var $window = $(window),$document = $(document),html = document.documentElement,isIE6 = !('minWidth' in html.style),isLosecapture = !isIE6 && 'onlosecapture' in html,isSetCapture = 'setCapture' in html,dragstart = function (){
return false}
;
var dragInit = function (event){
var dragEvent = new DragEvent,api = artDialog.focus,dom = api.dom,$wrap = dom.wrap,$title = dom.title,$main = dom.main,wrap = $wrap[0],title = $title[0],main = $main[0],wrapStyle = wrap.style,mainStyle = main.style;
var isResize = event.target === dom.se[0] ? true:false;
var isFixed = wrap.style.position === 'fixed',minX = isFixed ? 0:$document.scrollLeft(),minY = isFixed ? 0:$document.scrollTop(),maxX = $window.width() - wrap.offsetWidth + minX,maxY = $window.height() - wrap.offsetHeight + minY;
var startWidth,startHeight,startLeft,startTop;
// 对话框准备拖动 dragEvent.onstart = function (x,y){
if (isResize){
startWidth = main.offsetWidth;
startHeight = main.offsetHeight;
}
else{
startLeft = wrap.offsetLeft;
startTop = wrap.offsetTop;
}
;
$document.bind('dblclick',dragEvent.end) .bind('dragstart',dragstart);
if (isLosecapture){
$title.bind('losecapture',dragEvent.end)}
else{
$window.bind('blur',dragEvent.end)}
;
isSetCapture && title.setCapture();
$wrap.addClass('d-state-drag');
api.focus();
}
;
// 对话框拖动进行中 dragEvent.onover = function (x,y){
if (isResize){
var width = x + startWidth,height = y + startHeight;
wrapStyle.width = 'auto';
mainStyle.width = Math.max(0,width) + 'px';
wrapStyle.width = wrap.offsetWidth + 'px';
mainStyle.height = Math.max(0,height) + 'px';
}
else{
var left = Math.max(minX,Math.min(maxX,x + startLeft)),top = Math.max(minY,Math.min(maxY,y + startTop));
wrapStyle.left = left + 'px';
wrapStyle.top = top + 'px';
}
;
}
;
// 对话框拖动结束 dragEvent.onend = function (x,y){
$document.unbind('dblclick',dragEvent.end) .unbind('dragstart',dragstart);
if (isLosecapture){
$title.unbind('losecapture',dragEvent.end);
}
else{
$window.unbind('blur',dragEvent.end)}
;
isSetCapture && title.releaseCapture();
$wrap.removeClass('d-state-drag');
}
;
dragEvent.start(event);
}
;
// 代理 mousedown 事件触发对话框拖动$(document).bind('mousedown',function (event){
var api = artDialog.focus;
if (!api) return;
var target = event.target,config = api.config,dom = api.dom;
if (config.drag !== false && target === dom.title[0] || config.resize !== false && target === dom.se[0]){
dragInit(event);
// 防止firefox与chrome滚屏 return false;
}
;
}
);
}
(this.art || this.jQuery));
JS代码(artDialog.plugins.min.js):
(function(c){
c.alert=c.dialog.alert=function(b,a){
return c.dialog({
id:"Alert",fixed:!0,lock:!0,content:b,ok:!0,beforeunload:a}
)}
;
c.confirm=c.dialog.confirm=function(b,a,m){
return c.dialog({
id:"Confirm",fixed:!0,lock:!0,content:b,ok:a,cancel:m}
)}
;
c.prompt=c.dialog.prompt=function(b,a,m){
var d;
return c.dialog({
id:"Prompt",fixed:!0,lock:!0,content:['<div style="margin-bottom:5px;
font-size:12px">',b,'</div><div><input type="text" class="d-input-text" value="',m||"",'" style="width:18em;
padding:6px 4px" /></div>'].join(""),initialize:function(){
d=this.dom.content.find(".d-input-text")[0];
d.select();
d.focus()}
,ok:function(){
return a&&a.call(this,d.value)}
,cancel:function(){
}
}
)}
;
c.dialog.prototype.shake=function(){
var b=function(a,b,c){
var h=+new Date,e=setInterval(function(){
var f=(+new Date-h)/c;
1<=f?(clearInterval(e),b(f)):a(f)}
,13)}
,a=function(c,d,g,h){
var e=h;
void 0===e&&(e=6,g/=e);
var f=parseInt(c.style.marginLeft)||0;
b(function(a){
c.style.marginLeft=f+(d-f)*a+"px"}
,function(){
0!==e&&a(c,1===e?0:1.3*(d/e-d),g,--e)}
,g)}
;
return function(){
a(this.dom.wrap[0],40,600);
return this}
}
();
var o=function(){
var b=this,a=function(a){
var c=b[a];
b[a]=function(){
return c.apply(b,arguments)}
}
;
a("start");
a("over");
a("end")}
;
o.prototype={
start:function(b){
c(document).bind("mousemove",this.over).bind("mouseup",this.end);
this._sClientX=b.clientX;
this._sClientY=b.clientY;
this.onstart(b.clientX,b.clientY);
return!1}
,over:function(b){
this._mClientX=b.clientX;
this._mClientY=b.clientY;
this.onover(b.clientX-this._sClientX,b.clientY-this._sClientY);
return!1}
,end:function(b){
c(document).unbind("mousemove",this.over).unbind("mouseup",this.end);
this.onend(b.clientX,b.clientY);
return!1}
}
;
var j=c(window),k=c(document),i=document.documentElement,p=!!("minWidth"in i.style)&&"onlosecapture"in i,q="setCapture"in i,r=function(){
return!1}
,n=function(b){
var a=new o,c=artDialog.focus,d=c.dom,g=d.wrap,h=d.title,e=g[0],f=h[0],i=d.main[0],l=e.style,s=i.style,t=b.target===d.se[0]?!0:!1,u=(d="fixed"===e.style.position)?0:k.scrollLeft(),v=d?0:k.scrollTop(),n=j.width()-e.offsetWidth+u,A=j.height()-e.offsetHeight+v,w,x,y,z;
a.onstart=function(){
t?(w=i.offsetWidth,x=i.offsetHeight):(y=e.offsetLeft,z=e.offsetTop);
k.bind("dblclick",a.end).bind("dragstart",r);
p?h.bind("losecapture",a.end):j.bind("blur",a.end);
q&&f.setCapture();
g.addClass("d-state-drag");
c.focus()}
;
a.onover=function(a,b){
if(t){
var c=a+w,d=b+x;
l.width="auto";
s.width=Math.max(0,c)+"px";
l.width=e.offsetWidth+"px";
s.height=Math.max(0,d)+"px"}
else c=Math.max(u,Math.min(n,a+y)),d=Math.max(v,Math.min(A,b+z)),l.left=c+"px",l.top=d+"px"}
;
a.onend=function(){
k.unbind("dblclick",a.end).unbind("dragstart",r);
p?h.unbind("losecapture",a.end):j.unbind("blur",a.end);
q&&f.releaseCapture();
g.removeClass("d-state-drag")}
;
a.start(b)}
;
c(document).bind("mousedown",function(b){
var a=artDialog.focus;
if(a){
var c=b.target,d=a.config,a=a.dom;
if(!1!==d.drag&&c===a.title[0]||!1!==d.resize&&c===a.se[0])return n(b),!1}
}
)}
)(this.art||this.jQuery);
分享到QQ
分享到微博
微信扫一扫
