GreyBox技術(shù)總結(jié)（轉(zhuǎn)）
更新時間：2010年11月23日 21:48:35 作者：
GreyBox是一個遮罩層的組件也稱模式窗口或模態(tài)窗口（所謂模態(tài)窗口，就是指除非采取有效的關(guān)閉手段，用戶的鼠標(biāo)焦點或者輸入光標(biāo)將一直停留在其上的窗口），它運行以后可以產(chǎn)生不錯的界面。
類似于thinkbox，lightbox等。用于以一種別致的模式對話框方式展示頁面，圖片或者其它內(nèi)容。這是它的官網(wǎng)：http://orangoo.com/labs/GreyBox/
<!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>
這樣就完成了基本的使用。
但是，在實際開發(fā)中，我們需要實現(xiàn)這樣的效果：(1) 通過點擊 button 來彈出模式窗口；(2) 關(guān)閉模式窗口后，刷新父窗口。
通過基本使用，我們可以看到官網(wǎng)的示例都是在點擊一個超鏈接后彈出模態(tài)對話框。
<!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ā)過程中還會遇到這樣的問題，在彈出窗口進(jìn)行操作后，關(guān)閉時需要對父窗口進(jìn)行刷新。怎么實現(xiàn)？
我們先看一下普通的 js 是怎么寫的
<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 怎么實現(xiàn)呢？上代碼，【注意】這個 js 是在子窗口的網(wǎng)頁中寫的：
<script type="text/javascript">
function close() {
parent.parent.location.reload();
parent.parent.GB_hide();
}
</script>
好了，至此就完成了對于 GreyBox 的學(xué)習(xí)，這些基本就可以滿足我們?nèi)粘５捻椖啃枰恕?
我們先來看一下它的幾個實例：
(1) 打開網(wǎng)頁：
(2) 顯示一組圖片：
基本使用
(1) 進(jìn)入官網(wǎng)，點擊下載
(2) 解壓。(其中的 installation.html 對其使用進(jìn)行了說明，很簡單，一看就明白。我還是寫一下步驟吧)
(3) 將其中的 greybox 文件夾拷貝到 web 項目根目錄下，注意：一定要放在 web 根目錄下，放在其他目錄或二級目下肯能不能使用，在我的工程里是這么部署的：
（順便說下教訓(xùn)，一開始我將其放在了 js 文件夾下，因為我的 js 腳本都在里面放的，jQuery 也在，可就是不能用。。。最后放在了 根目錄下就可以使用了。）
(4) 現(xiàn)在就可以使用了，我們用一個測試頁來進(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>
這樣就完成了基本的使用。
但是，在實際開發(fā)中，我們需要實現(xiàn)這樣的效果：(1) 通過點擊 button 來彈出模式窗口；(2) 關(guān)閉模式窗口后，刷新父窗口。
通過基本使用，我們可以看到官網(wǎng)的示例都是在點擊一個超鏈接后彈出模態(tài)對話框。
等等。
但對于實際開發(fā)，我們有時需要實現(xiàn)通過點擊 Button 來彈出一個模態(tài)對話框。其實，稍作修改就可以實現(xiàn)了，由于前篇文章已經(jīng)對使用做了說明，這次就直接上代碼了：
(1) 實現(xiàn)按鈕點擊彈出模態(tài)對話框
復(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ā)過程中還會遇到這樣的問題，在彈出窗口進(jìn)行操作后，關(guān)閉時需要對父窗口進(jìn)行刷新。怎么實現(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 怎么實現(xiàn)呢？上代碼，【注意】這個 js 是在子窗口的網(wǎng)頁中寫的：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function close() {
parent.parent.location.reload();
parent.parent.GB_hide();
}
</script>
好了，至此就完成了對于 GreyBox 的學(xué)習(xí)，這些基本就可以滿足我們?nèi)粘５捻椖啃枰恕?
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
ES6常用小技巧總結(jié)【去重、交換、合并、反轉(zhuǎn)、迭代、計算等】
這篇文章主要介紹了ES6常用小技巧,結(jié)合實例形式總結(jié)分析了ES6常見的數(shù)組去重、交換變量、合并數(shù)組、字符串反轉(zhuǎn)、數(shù)組迭代、數(shù)值計算等相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
js實現(xiàn)右下角可關(guān)閉最小化div(可用于展示推薦內(nèi)容)
使用Javascript實現(xiàn)右下角可關(guān)閉最小化div，可以用于展示推薦內(nèi)容，完整源代碼如下，感興趣的各位可以參下哈，希望對大家有所幫助2013-06-06
webpack是一種前端資源構(gòu)建工具,一個靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于Webpack完整打包流程的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
本篇文章主要是對JS判斷文本框內(nèi)容改變事件的簡單實例進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要給大家介紹了7種常見的前端攻擊,包括跨站腳本(XSS)、依賴庫風(fēng)險、跨站請求偽造(CSRF)、點擊劫持(Clickjacking)、內(nèi)容交付網(wǎng)絡(luò)(CDN)劫持、HTTPS降級和中間人攻擊,每種攻擊都有其攻擊方式和防御措施,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了微信小程序獲取用戶信息并保存登錄狀態(tài)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
下面小編就為大家?guī)硪黄猨s 自帶的sort() 方法全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
webpack-mvc 傳統(tǒng)多頁面組件化開發(fā)詳解
這篇文章主要介紹了webpack-mvc 傳統(tǒng)多頁面組件化開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Hash 可以看作是一個 關(guān)聯(lián)數(shù)組，它對每一個值都綁定了一個唯一的鍵（值并不必須是唯一的）， 然而，它不能保證迭代時元素的順序始終一致。因為 JavaScript 程序語言的特性，每個對象實際上都是一個 hash,下面我們就來詳細(xì)探討下。2015-05-05