欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

GreyBox技術(shù)總結(jié)（轉(zhuǎn)）

 更新時(shí)間：2010年11月23日 21:48:35   作者：  
GreyBox是一個(gè)遮罩層的組件也稱模式窗口或模態(tài)窗口（所謂模態(tài)窗口，就是指除非采取有效的關(guān)閉手段，用戶的鼠標(biāo)焦點(diǎn)或者輸入光標(biāo)將一直停留在其上的窗口），它運(yùn)行以后可以產(chǎn)生不錯(cuò)的界面。
類似于thinkbox，lightbox等。用于以一種別致的模式對(duì)話框方式展示頁面，圖片或者其它內(nèi)容。這是它的官網(wǎng)：http://orangoo.com/labs/GreyBox/

　　我們先來看一下它的幾個(gè)實(shí)例：

(1) 打開網(wǎng)頁：

(2) 顯示一組圖片：

 

　　基本使用

(1) 進(jìn)入官網(wǎng)，點(diǎn)擊下載

(2) 解壓。(其中的 installation.html 對(duì)其使用進(jìn)行了說明，很簡單，一看就明白。我還是寫一下步驟吧)

(3) 將其中的 greybox 文件夾拷貝到 web 項(xiàng)目根目錄下，注意：一定要放在 web 根目錄下，放在其他目錄或二級(jí)目下肯能不能使用，在我的工程里是這么部署的：

　?。槺阏f下教訓(xùn)，一開始我將其放在了 js 文件夾下，因?yàn)槲业?js 腳本都在里面放的，jQuery 也在，可就是不能用。。。最后放在了 根目錄下就可以使用了。）

(4) 現(xiàn)在就可以使用了，我們用一個(gè)測試頁來進(jìn)行測試，代碼如下：

復(fù)制代碼 代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<!-- GreyBox引用開始 -->
<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/"; //注意這里的路徑！?。?
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- GreyBox引用結(jié)束 -->
</head>
<body>
<a title="百度" rel="gb_page[500, 500]">百度一下</a>
</body>
</html>

這樣就完成了基本的使用。
　　但是，在實(shí)際開發(fā)中，我們需要實(shí)現(xiàn)這樣的效果：(1) 通過點(diǎn)擊 button 來彈出模式窗口；(2) 關(guān)閉模式窗口后，刷新父窗口。
通過基本使用，我們可以看到官網(wǎng)的示例都是在點(diǎn)擊一個(gè)超鏈接后彈出模態(tài)對(duì)話框。

等等。

但對(duì)于實(shí)際開發(fā)，我們有時(shí)需要實(shí)現(xiàn)通過點(diǎn)擊 Button 來彈出一個(gè)模態(tài)對(duì)話框。其實(shí)，稍作修改就可以實(shí)現(xiàn)了，由于前篇文章已經(jīng)對(duì)使用做了說明，這次就直接上代碼了：

(1) 實(shí)現(xiàn)按鈕點(diǎn)擊彈出模態(tài)對(duì)話框

復(fù)制代碼 代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<!-- GreyBox引用開始 -->
<script type="text/javascript">
var GB_ROOT_DIR = "./greybox/"; //注意這里的路徑?。?！
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- GreyBox引用結(jié)束 -->
<script type="text/javascript">
//居中彈出模態(tài)窗口
function openWinCenter() {
//GB_showCenter(caption, url, /* optional */ height, width, callback_fn)
GB_showCenter("百度一下", "http://www.baidu.com", 600, 900);
}
//全屏彈出模態(tài)窗口
function openWinFull() {
//GB_showFullScreen(caption, url, callback_fn)
GB_showFullScreen("百度一下", "http://www.baidu.com");
}
</script>
</head>
<body>
<input type="button" value="居中彈出" onclick="openWinCenter()"><br/>
<input type="button" value="全屏彈出" onclick="openWinFull()"><br/>
</body>
</html>

具體用法可以看官方文檔的“Advance Usage”部分。
(2) 開發(fā)過程中還會(huì)遇到這樣的問題，在彈出窗口進(jìn)行操作后，關(guān)閉時(shí)需要對(duì)父窗口進(jìn)行刷新。怎么實(shí)現(xiàn)？
　　我們先看一下普通的 js 是怎么寫的
復(fù)制代碼 代碼如下:

<script language="javascript">
　　
//彈出窗口
function openSubWin() {
window.open("","name1","width=100,height=200,toolbar=no,scrollbars=no,menubar=no,screenX=100,screenY=100");
}
//關(guān)閉子窗口，刷新父窗口
function closeSubWin() {
window.opener.location = "http://www.baidu.com";
window.close();
}
</script>

那如果使用 GreyBox 怎么實(shí)現(xiàn)呢？上代碼，【注意】這個(gè) js 是在子窗口的網(wǎng)頁中寫的：
復(fù)制代碼 代碼如下:

<script type="text/javascript">
function close() {
parent.parent.location.reload();
parent.parent.GB_hide();
}
</script>

好了，至此就完成了對(duì)于 GreyBox 的學(xué)習(xí)，這些基本就可以滿足我們?nèi)粘５捻?xiàng)目需要了。

相關(guān)文章

最新評(píng)論