ASP.NET 使用 Greybox 說明 greybox高級用法

ASP.NET 使用 Greybox 說明

 

ASP.NET 使用 Greybox 說明

最近很容易可以看到這個效果，也就是當您點選網頁中的圖片或連結時，背景會立即變暗並且出現 Loading… 然後跳出一個美美的方框顯示圖片或網頁，這種效果就叫做 Lightbox。

Greybox除了可以用於圖片和網頁外、連 flash、影片都可以顯示在 Lightbox 彈出的方框裡面。

 

一、安裝

下載程式(http://orangoo.com/labs/GreyBox/Download/)

解壓縮放在網站根目錄

二、使用方法

‘前其宣告

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"">")

System.Web.HttpContext.Current.Response.Write("var GB_ROOT_DIR = ""greybox/"";")

System.Web.HttpContext.Current.Response.Write("</script>")

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"" src=""greybox/AJS.js""></script>")

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"" src=""greybox/AJS_fx.js""></script>")

System.Web.HttpContext.Current.Response.Write("<script type=""text/javascript"" src=""greybox/gb_scripts.js""></script>")

System.Web.HttpContext.Current.Response.Write("<link href=""greybox/gb_styles.css"" rel=""stylesheet"" type=""text/css"" />")

‘呼叫Founction(A Href方式)

‘範例1：秀出200*100網頁，標題為”警告訊息”，導向到message.aspx

System.Web.HttpContext.Current.Response.Write("<a href=""message.aspx"" title=""警告訊息"" rel=""gb_page_center[200, 100]"" >秀200*100網頁</a>")

‘範例2：開啟個全版的Google網頁

        System.Web.HttpContext.Current.Response.Write("<a href=""http://google.com/"" title=""Google"" rel=""gb_page_fs[]"">Launch google.com in fullscreen window</a>")

‘範例3：開啟第一個圖片

        System.Web.HttpContext.Current.Response.Write("<a href=""http://orangoo.com/labs/greybox/static_files/night_valley.jpg"" rel=""gb_imageset[nice_pics]"" title=""Page1""><img src=""http://orangoo.com/labs/greybox/static_files/night_valley_thumb.jpg"" /></a>")

‘開啟第二張圖片

System.Web.HttpContext.Current.Response.Write("<a href=""http://orangoo.com/labs/greybox/static_files/night_valley.jpg"" rel=""gb_imageset[nice_pics]"" title=""Page2""><img src=""http://orangoo.com/labs/greybox/static_files/night_valley_thumb.jpg"" /></a>")

‘呼叫Function(直接秀出)

System.Web.HttpContext.Current.Response.Write("<script>AJS.AEV(window, 'load', function() { GB_showCenter(""Hello world"",""../message.aspx"",200,200); });</script>")

三、問與答

原文地址

Q:我需要下載哪些檔以使GreyBox工作?

你只需要解壓後的GreyBox檔夾中的GreyBox檔夾即可。

Q:圖片無法顯示，或只在位於GreyBox檔夾中才顯示?

你的GB_ROOT_DIR沒有設置正確。

Q:我怎樣製作自己的關閉鏈結/按鈕?

<a href="#" οnclick="parent.parent.GB_hide();">My Close Button</a>

Q:我怎樣用GreyBox載入頁面?

GreyBox用的是AJS庫自帶的頁面載入命令
AJS.AEV(window, 'load', function() { GB_show("Hello world","http://google.com"); });

Q:怎樣使GreyBox不出現載入頁面?

標準的GB_show如下:

GB_show = function(caption, url, /* optional */ height, width, callback_fn) {
var options = {
caption: caption,
height: height || 500,
width: width || 500,
fullscreen: false,
callback_fn: callback_fn
}
var win = new GB_Window(options);
return win.show(url);
}

因為在greybox/base/base.js裏，我們默認的參數是這樣的:

init: function(options) {
this.type = "page";
this.overlay_click_close = false;
this.salt = 0;
this.root_dir = GB_ROOT_DIR;
this.callback_fns = [];
this.reload_on_close = false;
this.src_loader = this.root_dir + 'loader_frame.html';
this.show_loading = true;
AJS.update(this, options);
},

可以看到show_loading默認參數為true，所以我們可以新建一個函數(暫時命名為GB_myShow)

GB_myShow = function(caption, url, /* optional */ height, width, callback_fn) {
var options = {
caption: caption,
height: height || 500,
width: width || 500,
fullscreen: false,
show_loading: false,
callback_fn: callback_fn
}
var win = new GB_Window(options);
return win.show(url);
}

注意裏面的show_loading為false，接著引用這個函數即可

<a href="http://google.com/" οnclick="return GB_myShow('Google', this.href)">Visit Google</a>

同理，我們還可以對overlay_click_close進行修改，以實現點擊關閉的效果。
Q:使用WordPress?
WordPress可以創建二級目錄，所以請使用絕對路徑

<script type="text/javascript" src="http://www.my-wordpress-site.com/greybox/AJS.js"></script><script type="text/javascript" src="http://www.my-wordpress-site.com/greybox/AJS_fx.js"></script><script type="text/javascript" src="http://www.my-wordpress-site.com/greybox/gb_scripts.js"></script><link href="http://www.my-wordpress-site.com/greybox/gb_styles.css" rel="stylesheet" type="text/css">

 

Q:使用Google Maps?

用Google API或到論壇尋求幫助。

Q:在用Dreamweaver製作的網頁中無法使用?

從腳本中刪去函數MM_imagePreloader，然後修改

<body οnlοad="...."> to just <body>

greybox高級用法

由於項目要用到彈出窗口，或者叫做模擬窗口，這段時間就研究了下，解決方案很多，比如，window.open();window.showDialog();用層模擬，框架+DIV+Javascript....
用window.open()；這種方法的缺點是，會被瀏覽器或者相關軟件給屏蔽掉。用層模擬的話，如果想實現較複雜點的窗口，就比較困難，第三種方法是綜合了所有的網頁製作知識，可以提供個很好的解決方案。但是，第三種實現起來，對於Javascript知識不夠的人來說，很難完成。前段時間在網上逛的時候，發現了個好的解決方案：GreyBox.經過反覆研究，發現，GreyBox幾乎可以完成所有的彈出窗口（但是，好像對框架中的框架不太支持）。爲了方便使用，我把GreyBox封裝爲一個控件。現在把用法貼出來：
1.涉及到的文件:GreyBox.dll(動態庫) greyboxloader.aspx,greyboxloader.aspx.cs (加載網頁的框架),gb_styles.css(樣式表)
2.添加文件:
   ① 添加引用GreyBox.dll 到Bin文件夾
   ② 添加greyboxloader.aspx,greyboxloader.aspx.cs到項目的根目錄.
   ③ 添加gb_styles.css文件到imges/css/ 文件夾下
3.調用方法:
   ①引用控件：
     在頁面頂部加入代碼：<%@ Register Assembly="GreyBox" Namespace="GreyBox" TagPrefix="cc1" %>
     在<form></form>之間添加代碼：<cc1:GreyBox id="Geybox1" runat="server"></cc1:GreyBox>
   ②加載CSS文件:
   HtmlLink myHtmlLink = new HtmlLink();
   myHtmlLink.Href = "images/css/gb_styles.css";
   myHtmlLink.Attributes.Add("rel", "stylesheet");
   myHtmlLink.Attributes.Add("type", "text/css");
   Page.Header.Controls.Add(myHtmlLink);  
   ③註冊彈出新窗口事件(以Button爲例):
   this.Button1.Attributes.Add("onclick", "return GB_showCenter('修改密碼', 'echangepw.aspx',200,390)");
   GB_showCenter('title','url',height,width)方法的參數說明:
   title:彈出窗口的標題
   url:網址或者網頁文件名
   height:彈出窗口的高度
   width:彈出窗口的寬度
   這樣,點擊Button1就可以彈出一個窗口了.
4.方法:
   關閉窗口:
   Response.Write("<script language=javascript>parent.parent.GB_hide();</script>");
   提交併關閉窗口:  
   有框架的情況(IFRAME)
   Response.Write("<script language=javascript>parent.parent.document.forms(0).submit();</script>");
   無框架的情況
   Response.Write("<script language=javascript>top.window.document.forms(0).submit();</script>");
原始的GreyBox文件下載：http://www.cnblogs.com/Files/coding1016/GreyBox_v5_5.rar
封裝後的GreyBox文件下載：http://www.cnblogs.com/Files/coding1016/GreyBox(2005).zip
說明：Greybox的所有資源歸其原作者所有，感興趣的可以去其網站看。上面有詳盡的介紹，當然，也可以和我討論，我很願意和大家分享。

http://hi.baidu.com/xiao%5Fwei2008/blog/item/9dd3b41b2d89c9ffaf513385.html