以下是 对话框-boxy特效代码 的示例演示效果:
部分效果截图:
HTML代码(jQuery-plugin-boxy.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery boxy寮瑰嚭灞傚璇濇鎻掍欢涓枃婕旂ず鍙婅瑙? />
<meta name="description" content="寮犻懌鏃瓀eb鍓嶇瀛︿範涔媕query" />
<meta name="keywords" content="寮犻懌鏃?閼┖闂?閼敓娲?鍗氬,web鍓嶇,css,demo椤甸潰,瀛︿範,jQuery,鎻掍欢" />
<meta name="author" content="寮犻懌鏃?zhangxixnu" />
<title>jQuery boxy寮瑰嚭灞傚璇濇鎻掍欢涓枃婕旂ず鍙婅瑙?/title>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<link rel="stylesheet" href="../css/boxy.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.boxy.js"></script>
<script type="text/javascript">
$(function(){
$(".boxy").boxy();
});
</script>
<style type="text/css">
.zxx_test_list p{padding:7px 0 3px; font-size:0.95em;}
.zxx_test_list p strong,.f8{font-size:0.9em;}
.zxx_ul_circle{padding-left:20px; padding-bottom:10px;}
.zxx_ul_circle li{list-style-type:disc; list-style-position:outside; padding-top:5px; font-size:0.9em;}
#form{display:inline; margin:0 0 0 20px; padding:0;}
.zxx_ul_table{display:inline-block; *display:inline; border:1px solid #828da1; margin-top:-1px; font-size:0.9em; overflow:hidden; zoom:1;}
.zxx_ul_table li{padding:2px 5px 2px 10px; float:left;}
.zxx_ul_table.title li{background:#CBE0FF;}
.zxx_ul_table .w1{width:90px;}
.zxx_ul_table .w2{width:250px; border-left:1px solid #828da1; border-right:1px solid #828da1;}
.zxx_ul_table .w3{width:120px;}
.font{font-style:italic;}
.zxx_left_menu{position:fixed!important; position:absolute; left:3px; top:80px; width:13%; padding:10px 6px; background:white; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc;}
.zxx_left_menu li{border-bottom:1px dashed #cccccc; font-size:12.9px;}
.zxx_left_menu li a{display:block; padding:6px 0 4px 5px; text-decoration:none;}
.zxx_left_menu li a:hover{background:#eeeeee; color:#34538b;}
</style>
</head>
<body>
<ul class="zxx_left_menu">
<li><strong class="ml5 dib mb5">椤甸潰瀵艰埅</strong></li>
<li><a href="#to_link1">浣跨敤璇Query鎻掍欢</a></li>
<li><a href="#to_link2">鎵嬪姩鍒涘缓瀹炰緥</a></li>
<li><a href="#to_link3">API(搴旂敤缂栫▼鎺ュ彛) </a></li>
<li><a href="#to_link4">瀹屾暣鐨勬瀯閫犲嚱鏁伴€夐」鍒楄〃 </a></li>
<li><a href="#to_link5">CSS閫夋嫨鍣?</a></li>
<li class="mt20"><a href="jQuery-plugin-boxy-test.html">娴嬭瘯椤甸潰(鍙﹀椤甸潰)</a></li>
</ul>
<div class="zxx_out_box">
<div class="zxx_in_box">
<div class="zxx_header">
<a href="http://www.zhangxinxu.com/">
<img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" />
</a>
<span class="zxx_author_time">by zhangxinxu 2009-11-01 20:27</span>
</div>
<h3 class="zxx_title">jQuery boxy寮瑰嚭灞傛彃浠朵腑鏂囨紨绀哄強璁茶В</h3>
<div class="zxx_main_con">
<div class="zxx_test_list">
<p class="tr mr20"><a href="jQuery-plugin-boxy-test.html">娴嬭瘯椤甸潰 禄</a></p>
<strong id="to_link1">浣跨敤璇Query鎻掍欢</strong>
<p>瑕佹兂浣跨敤璇Query鎻掍欢锛岄渶瑕佹妸$(selector).boxy();鏀惧湪document.ready涓€備娇鐢ㄥ悎閫傜殑閫夋嫨鍣ㄨ〃杈惧紡鏇挎崲杩欓噷鐨?selector"锛屼緥濡傦細"a[rel=boxy],form.with-confirmation"銆傝繖浼氱粰鍖归厤鐨勫厓绱犻檮鍔犱竴浜涜涓猴紝濡備笅锛?/p>
<ul class="zxx_ul_circle dot">
<li>涓€涓猦ref灞炴€т腑濡傛灉閿氱偣鍖呭惈#锛屽垯姝ら敋鐐圭浉瀵瑰簲鐨処D鐨凞OM鍏冪礌鐨勫唴瀹瑰氨浼氳娣诲姞鍒癰oxy瀵硅瘽妗嗕腑銆?/li>
<li>濡傛灉href閿氱偣鍐呭涓哄叾浠栦竴浜涗笢瑗匡紝鍒欎細璇曞浘浣跨敤Ajax杞藉叆鍏跺搴旂殑鍐呭銆傜悊鎯虫儏鍐典笅锛屾垜浠湁鐩稿悓鐨勮捣婧愭鏌ュ拰濮旀墭瀵规鏋剁殑璺ㄥ煙璇锋眰銆傝繖灏嗕細鍦ㄤ笅闈㈠睍绀恒€?/li>
<li>琛ㄥ崟涓婁細鏄剧ず涓€涓彁浜ゆā寮忕殑纭娑堟伅銆?/li>
<li>鍏朵粬鐨勫厓绱犲皢浼氳蹇界暐</li>
</ul>
<p><strong>璇曡瘯涓嬮潰鐨勬紨绀猴細</strong></p>
<p>1.<a href="#foobar" title="灞曠幇href閿氱偣瀵瑰簲ID鍐呭" class="boxy">閿氱偣#瀵瑰簲ID鐨勫唴瀹?div#foobar)</a></p>
<div id="foobar" style="padding:15px; display:none; background-color:#cad5eb; font-size:2em; color:#000000; font-weight:bold;">杩欐槸涓€娈礗D涓篺oobar鐨刣iv鏍囩鍐呯殑鏂囧瓧</div>
<div class="mt10 f8">瀵瑰簲鐨処D涓篺obar鐨刣iv鍐呭涓猴細</div>
<div class="zxx_code">
<xmp><div id="foobar" style="padding:15px; display:none; background-color:#cad5eb; font-size:2em; color:#000000; font-weight:bold;">杩欐槸涓€娈礗D涓篺oobar鐨刣iv鏍囩鍐呯殑鏂囧瓧</div></xmp>
</div>
<p>2.<a href="test.html" title="鍔犺浇椤甸潰" class="boxy">杩滅▼鍐呭(鍔犺浇鍚屾枃浠跺す涓嬬殑test.html)</a></p>
<div class="mt10 f8">test.html椤甸潰鍐呭叏閮ㄥ唴瀹逛负锛?/div>
<div class="zxx_code">
<xmp><div style="padding:15px; font:2em bold Verdana, Geneva, sans-serif">杩欐槸鍚嶄负test鐨刪tml椤甸潰涓璬iv鍐呯殑鏂囧瓧鍐呭</div></xmp>
</div>
<p>3.浠ョ‘璁ゆ鏂瑰紡鎻愪氦<form method="post" action="" id="form" class="boxy"><input type="submit" name="娴嬭瘯" value="纭妗嗘彁浜? /></form></p>
<div class="mt20 f8">form琛ㄥ崟鍏ㄩ儴鍐呭锛?/div>
<div class="zxx_code">
<xmp><form method="post" action="" id="form" class="boxy"><input type="submit" name="娴嬭瘯" value="纭妗嗘彁浜? /></form></xmp>
</div>
<div class="dot"> </div>
<p><strong>鍩烘湰鐨勬彃浠剁敤娉?/strong></p>
<div class="zxx_code">
<xmp><script type="text/javascript">
$(function(){
$(".boxy").boxy();
});
</script></xmp>
</div>
<p>璇锋敞鎰忥紝boxy瀵硅瘽妗嗚嚜鍔ㄨ绠楀嚭鎮ㄧ殑鍐呭鍖哄煙鍐呮湰韬殑澶у皬鍜屼綅缃紝娌℃湁蹇呰鏄庣‘瑙勫畾浜嗗寘瑁呴泦鐨勫昂瀵搞€?/p>
<p>姝ゆ彃浠舵柟娉曠悊瑙ｅ崟涓€閫夐」锛屽叾浠栦换浣曢€夐」琚紶閫掔粰浜哹oxy鐨勬瀯閫犲嚱鏁帮紙<a href="#options">鍙傝涓嬮潰鐨勬瀯閫犲嚱鏁伴€夐」</a>锛夛紝鎴栨槸鐢ㄤ簬Ajax鎿嶄綔锛孊oxy.load 銆?/p>
<ul class="zxx_ul_table title">
<li class="w1"><strong>閫夐」</strong></li><li class="w2"><strong>鎻忚堪</strong></li><li class="w3"><strong>榛樿</strong></li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">message</li><li class="w2">鏄剧ず鍦ㄥ璇濇涓婄殑鏂囧瓧淇℃伅</li><li class="w3">璇风‘璁わ細</li>
</ul>
<p>姝ゅ锛屾瘡涓尮閰嶉敋title灞炴€у皢琚敤鏉ヤ綔涓哄叾鐩稿簲鐨勫璇濇鐨勬爣棰樸€?/p>
</div>
<div class="zxx_test_list">
<strong id="to_link2">鎵嬪姩鍒涘缓瀹炰緥</strong>
<p>鐢ㄦ墜鍔ㄦā寮忎娇鐢╞oxy鏄緢瀹规槗鐨勨€斺€斿彧闇€瑕佸垱寤轰竴涓猙oxy鐨勬柊瀹炰緥锛屼紶閫掍竴浜涘唴閮ㄧ殑鍐呭鍜屼换浣曢檮鍔犵殑鏁ｅ垪瀵硅薄銆傚湪榛樿鎯呭喌涓嬶紝瀵硅瘽妗嗕細绔嬪嵆鏄剧ず鍑烘潵锛屽湪瑙嗚鐨勪腑蹇冿紝鍙嫋鎷姐€傛墍鏈夌殑杩欎簺璁剧疆閮藉彲浠ラ€氳繃缁欐瀯閫犲嚱鏁颁紶閫掗檮鍔犵殑瀵硅薄鏉ヨ繘琛岃鐩栤€斺€旀洿澶氳鎯呰鍙傝涓嬮潰鐨?a href="#options">鏋勯€犲嚱鏁伴€夐」</a></p>
<p>浼犻€掔粰鏋勯€犲嚱鏁扮殑鍐呭鍙互鏄换浣曟湁鏁堢殑鍙傛暟锛宩Query鐨?()鍑芥暟- DOM鍏冪礌锛屾槸HTML鐗囨柇鎴栧叾浠杍Query瀵硅薄銆傛棤璁烘彁渚涚殑鏄粈涔堬紝鍏禿isplay灞炴€у潎琚缃负block锛屽苟鎻掑叆鍚嶄负<span class="font">boxy-content</span>鐨刢lass鍦ㄥ璇濇涓€?/p>
<p><strong>涓嬮潰涓轰竴浜涗唬琛ㄦ€х殑绀轰緥锛?/strong></p>
<ul class="zxx_ul_circle">
<li>鍒涘缓涓€涓柊鐨勫璇濇锛?a href="#nogo" onclick="return create();">new Boxy("<p>鍐呭鈥︹€?lt;/p>", {title: "瀵硅瘽妗?});</a>銆?/li>
<li>鍒涘缓涓€涓柊瀵硅瘽妗嗭紝鏃犳硶鎷栨嫿銆?a href="#nogo" onclick="return create({draggable:false});">new Boxy("<p>鍐呭鈥︹€?lt;/p>", {title: "瀵硅瘽妗?, draggable: false});</a>銆?/li>
<li>鍒涘缓涓€涓柊鐨勫璇濇锛屾病鏈夐粯璁ょ殑鍏抽棴鎸夐挳銆?a href="#nogo" onclick="return create({closeable:false});">new Boxy("<p>鍐呭鈥︹€?lt;/p>", {title: "瀵硅瘽妗?, closeable:false});</a>銆?/li>
<li>鏂板缓瀵硅瘽妗嗭紝浣跨敤absolute缁濆瀹氫綅锛堣窡闅忔粴鍔ㄦ潯锛?a href="#nogo" onclick="return create({fixed:false});">new Boxy("<p>鍐呭鈥︹€?lt;/p>", {title: "瀵硅瘽妗? fixed:false"});</a>銆?/li>
<li>鏂板缓瀵硅瘽妗嗭紝妯℃€佺殑<a href="#nogo" onclick="return create({modal:true});">new Boxy("<p>鍐呭鈥︹€?lt;/p>", {title: "瀵硅瘽妗? modal:true"});</a>銆?/li>
<li>鏂板缓瀵硅瘽妗嗭紝鑷畾涔夎涓?a href="#nogo" onclick="return create({behaviours: function(r) { $(r).hover(function() { $(this).css('background-color', 'pink'); }, function() { $(this).css('background-color', 'white'); }); }});">new Boxy("<p>鍐呭鈥︹€?lt;/p>", {behaviours: function(r) { $(r).hover(function() { $(this).css("background-color", "red"); }, function() { $(this).css("background-color", "white"); }); }});</a>銆?/li>
</ul>
<p><strong>淇敼鐜版湁鐨勫璇?/strong><span class="f9 g6">锛堝厛鎵撳紑涓€涓璇濇锛岀劧鍚庡啀鍗曞嚮涓嬮潰鐨勯摼鎺ヤ簨浠讹級</span></p>
<ul class="zxx_ul_circle">
<li>璁╂渶鏂扮殑瀵硅瘽妗嗘斁澶х殑鍔ㄧ敾 - <a href="#nogo" onclick="tweenUp(); return false;">someDialog.tween(400, 400);</a></li>
<li>璁╂渶鏂扮殑瀵硅瘽妗嗗噺灏忕殑鍔ㄧ敾 - <a href="#nogo" onclick="tweenDown(); return false;">someDialog.tween(100, 100);</a></li>
<li>鑾峰彇鏈€鏂扮殑瀵硅瘽妗嗙殑鏍囬 - <a href="#nogo" onclick="getTitle(); return false;">someDialog.getTitle();</a>銆?/li>
<li>鏇存敼鏈€鏂扮殑瀵硅瘽妗嗙殑鏍囬 - <a href="#nogo" onclick="setTitle(); return false;">someDialog.setTitle("鏂版爣棰?);</a></li>
</ul>
<script type="text/javascript">
var allDialogs = [];
var seq = 0;
function create(options) {
options = $.extend({title: "瀵硅瘽妗?}, options || {});
var dialog = new Boxy("<div><p>杩欐槸绗?" + (++seq) + "涓璇濇 <a href='#nogo' onclick='Boxy.get(this).hide(); return false'>鍗曞嚮鎴戯紒</a></p></div>", options);
allDialogs.push(dialog);
return false;
}
function recent() { return allDialogs[allDialogs.length-1]; }
function tweenUp() { recent().tween(400,400); }
function tweenDown() { recent().tween(100,100); }
function getTitle() { alert(recent().getTitle()); }
function setTitle() { recent().setTitle(prompt("Enter new title:")); }
</script>
<p>璇锋敞鎰忥紝鏍囬鏍忥紙涔熷氨鏄叧闂寜閽拰鎷栧姩鍣級鍙湁鍦ㄦ爣棰樻寚瀹氱殑鎯呭喌涓嬩細鍑虹幇锛屽湪鏈潵锛岃繖绉嶈涓哄彲鑳戒細鍙戠敓鍙樺寲锛屼娇鏍囬鏍忓缁堝瓨鍦紝闄ら潪鐗瑰埆绂佺敤銆?/p>
<p>涓€鏃︽偍鍒涘缓浜嗕竴涓疄渚嬶紝鎮ㄥ彲浠ュ皢閫氳繃鎻愪緵鐨凙PI鍒嗛厤缁欎竴涓彉閲忥紝闅忓悗绉诲姩锛屾敼鍙樺ぇ灏忥紝鏄剧ず鍜岄殣钘?- 璁板綍濡備笅銆?/p>
<p><strong>鎻愰棶</strong></p>
<p>浣跨敤Boxy.ask()锛孊oxy.alert()鍜孊oxy.confirm()杩欎簺甯墜鍙兘鎻愮ず鐢ㄦ埛浠庝竴浜涢€夐」涓繘琛岄€夋嫨浠ュ強瀹屾垚鍙€夌殑鍥炶皟鍑芥暟銆傜偣鍑讳笅闈㈠惈鏈夋紨绀虹殑閾炬帴锛屽弬鑰傾PI鏂囨。鑾峰彇鏇村淇℃伅銆?/p>
<ul class="zxx_ul_circle">
<li>鎻愰棶 - <a href="#nogo" id="ask">Boxy.ask()</a> - 鐢ㄦ埛瀹氫箟鐨勯€夐」锛岄€夋嫨椤逛紶閫掔粰鍥炶皟鍑芥暟</li>
<li>寮瑰嚭 - <a href="#nogo" id="alert">Boxy.alert()</a> - 鍥炶皟鍑芥暟鎬绘槸涓嶈璋冪敤</li>
<li>纭 - <a href="#nogo" id="confirm">Boxy.confirm()</a> - 浠呭綋鐢ㄦ埛閫夋嫨浜嗏€滅‘璁も€濇椂鍥炶皟鍑芥暟浼氳璋冪敤</li>
</ul>
<div class="zxx_code">
<xmp><script type='text/javascript'>
$(function() {
$("#ask").click(function() {
Boxy.ask("浣犳劅瑙夋€庝箞鏍?", ["濂芥瀬浜?, "杩樺ソ", "涓嶅お濂?], function(val) {
alert("浣犻€夋嫨鐨勬槸: " + val);
}, {title: "杩欐槸涓€涓棶棰樷€︹€?});
return false;
});
$("#alert").click(function() {
Boxy.alert("鏂囦欢鏈壘鍒?, null, {title: "鎻愮ず淇℃伅"});
return false;
});
$("#confirm").click(function() {
Boxy.confirm("璇风‘璁?", function() { alert("宸茬粡纭!"); }, {title: "鎻愮ず淇℃伅"});
return false;
});
});
</script></xmp>
</div>
<script type='text/javascript'>
$(function() {
$("#ask").click(function() {
Boxy.ask("浣犳劅瑙夋€庝箞鏍?", ["濂芥瀬浜?, "杩樺ソ", "涓嶅お濂?], function(val) {
alert("浣犻€夋嫨鐨勬槸: " + val);
}, {title: "杩欐槸涓€涓棶棰樷€︹€?});
return false;
});
$("#alert").click(function() {
Boxy.alert("鏂囦欢鏈壘鍒?, null, {title: "鎻愮ず淇℃伅"});
return false;
});
$("#confirm").click(function() {
Boxy.confirm("璇风‘璁?", function() { alert("宸茬粡纭!"); }, {title: "鎻愮ず淇℃伅"});
return false;
});
});
</script>
</div>
<div class="zxx_test_list">
<strong id="to_link3">API</strong>(搴旂敤缂栫▼鎺ュ彛)
<p class="mt10"><strong>Boxy.load(url, options)</strong></p>
<div>浠ヤ竴涓猆RL鍔犺浇鍐呭骞朵互Boxy瀵硅瘽妗嗙殑褰㈠紡灞曠幇銆傛敮鎸佷互涓嬬殑涓€浜涢€夐」鍙傛暟锛?</div>
<ul class="zxx_ul_circle">
<li>绫诲瀷 - HTTP鏂规硶锛岄粯璁や负GET</li>
<li>缂撳瓨 - 濡傛灉鏄痶rue锛岀紦瀛樺唴瀹硅繛缁€氳瘽銆傜浉褰撲簬缂撳瓨閫夐」浼犻€掑埌jQuery鐨凙jax鏂规硶銆傞粯璁わ細false銆?/li>
<li>杩囨护 - jQuery鐨勮〃杈惧紡锛岀敤浜庤繃婊よ繙绋嬪唴瀹广€?/li>
</ul>
<div class="g6">锛堜换浣曞叾浠栨寚瀹氱殑閫夐」灏嗚浼犻€掑埌boxy鐨勬瀯閫犲嚱鏁颁腑锛?/div>
<p><strong>Boxy.get(element)</strong></p>
<div>杩斿洖鍖呭惈鍏冪礌鐨勫疄渚嬶紝渚嬪锛?code class="font f8"><a href="#" onclick="Boxy.get(this).hide();">鍏抽棴瀵硅瘽妗?lt;/a></code></div>
<p><strong>Boxy.ask(question, answers, callback, options)</strong></p>
<div>鏄剧ず妯″紡锛屽嵆闈炲彲鍏抽棴瀵硅瘽妗嗭紝鍏佽鐢ㄦ埛閫夋嫨閫夐」銆傞棶棰樻槸瑕佹樉绀虹粰鐢ㄦ埛鐨勪俊鎭€傜瓟妗堟槸涓€涓暟缁勬垨涓€鍒囧彲鑳界殑鍥炵瓟鐨勬暟鍒椼€傚洖璋冨嚱鏁板皢鏀跺埌閫夊畾鐨勫洖绛旓紝杩欐槸鍚︽槸闇€瑕佺殑鍊兼垨鐩稿簲鐨勫瘑閽ヨ鏍规嵁涓€涓暟缁勬垨绛旀鏁板垪鏄惁宸茬粡鎻愪緵浜嗐€俹ptions鏄竴绉嶉澶栫殑鍙€夎缃€夐」浼犻€掔粰瀵硅瘽妗嗙殑鏋勯€犲嚱鏁般€?/div>
<p><strong>Boxy.alert(message, callback, options)</strong></p>
<div>鏄剧ず妯″紡锛岄潪鍙叧闂璇濇鏄剧ず娑堟伅缁欑敤鎴枫€?br /><b>娉ㄦ剰锛?/b>姝ゆ柟娉曞苟<b>涓嶆槸</b>涓轰簡鍙栦唬娴忚鍣ㄦ湰鍦皐indow.alert()鍑芥暟鎻愪緵锛屽洜涓哄畠娌℃湁鑳藉姏闃绘绋嬪簭鎵ц锛屽湪瀵硅瘽妗嗘槸鍙鐨勬椂鍊欍€?</div>
<p><strong>Boxy.confirm(message, callback, options)</strong></p>
<div>鏄剧ず妯″紡锛岄潪鍙叧闂璇濇鏄剧ず鐨勫惈鏈夌‘瀹氬拰鍙栨秷鎸夐挳鐨勬秷鎭€傚洖璋冨彧浼氬湪鐢ㄦ埛閫夋嫨浜嗏€滅‘瀹氣€濇椂琚皟鐢ㄣ€?br /><b>娉ㄦ剰锛?/b>姝ゆ柟娉曞苟<b>涓嶆槸</b>涓轰簡鍙栦唬娴忚鍣ㄦ彁渚涚殑鏈湴window.confirm()鍑芥暟锛屽洜涓哄畠娌℃湁鑳藉姏鍦ㄥ璇濇鍙鏃堕樆姝㈢▼搴忔墽琛岀殑銆?</div>
<p><strong>Boxy.linkedTo(ele)</strong></p>
<div>杩斿洖宸查€氳繃鎵ц鍣ㄦ瀯閫犲嚱鏁伴€夐」杩炴帴DOM鍏冪礌鐨刡oxy瀹炰緥銆?</div>
<p><strong>Boxy.isModalVisible()</strong></p>
<div>杩斿洖true濡傛灉浠讳綍妯″紡瀵硅瘽妗嗘槸褰撳墠鍙鐨勶紝鍚﹀垯杩斿洖false銆?/div>
<p><strong>new Boxy(element, options)</strong></p>
<div>鏋勯€犲嚱鏁帮紱鍒涘缓涓€涓柊鐨刡oxy瀵硅瘽妗嗐€俥lement鏄璇濇鐨勫唴瀹癸紱浠讳綍鏈夋晥鐨勫弬鏁帮紝jQuery鐨?()鍑芥暟鍦ㄨ繖閲屼篃鏄湁鏁堢殑銆俹ptions鏄竴涓厤缃€夐」鐨勬暎鍒楋紝瑙佷笅闈㈣缁嗙殑璧勬枡銆?/div>
<p><strong>estimateSize()</strong></p>
<div>褰撳璇濇涓嶅彲瑙佺殑鏃跺€欎及璁″叾澶у皬銆傚鏋滃綋鍓嶅璇濇鍙锛屼笉瑕佷娇鐢ㄦ鏂规硶锛屼娇鐢╣etSize()浠ｆ浛銆?/div>
<p><strong>getSize()</strong></p>
<div>浠ユ暟缁勭殑褰㈠紡[width, height]杩斿洖瀵硅瘽妗嗙殑澶у皬銆?/div>
<p><strong>getContentSize()</strong></p>
<div>杩斿洖瀵硅瘽妗嗗唴瀹瑰尯鍩熺殑澶у皬銆傞粯璁ゆ儏鍐典笅锛屾寚鍦ㄥ璇濇妗嗘灦閲岀殑涓€鍒囷紝涓嶅寘鎷爣棰樻爮銆?/div>
<p><strong>getPosition()</strong></p>
<div>浠x,y]鏁扮粍褰㈠紡杩斿洖鏈€椤跺眰瀵硅瘽妗嗙殑宸︿笂瑙掑潗鏍囥€?/div>
<p><strong>getCenter()</strong></p>
<div>浠x,y]鏁扮粍褰㈠紡杩斿洖鏈€椤跺眰瀵硅瘽妗嗙殑涓績鐐圭殑鍧愭爣銆?/div>
<p><strong>getInner()</strong></p>
<div>杩斿洖涓€涓猨Query瀵硅薄鍖呰瀵硅瘽妗嗙殑鍐呴儴鍖哄煙-妗嗘灦鍐呭寘鎷爣棰樻爮涓€鍒囥€?/div>
<p><strong>getContent()</strong></p>
<div>杩斿洖涓€涓猨Query瀵硅薄鍖呰瀵硅瘽妗嗙殑鍐呭鍖哄煙-妗嗘灦鍐呯殑涓€鍒囷紝涓嶅寘鎷爣棰樻爮銆?/div>
<p><strong>setContent(newContent)</strong></p>
<div>璁剧疆瀵硅瘽妗嗕腑鐨勫唴瀹癸紝浠讳綍瀵?()鏈夋晥鐨勫弬鏁颁篃瀵硅缃殑鏂板唴瀹规湁鏁堛€傚彲閾炬帴銆?/div>
<p><strong>moveTo(x,y)</strong></p>
<div>绉诲姩瀵硅瘽妗嗗埌宸︿笂瑙掍负(x,y)鐨勪綅缃紝鍙摼鎺ャ€?/div>
<p><strong>centerAt(x,y)</strong></p>
<div>鎶婂璇濇绉诲姩鍒颁腑蹇冨潗鏍囦负(x,y)鐨勪綅缃笂銆?/div>
<p><strong>center(axis)</strong></p>
<div>绉诲姩瀵硅瘽妗嗭紝浣垮叾鍦ㄨ閲庣殑涓ぎ銆傚彲閫夊弬鏁癮xis鍙互鏄?x","y"涓殑浠绘剰涓€涓腑蹇冭酱銆傚彲閾炬帴銆?/div>
<p><strong>resize(w,h,after)</strong></p>
<div>閲嶆柊璋冩暣瀵硅瘽妗嗙殑楂樺鍒癧w,h]锛屽畬鎴愬悗鎵ц鍥炶皟鍑芥暟锛屽洖璋冨嚱鏁板皢鎺ュ彈Boxy瀹炰緥浣滀负鍙傛暟銆傚彲閾炬帴銆?/div>
<p><strong>tween(w,h,after)</strong></p>
<div>鍔ㄧ敾琛ラ棿瀵硅瘽妗嗛珮瀹藉埌[w,h]锛屽畬鎴愬悗鎵ц鍥炶皟鍑芥暟锛屽洖璋冨嚱鏁板皢鎺ュ彈Boxy瀹炰緥浣滀负鍙傛暟銆傚彲閾炬帴銆?/div>
<p><strong>isVisible()</strong></p>
<div>濡傛灉褰撳墠瀵硅瘽妗嗗彲瑙侊紝鍒欒繑鍥瀟rue锛屽惁鍒欒繑鍥瀎alse銆?/div>
<p><strong>show()</strong></p>
<div>鏄剧ず瀵硅瘽妗嗭紝鍙摼鎺ャ€?/div>
<p><strong>hide(after)</strong></p>
<div>闅愯棌瀵硅瘽妗嗭紝after涓哄彲閫夊洖璋冨嚱鏁帮紝瀹屾垚鍚庢墽琛屻€傚彲閾炬帴銆?/div>
<p><strong>toggle()</strong></p>
<div>瑙﹀彂瀵硅瘽妗嗙殑鏄鹃殣灞炴€с€傚彲閾炬帴銆?/div>
<p><strong>hideAndUnload(after)</strong></p>
<div>鍦ㄩ殣钘忓悗绔嬪嵆鎵ц鍗歌浇銆傚湪鍗歌浇涔嬪墠鎵цafter鍥炶皟鍑芥暟銆傚彲閾炬帴銆?/div>
<p><strong>unload()</strong></p>
<div>浠嶥OM涓垹闄ゅ璇濇锛屽垏鏂叾涓庢墽琛屾満鏋勭殑鑱旂郴锛屽鏋滄湁鐨勮瘽銆備竴鏃﹀嚭鐜颁竴涓璇濇宸茶鍗歌浇瀹冪殑浠讳綍杩涗竴姝ヨ鍔ㄩ兘鏄湭瀹氫箟鐨勩€?/div>
<p><strong>toTop()</strong></p>
<div>灏嗗綋鍓嶅璇濇绉诲姩鍒板叾浠栨墍鏈夊璇濇鐨勪笂閮ㄣ€傚彲閾炬帴銆?/div>
<p><strong>getTitle()</strong></p>
<div>浠TML鐨勫舰寮忚繑鍥炲璇濇鐨勬爣棰樸€?/div>
<p><strong>setTitle(t)</strong></p>
<div>璁剧疆瀵硅瘽妗嗙殑鏍囬涓簍锛屽彲閾炬帴銆?/div>
</div>
<div class="zxx_test_list">
<div class="mb10" id="options"><strong id="to_link4">瀹屾暣鐨勬瀯閫犲嚱鏁伴€夐」鍒楄〃</strong></div>
<ul class="zxx_ul_table title">
<li class="w1"><strong>閫夐」</strong></li><li class="w2"><strong>鎻忚堪</strong></li><li class="w3"><strong>榛樿</strong></li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">title</li><li class="w2">鏄剧ず鍦ㄨ嚜鍔ㄧ敓鎴愭爣棰樻爮涓婄殑鏍囬</li><li class="w3">null</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">closeable</li><li class="w2">鏄惁涓€涓叧闂璇濇鐨勯┍鍔ㄥ櫒瑕佹坊鍔犲埌鑷姩鐢熸垚鏍囬鏍忎笂銆傚鏋滄爣棰樻病鏈夋寚瀹氭槸娌℃湁褰卞搷鐨勩€?</li><li class="w3">true</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">closeText</li><li class="w2">鍦ㄥ彲鐢ㄦ儏鍐典笅鏍囬鏍忓叧闂摼鎺ョ殑鏂囧瓧</li><li class="w3">"[鍏抽棴]"</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">draggable</li><li class="w2">鏄惁瀵硅瘽妗嗗彲浠ラ€氳繃鏍囬鏍忚繘琛屾嫋鎷姐€傛爣棰樻湭鎸囧畾娌℃湁褰卞搷銆?/li><li class="w3">true</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">clone</li><li class="w2">鍐呴儴鍖哄煙鐨勫厓绱犱互鍙婁簨浠跺鐞嗙▼搴忓簲涓嶅簲璇ュ湪琚浛鎹箣鍓嶈繘琛屽鍒躲€?/li><li class="w3">false</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">actuator</li><li class="w2">DOM鍏冪礌锛堜笉鍖呮嫭jQuery瀵硅薄锛夛紝寮曞彂姝ゅ璇濇銆備袱鑰呬箣闂寸殑鑱旂郴灏嗚寤虹珛锛屾鑱旂郴鍏佽瀵硅瘽妗嗙殑鍙傜収绋嶅悗鍦ㄩ€氳繃鎵цBoxy.linkedTo(element)鑾峰彇鐨勫厓绱犱腑杩涜妫€绱€傚綋瀵硅瘽妗嗚鍗歌浇锛屾鑱旂郴涔熶細琚嚜鍔ㄥ垏鏂€?/li><li class="w3">null</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">center</li><li class="w2">瀵硅瘽妗嗘槸鍚﹀睆骞曚腑蹇冩樉绀?/li><li class="w3">true</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">fixed</li><li class="w2">鏄惁浣跨敤鍥哄畾瀹氫綅(fixed)鑰屼笉鏄粷瀵瑰畾浣?absolute)锛屽浐瀹氬畾浣嶇殑瀵硅瘽妗嗕笉鍙楁祻瑙堝櫒婊氬姩鏉″奖鍝嶃€侷E6涓嶆敮鎸佸浐瀹氬畾浣嶏紝鍏舵案杩滆〃鐜颁负缁濆瀹氫綅銆?/li><li class="w3">true</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">show</li><li class="w2">瀵硅瘽妗嗘槸鍚﹂渶瑕佺珛鍗虫樉绀猴紝濡傛灉鏄痜alse锛屽垯闇€瑕佷綘鎵嬪姩璋冪敤dialog.show()浠ユ樉绀哄璇濇銆?/li><li class="w3">true</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">modal</li><li class="w2">瀵硅瘽妗嗘槸鍚﹁缃负妯℃€併€傛ā鎬佹椂锛屾祻瑙堝櫒鑳屾櫙鈥滈粦榛戠殑鈥濓紝闃绘椤甸潰鐨勫叾浠栧厓绱犳帴鍙椾簨浠躲€?/li><li class="w3">false</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">x</li><li class="w2">瀵硅瘽妗嗙殑x(left)鍧愭爣</li><li class="w3">50</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">y</li><li class="w2">瀵硅瘽妗嗙殑y(top)鍧愭爣</li><li class="w3">50</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">unloadOnHide</li><li class="w2">濡傛灉鏄痶rue锛屽垯鍦ㄦ瀵硅瘽妗嗛殣钘忓悗浼氳鍗歌浇锛堝浠嶥OM涓垹闄わ級</li><li class="w3">false</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">clickToFront</li><li class="w2">濡傛灉鏄痶rue锛屽垯鍗曞嚮瀵硅瘽妗嗙殑浠绘剰浣嶇疆锛堝彧鏄浉瀵逛簬鏍囬鏍忥級锛屼細瀵艰嚧鍏惰窇鍒伴《閮ㄣ€?/li><li class="w3">false</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">behaviours</li><li class="w2">鍑芥暟鐢ㄦ潵鐢宠瀵硅瘽妗嗗唴瀹圭殑鑷畾涔夎涓恒€傛瘡娆¤皟鐢╯etContent()锛屼笖鍦˙oxy瀵硅薄涓殑涓婁笅鏂囦腑鎵ц锛屽皢鎺ュ彈涓€涓寘鍚唴瀹瑰尯鍩熺殑jQuery瀵硅薄浣滀负鍙傛暟銆?/li><li class="w3">function(r){}</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">afterDrop</li><li class="w2">褰撳璇濇鏀句笅鐨勬椂鍊欏湪Boxy瀵硅薄鐨勪笂涓嬫枃鎵ц鍥炶皟鍑芥暟銆?/li><li class="w3">function(){}</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">afterShow</li><li class="w2">褰撳璇濇鏄剧ず鐨勬椂鍊欏湪Boxy瀵硅薄鐨勪笂涓嬫枃鎵ц鍥炶皟鍑芥暟銆傝兘澶熺敤鏉ヤ娇琛ㄥ崟鐨勬枃鏈鑾峰彇鐒︾偣銆?/li><li class="w3">function(){}</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">afterHide</li><li class="w2">褰撳璇濇闅愯棌鐨勬椂鍊欏湪Boxy瀵硅薄鐨勪笂涓嬫枃鎵ц鍥炶皟鍑芥暟銆?/li><li class="w3">fuuction(){}</li>
</ul>
<ul class="zxx_ul_table">
<li class="w1">beforeUnload</li><li class="w2">鍦ㄥ璇濇鍗歌浇鍓嶅湪Boxy瀵硅薄鐨勪笂涓嬫枃鎵ц鍥炶皟鍑芥暟銆?/li><li class="w3">function(){}</li>
</ul>
</div>
<div class="zxx_test_list">
<strong id="to_link5">CSS閫夋嫨鍣?/strong>
<p>鍙互閫氳繃css瀹屽叏瀹氬埗瀵硅瘽妗嗙殑澶栬锛岃繖閲岀殑鏄偍鍙兘鎰熷叴瓒ｇ殑閫夋嫨鍣ㄥ垪琛ㄣ€?/p>
<p><strong>.boxy-wrapper .title-bar</strong></p>
<div>div鍖呰鐨勮嚜鍔ㄧ敓鎴愮殑鏍囬鏍?/div>
<p><strong>.boxy-wrapper .title-bar h2</strong></p>
<div>鏍囬鏍忕殑鍐呭</div>
<p><strong>.boxy-wrapper .title-bar.dragging</strong></p>
<div>鎷栨嫿鏃跺€欑殑鏍囬鏍?/div>
<p><strong>.boxy-wrapper .title-bar .close</strong></p>
<div>榛樿鐨勫叧闂璇濇鐨勬墽琛屽櫒</div>
<p><strong>.boxy-inner</strong></p>
<div>鍐呴儴鍖哄煙锛屽寘鎷爣棰樻爮</div>
<p><strong>.boxy-content</strong></p>
<div>鍐呴儴鍖哄煙锛屼笉鍖呮嫭鏍囬鏍忋€傝繖涓猚lass绫诲皢琚嚜鍔ㄦ坊鍔犲埌浼犻€掔粰Boxy鐨勬瀯閫犲嚱鏁扮殑浠讳綍鍏冪礌銆?/div>
<p><strong>.boxy-wrapper .question</strong></p>
<div>閫氳繃Boxy.ask()鍒涘缓鐨勶紝鍖呭惈闂鏂囧瓧</div>
<p><strong>.boxy-wrapper .answers</strong></p>
<div>閫氳繃Boxy.ask()鍒涘缓鐨勶紝鍖呭惈搴旂瓟鐨勬寜閽?/div>
<p><strong>.close</strong></p>
<div>杩欎竴class绫荤殑浠讳綍鍐呭鐨勫崟鍑讳簨浠跺皢鍏宠仈鍒板叧闂璇濇涓娿€?/div>
</div>
<div class="zxx_test_list">
<div class="mb10"><strong>缁撹</strong></div>
<ul class="zxx_ul_circle">
<li>鍏ㄦ枃鐢辨垜锛堝紶閼棴锛夌炕璇戞暣鐞嗚嚜<a href="http://onehackoranother.com/projects/jquery/boxy/" target="_blank">http://onehackoranother.com/projects/jquery/boxy/</a>锛屾椂闂翠粨淇冿紝闅惧厤鍦ㄧ炕璇戞垨缂栬緫鏃跺嚭鐜伴敊璇垨涓嶅埌浣嶄箣澶勶紝娆㈣繋鎸囨銆傛偍鍙互閫氳繃閭iamzhangxinxu#qq.com鑱旂郴鎴戙€?/li>
<li>姝ゆ彃浠秊s閮ㄥ垎浠ュ強css閮ㄥ垎鑷繁鐣ュ井淇敼锛屼竴浜涜嫳鏂囦腑鏂囧寲锛屾坊鍔犱竴浜沜lass渚夸簬鏍峰紡鎺у埗绛夈€傝繖閲岀殑婧愭枃浠朵负鎴戜慨鏀瑰悗鐨勭増鏈€?/li>
</ul>
</div>
</div>
<div class="zxx_footer">
Copyright © by <a href="http://www.zhangxinxu.com/">寮犻懌鏃?閼┖闂?閼敓娲?/a>
|
<a href="http://www.zhangxinxu.com/wordpress/?p=318">璇ョ瘒鐩稿叧鏂囩珷</a>
</div>
</div>
</div>
</body>
</html>
JS代码(jquery.boxy.js):
/** * Boxy 0.1.4 - Facebook-style dialog,with frills * * (c) 2008 Jason Frame * Licensed under the MIT License (LICENSE) */
/* * jQuery plugin * * Options:* message:confirmation message for form submit hook (default:"Please confirm:") * * Any other options - e.g. 'clone' - will be passed onto the boxy constructor (or * Boxy.load for AJAX operations) */
jQuery.fn.boxy = function(options){
options = options ||{
}
;
return this.each(function(){
var node = this.nodeName.toLowerCase(),self = this;
if (node == 'a'){
jQuery(this).click(function(){
var active = Boxy.linkedTo(this),href = this.getAttribute('href'),localOptions = jQuery.extend({
actuator:this,title:this.title}
,options);
if (active){
active.show();
}
else if (href.indexOf('#') >= 0){
var content = jQuery(href.substr(href.indexOf('#'))),newContent = content.clone(true);
content.remove();
localOptions.unloadOnHide = false;
new Boxy(newContent,localOptions);
}
else{
// fall back to AJAX;
could do with a same-origin check if (!localOptions.cache) localOptions.unloadOnHide = true;
Boxy.load(this.href,localOptions);
}
return false;
}
);
}
else if (node == 'form'){
jQuery(this).bind('submit.boxy',function(){
Boxy.confirm(options.message || '请确认：',function(){
jQuery(self).unbind('submit.boxy').submit();
}
);
return false;
}
);
}
}
);
}
;
//// Boxy Classfunction Boxy(element,options){
this.boxy = jQuery(Boxy.WRAPPER);
jQuery.data(this.boxy[0],'boxy',this);
this.visible = false;
this.options = jQuery.extend({
}
,Boxy.DEFAULTS,options ||{
}
);
if (this.options.modal){
this.options = jQuery.extend(this.options,{
center:true,draggable:false}
);
}
// options.actuator == DOM element that opened this boxy // association will be automatically deleted when this boxy is remove()d if (this.options.actuator){
jQuery.data(this.options.actuator,'active.boxy',this);
}
this.setContent(element || "<div></div>");
this._setupTitleBar();
this.boxy.css('display','none').appendTo(document.body);
this.toTop();
if (this.options.fixed){
if (jQuery.browser.msie && jQuery.browser.version < 7){
this.options.fixed = false;
// IE6 doesn't support fixed positioning}
else{
this.boxy.addClass('fixed');
}
}
if (this.options.center && Boxy._u(this.options.x,this.options.y)){
this.center();
}
else{
this.moveTo( Boxy._u(this.options.x) ? this.options.x:Boxy.DEFAULT_X,Boxy._u(this.options.y) ? this.options.y:Boxy.DEFAULT_Y );
}
if (this.options.show) this.show();
}
;
Boxy.EF = function(){
}
;
jQuery.extend(Boxy,{
WRAPPER:"<table cellspacing='0' cellpadding='0' border='0' class='boxy-wrapper'>" + "<tr><td class='top-left'></td><td class='top'></td><td class='top-right'></td></tr>" + "<tr><td class='left'></td><td class='boxy-inner'></td><td class='right'></td></tr>" + "<tr><td class='bottom-left'></td><td class='bottom'></td><td class='bottom-right'></td></tr>" + "</table>",DEFAULTS:{
title:null,// titlebar text. titlebar will not be visible if not set. closeable:true,// display close link in titlebar? draggable:true,// can this dialog be dragged? clone:false,// clone content prior to insertion into dialog? actuator:null,// element which opened this dialog center:true,// center dialog in viewport? show:true,// show dialog immediately? modal:false,// make dialog modal? fixed:true,// use fixed positioning,if supported? absolute positioning used otherwise closeText:'[关闭]',// text to use for default close link unloadOnHide:false,// should this dialog be removed from the DOM after being hidden? clickToFront:false,// bring dialog to foreground on any click (not just titlebar)? behaviours:Boxy.EF,// function used to apply behaviours to all content embedded in dialog. afterDrop:Boxy.EF,// callback fired after dialog is dropped. executes in context of Boxy instance. afterShow:Boxy.EF,// callback fired after dialog becomes visible. executes in context of Boxy instance. afterHide:Boxy.EF,// callback fired after dialog is hidden. executed in context of Boxy instance. beforeUnload:Boxy.EF // callback fired after dialog is unloaded. executed in context of Boxy instance.}
,DEFAULT_X:50,DEFAULT_Y:50,zIndex:1337,dragConfigured:false,// only set up one drag handler for all boxys resizeConfigured:false,dragging:null,// load a URL and display in boxy // url - url to load // options keys (any not listed below are passed to boxy constructor) // type:HTTP method,default:GET // cache:cache retrieved content? default:false // filter:jQuery selector used to filter remote content load:function(url,options){
options = options ||{
}
;
var ajax ={
url:url,type:'GET',dataType:'html',cache:false,success:function(html){
html = jQuery(html);
if (options.filter) html = jQuery(options.filter,html);
new Boxy(html,options);
}
}
;
jQuery.each(['type','cache'],function(){
if (this in options){
ajax[this] = options[this];
delete options[this];
}
}
);
jQuery.ajax(ajax);
}
,// allows you to get a handle to the containing boxy instance of any element // e.g. <a href='#' onclick='alert(Boxy.get(this));
'>inspect!</a>. // this returns the actual instance of the boxy 'class',not just a DOM element. // Boxy.get(this).hide() would be valid,for instance. get:function(ele){
var p = jQuery(ele).parents('.boxy-wrapper');
return p.length ? jQuery.data(p[0],'boxy'):null;
}
,// returns the boxy instance which has been linked to a given element via the // 'actuator' constructor option. linkedTo:function(ele){
return jQuery.data(ele,'active.boxy');
}
,// displays an alert box with a given message,calling optional callback // after dismissal. alert:function(message,callback,options){
return Boxy.ask(message,['确认'],callback,options);
}
,// displays an alert box with a given message,calling after callback iff // user selects OK. confirm:function(message,after,options){
return Boxy.ask(message,['确认','取消'],function(response){
if (response == '确认') after();
}
,options);
}
,// asks a question with multiple responses presented as buttons // selected item is returned to a callback method. // answers may be either an array or a hash. if it's an array,the // the callback will received the selected value. if it's a hash,// you'll get the corresponding key. ask:function(question,answers,callback,options){
options = jQuery.extend({
modal:true,closeable:false}
,options ||{
}
,{
show:true,unloadOnHide:true}
);
var body = jQuery('<div></div>').append(jQuery('<div class="question"></div>').html(question));
// ick var map ={
}
,answerStrings = [];
if (answers instanceof Array){
for (var i = 0;
i < answers.length;
i++){
map[answers[i]] = answers[i];
answerStrings.push(answers[i]);
}
}
else{
for (var k in answers){
map[answers[k]] = k;
answerStrings.push(answers[k]);
}
}
var buttons = jQuery('<form class="answers"></form>');
buttons.html(jQuery.map(answerStrings,function(v){
//add by zhangxinxu http://www.zhangxinxu.com 给确认对话框的确认取消按钮添加不同的classvar btn_index;
if(v === "确认"){
btn_index = 1;
}
else if(v === "取消"){
btn_index = 2;
}
else{
btn_index = 3;
}
//add end. include the 'btn_index' below return "<input class='boxy-btn"+btn_index+"' type='button' value='" + v + "' />";
}
).join(' '));
jQuery('input[type=button]',buttons).click(function(){
var clicked = this;
Boxy.get(this).hide(function(){
if (callback) callback(map[clicked.value]);
}
);
}
);
body.append(buttons);
new Boxy(body,options);
}
,// returns true if a modal boxy is visible,false otherwise isModalVisible:function(){
return jQuery('.boxy-modal-blackout').length > 0;
}
,_u:function(){
for (var i = 0;
i < arguments.length;
i++) if (typeof arguments[i] != 'undefined') return false;
return true;
}
,_handleResize:function(evt){
var d = jQuery(document);
jQuery('.boxy-modal-blackout').css('display','none').css({
width:d.width(),height:d.height()}
).css('display','block');
}
,_handleDrag:function(evt){
var d;
if (d = Boxy.dragging){
d[0].boxy.css({
left:evt.pageX - d[1],top:evt.pageY - d[2]}
);
}
}
,_nextZ:function(){
return Boxy.zIndex++;
}
,_viewport:function(){
var d = document.documentElement,b = document.body,w = window;
return jQuery.extend( jQuery.browser.msie ?{
left:b.scrollLeft || d.scrollLeft,top:b.scrollTop || d.scrollTop}
:{
left:w.pageXOffset,top:w.pageYOffset}
,!Boxy._u(w.innerWidth) ?{
width:w.innerWidth,height:w.innerHeight}
:(!Boxy._u(d) && !Boxy._u(d.clientWidth) && d.clientWidth != 0 ?{
width:d.clientWidth,height:d.clientHeight}
:{
width:b.clientWidth,height:b.clientHeight}
) );
}
}
);
Boxy.prototype ={
// Returns the size of this boxy instance without displaying it. // Do not use this method if boxy is already visible,use getSize() instead. estimateSize:function(){
this.boxy.css({
visibility:'hidden',display:'block'}
);
var dims = this.getSize();
this.boxy.css('display','none').css('visibility','visible');
return dims;
}
,// Returns the dimensions of the entire boxy dialog as [width,height] getSize:function(){
return [this.boxy.width(),this.boxy.height()];
}
,// Returns the dimensions of the content region as [width,height] getContentSize:function(){
var c = this.getContent();
return [c.width(),c.height()];
}
,// Returns the position of this dialog as [x,y] getPosition:function(){
var b = this.boxy[0];
return [b.offsetLeft,b.offsetTop];
}
,// Returns the center point of this dialog as [x,y] getCenter:function(){
var p = this.getPosition();
var s = this.getSize();
return [Math.floor(p[0] + s[0] / 2),Math.floor(p[1] + s[1] / 2)];
}
,// Returns a jQuery object wrapping the inner boxy region. // Not much reason to use this,you're probably more interested in getContent() getInner:function(){
return jQuery('.boxy-inner',this.boxy);
}
,// Returns a jQuery object wrapping the boxy content region. // This is the user-editable content area (i.e. excludes titlebar) getContent:function(){
return jQuery('.boxy-content',this.boxy);
}
,// Replace dialog content setContent:function(newContent){
newContent = jQuery(newContent).css({
display:'block'}
).addClass('boxy-content');
if (this.options.clone) newContent = newContent.clone(true);
this.getContent().remove();
this.getInner().append(newContent);
this._setupDefaultBehaviours(newContent);
this.options.behaviours.call(this,newContent);
return this;
}
,// Move this dialog to some position,funnily enough moveTo:function(x,y){
this.moveToX(x).moveToY(y);
return this;
}
,// Move this dialog (x-coord only) moveToX:function(x){
if (typeof x == 'number') this.boxy.css({
left:x}
);
else this.centerX();
return this;
}
,// Move this dialog (y-coord only) moveToY:function(y){
if (typeof y == 'number') this.boxy.css({
top:y}
);
else this.centerY();
return this;
}
,// Move this dialog so that it is centered at (x,y) centerAt:function(x,y){
var s = this[this.visible ? 'getSize':'estimateSize']();
if (typeof x == 'number') this.moveToX(x - s[0] / 2);
if (typeof y == 'number') this.moveToY(y - s[1] / 2);
return this;
}
,centerAtX:function(x){
return this.centerAt(x,null);
}
,centerAtY:function(y){
return this.centerAt(null,y);
}
,// Center this dialog in the viewport // axis is optional,can be 'x','y'. center:function(axis){
var v = Boxy._viewport();
var o = this.options.fixed ? [0,0]:[v.left,v.top];
if (!axis || axis == 'x') this.centerAt(o[0] + v.width / 2,null);
if (!axis || axis == 'y') this.centerAt(null,o[1] + v.height / 2);
return this;
}
,// Center this dialog in the viewport (x-coord only) centerX:function(){
return this.center('x');
}
,// Center this dialog in the viewport (y-coord only) centerY:function(){
return this.center('y');
}
,// Resize the content region to a specific size resize:function(width,height,after){
if (!this.visible) return;
var bounds = this._getBoundsForResize(width,height);
this.boxy.css({
left:bounds[0],top:bounds[1]}
);
this.getContent().css({
width:bounds[2],height:bounds[3]}
);
if (after) after(this);
return this;
}
,// Tween the content region to a specific size tween:function(width,height,after){
if (!this.visible) return;
var bounds = this._getBoundsForResize(width,height);
var self = this;
this.boxy.stop().animate({
left:bounds[0],top:bounds[1]}
);
this.getContent().stop().animate({
width:bounds[2],height:bounds[3]}
,function(){
if (after) after(self);
}
);
return this;
}
,// Returns true if this dialog is visible,false otherwise isVisible:function(){
return this.visible;
}
,// Make this boxy instance visible show:function(){
if (this.visible) return;
if (this.options.modal){
var self = this;
if (!Boxy.resizeConfigured){
Boxy.resizeConfigured = true;
jQuery(window).resize(function(){
Boxy._handleResize();
}
);
}
this.modalBlackout = jQuery('<div class="boxy-modal-blackout"></div>') .css({
zIndex:Boxy._nextZ(),opacity:0.7,width:jQuery(document).width(),height:jQuery(document).height()}
) .appendTo(document.body);
this.toTop();
if (this.options.closeable){
jQuery(document.body).bind('keypress.boxy',function(evt){
var key = evt.which || evt.keyCode;
if (key == 27){
self.hide();
jQuery(document.body).unbind('keypress.boxy');
}
}
);
}
}
this.boxy.stop().css({
opacity:1}
).show();
this.visible = true;
this._fire('afterShow');
return this;
}
,// Hide this boxy instance hide:function(after){
if (!this.visible) return;
var self = this;
if (this.options.modal){
jQuery(document.body).unbind('keypress.boxy');
this.modalBlackout.animate({
opacity:0}
,function(){
jQuery(this).remove();
}
);
}
this.boxy.stop().animate({
opacity:0}
,300,function(){
self.boxy.css({
display:'none'}
);
self.visible = false;
self._fire('afterHide');
if (after) after(self);
if (self.options.unloadOnHide) self.unload();
}
);
return this;
}
,toggle:function(){
this[this.visible ? 'hide':'show']();
return this;
}
,hideAndUnload:function(after){
this.options.unloadOnHide = true;
this.hide(after);
return this;
}
,unload:function(){
this._fire('beforeUnload');
this.boxy.remove();
if (this.options.actuator){
jQuery.data(this.options.actuator,'active.boxy',false);
}
}
,// Move this dialog box above all other boxy instances toTop:function(){
this.boxy.css({
zIndex:Boxy._nextZ()}
);
return this;
}
,// Returns the title of this dialog getTitle:function(){
return jQuery('> .title-bar h2',this.getInner()).html();
}
,// Sets the title of this dialog setTitle:function(t){
jQuery('> .title-bar h2',this.getInner()).html(t);
return this;
}
,// // Don't touch these privates _getBoundsForResize:function(width,height){
var csize = this.getContentSize();
var delta = [width - csize[0],height - csize[1]];
var p = this.getPosition();
return [Math.max(p[0] - delta[0] / 2,0),Math.max(p[1] - delta[1] / 2,0),width,height];
}
,_setupTitleBar:function(){
if (this.options.title){
var self = this;
var tb = jQuery("<div class='title-bar'></div>").html("<h2>" + this.options.title + "</h2>");
if (this.options.closeable){
tb.append(jQuery("<a href='#' class='close'></a>").html(this.options.closeText));
}
if (this.options.draggable){
tb[0].onselectstart = function(){
return false;
}
tb[0].unselectable = 'on';
tb[0].style.MozUserSelect = 'none';
if (!Boxy.dragConfigured){
jQuery(document).mousemove(Boxy._handleDrag);
Boxy.dragConfigured = true;
}
tb.mousedown(function(evt){
self.toTop();
Boxy.dragging = [self,evt.pageX - self.boxy[0].offsetLeft,evt.pageY - self.boxy[0].offsetTop];
jQuery(this).addClass('dragging');
}
).mouseup(function(){
jQuery(this).removeClass('dragging');
Boxy.dragging = null;
self._fire('afterDrop');
}
);
}
this.getInner().prepend(tb);
this._setupDefaultBehaviours(tb);
}
}
,_setupDefaultBehaviours:function(root){
var self = this;
if (this.options.clickToFront){
root.click(function(){
self.toTop();
}
);
}
jQuery('.close',root).click(function(){
self.hide();
return false;
}
).mousedown(function(evt){
evt.stopPropagation();
}
);
}
,_fire:function(event){
this.options[event].call(this);
}
}
;
CSS代码(boxy.css):
@charset "utf-8";/* CSS Document */
.boxy-wrapper{position:absolute;}
.boxy-wrapper.fixed{position:fixed;}
/* Modal */
.boxy-modal-blackout{position:absolute;background-color:black;left:0;top:0;}
/* Border */
.boxy-wrapper{empty-cells:show;}
.boxy-wrapper .top-left,.boxy-wrapper .top-right,.boxy-wrapper .bottom-right,.boxy-wrapper .bottom-left{width:10px;height:10px;padding:0}
.boxy-wrapper .top-left{background:url(http://www.zhangxinxu.com/study/image/boxy/boxy-nw.png);}
.boxy-wrapper .top-right{background:url(http://www.zhangxinxu.com/study/image/boxy/boxy-ne.png);}
.boxy-wrapper .bottom-right{background:url(http://www.zhangxinxu.com/study/image/boxy/boxy-se.png);}
.boxy-wrapper .bottom-left{background:url(http://www.zhangxinxu.com/study/image/boxy/boxy-sw.png);}
/* IE6+7 hacks for the border. IE7 should support this natively but fails in conjuction with modal blackout bg. */
/* NB:these must be absolute paths or URLs to your images */
.boxy-wrapper .top-left{#background:none;#filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.zhangxinxu.com/study/image/boxy/boxy-nw.png);}
.boxy-wrapper .top-right{#background:none;#filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.zhangxinxu.com/study/image/boxy/boxy-ne.png);}
.boxy-wrapper .bottom-right{#background:none;#filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.zhangxinxu.com/study/image/boxy/boxy-se.png);}
.boxy-wrapper .bottom-left{#background:none;#filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.zhangxinxu.com/study/image/boxy/boxy-sw.png);}
.boxy-wrapper .top,.boxy-wrapper .bottom{height:10px;background-color:black;opacity:0.6;filter:alpha(opacity=60);padding:0}
.boxy-wrapper .left,.boxy-wrapper .right{width:10px;background-color:black;opacity:0.6;filter:alpha(opacity=60);padding:0}
/* Title bar */
.boxy-wrapper .title-bar{background-color:#333333;padding:6px;position:relative;}
.boxy-wrapper .title-bar.dragging{cursor:move;}
.boxy-wrapper .title-bar h2{font-size:12px;color:white;line-height:1;margin:0;padding:0;font-weight:normal;}
.boxy-wrapper .title-bar .close{color:white;position:absolute;top:5px;right:6px;font-size:12px;}
.boxy-wrapper .title-bar .close:hover{background-color:#454545;}
/* Content Region */
.boxy-inner{background-color:white;padding:0}
.boxy-content{padding:15px;}
/* Question Boxes */
.boxy-wrapper .question{width:350px;min-height:60px;_height:60px;}
.boxy-wrapper .answers{text-align:right;}
/*confirm btn by zhangxinxu http://www.zhangxinxu.com*/
.boxy-btn1,.boxy-btn2,.boxy-btn3{padding:3px 12px 1.9px;border-width:1px;border-style:solid;letter-spacing:1px;line-height:15px;cursor:pointer;overflow:visible;}
.boxy-btn1{background-color:#425f99;border-color:#5A7EC6 #2C3E5F #2C3E5F #5A7EC6;color:white;}
.boxy-btn2{background-color:#ECE9D8;border-color:#eeeeee #bbbbbb #bbbbbb #eeeeee;color:#333333;}
.boxy-btn3{background-color:#EAEAEA;border-color:#EAEAEA #aaaaaa #aaaaaa #EAEAEA;color:#333333;padding:3px 5px 1.9px;}
.boxy-btn3:hover{background-color:#cad5eb;border-color:#CED8E3 #A2ADBC #A2ADBC #CED8E3;}
CSS代码(common.css):
@charset "utf-8";/* CSS Document */
body{padding:0;margin:0;font-size:84%;background:#eeeeee;color:#333333;font-family:'宋体',Verdana,Geneva,sans-serif;}
ul,li,form,h1,h2,h3,h4,h5,h6,p{padding:0;margin:0;list-style-type:none;}
i,cite{font-style:normal;}
a{color:#34538b;text-decoration:underline;}
a:hover{color:#F30;text-decoration:underline;}
.l{float:left;}
.r{float:right;}
.cl{clear:both;}
img{border:0;max-width:100%;}
.tc{text-align:center;}
.tr{text-align:right;}
.g0{color:#000000;}
.g3{color:#333333;}
.g6{color:#666666;}
.g9{color:#999999;}
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}
.vt{vertical-align:top;}
.vn{vertical-align:-2px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.f9{font-size:0.9em;}
.f10{font-size:1em;}
.f11{font-size:1.1em;}
.f12{font-size:1.2em;}
.f13{font-size:1.3em;}
.f14{font-size:1.4em;}
.f15{font-size:1.5em;}
.f16{font-size:1.6em;}
.fix{zoom:1;}
.fix:after,.fix:before{display:block;content:"clear";height:0;clear:both;overflow:hidden;visibility:hidden;}
.rel{position:relative;}
.abs{position:absolute;}
.dn{display:none;}
.db{display:block;}
.dib{display:inline-block;}
.di{display:inline;}
.dot{background:url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/zxx_dotted.gif) repeat-x 0 bottom;}
.zxx_out_box{width:70%;min-width:700px;border-left:1px solid white;border-right:1px solid white;margin:0 auto;}
.zxx_in_box{min-height:550px;_height:550px;border-left:1px solid #cccccc;border-right:1px solid #cccccc;background:white;padding:1em 2.5em 0;}
.zxx_header{padding:10px 20px 5px;border-bottom:1px solid #cccccc;overflow:hidden;zoom:1;}
.zxx_author_time{float:right;margin-top:34px;color:#787878;font-family:"Courier New",Courier,monospace;}
.zxx_title{font-size:1.6em;text-align:center;margin:20px 0;}
.zxx_main_con{padding:0 20px 20px;}
.zxx_footer{padding-bottom:25px;text-align:center;}
.zxx_test_list{padding:1em;font-size:1.1em;border-bottom:1px dashed #cccccc;line-height:1.3;overflow:hidden;zoom:1;}
.zxx_code{display:block;padding:10px;margin:5px 0;background:#eeeeee;border:1px dashed #cccccc;clear:both;zoom:1;}
.zxx_code xmp{margin:0;color:#00F;font-size:12px;white-space:pre-wrap;word-wrap:break-word;}
.zxx_btn{display:inline-block;background:url(../image/down_btn.png) no-repeat;padding-left:25px;}
.zxx_btn span,.zxx_btn a{display:inline-block;height:45px;line-height:45px;background:url(../image/down_btn.png) no-repeat right top;padding:0 45px 0 20px;cursor:pointer;}
.zxx_btn:hover{text-decoration:none;color:#34538b;}
.zxx_ad_left{position:absolute;left:15px;top:120px;}
.zxx_ad_right{position:absolute;right:15px;top:120px;}
分享到QQ
分享到微博
微信扫一扫
