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

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/

　　我們先來看一下它的幾個實例：

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

(2) 顯示一組圖片：

 

　　基本使用

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

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

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

　?。槺阏f下教訓(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)文章

  • 基于javascript處理nginx請求過程詳解

    基于javascript處理nginx請求過程詳解

    這篇文章主要介紹了基于javascript處理nginx請求過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-07-07
  • javascript面向?qū)ο笾x成員方法實例分析

    javascript面向?qū)ο笾x成員方法實例分析

    這篇文章主要介紹了javascript面向?qū)ο笾x成員方法,實例分析了成員方法的定義與使用技巧,需要的朋友可以參考下
    2015-01-01
  • 小程序關(guān)于請求同步的總結(jié)

    小程序關(guān)于請求同步的總結(jié)

    這篇文章主要介紹了小程序關(guān)于請求同步的總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • 原生javascript實現(xiàn)的一個簡單動畫效果

    原生javascript實現(xiàn)的一個簡單動畫效果

    下面小編就為大家?guī)硪黄鷍avascript實現(xiàn)的一個簡單動畫效果。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-03-03
  • js實現(xiàn)不提示直接關(guān)閉網(wǎng)頁窗口

    js實現(xiàn)不提示直接關(guān)閉網(wǎng)頁窗口

    本文主要介紹了js實現(xiàn)不提示直接關(guān)閉網(wǎng)頁窗口的方法。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-03-03
  • 詳解webpack模塊加載器兼打包工具

    詳解webpack模塊加載器兼打包工具

    這篇文章主要介紹了webpack模塊加載器兼打包工具，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解js的作用域、預(yù)解析機制

    詳解js的作用域、預(yù)解析機制

    本篇文章主要給大家詳細(xì)分析了js的作用域、預(yù)解析機制以及相關(guān)代碼分析，對此感興趣的朋友學(xué)習(xí)下吧。
    2018-02-02
  • nuxt中使用路由守衛(wèi)的方法步驟

    nuxt中使用路由守衛(wèi)的方法步驟

    這篇文章主要介紹了nuxt中使用路由守衛(wèi)的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • 表單序列化與jq中的serialize使用示例

    表單序列化與jq中的serialize使用示例

    這篇文章主要介紹了表單序列化與jq中的serialize使用,需要的朋友可以參考下
    2014-02-02
  • 使用JavaScript制作待辦事項列表的示例代碼

    使用JavaScript制作待辦事項列表的示例代碼

    這篇文章主要介紹了如何使用 JavaScript創(chuàng)建待辦事項列表HTML的完整信息和教程，文中但是示例代碼講解詳細(xì)，感興趣的同學(xué)可以動手試一試
    2022-01-01

最新評論