1. 程式人生 > >jquery外掛——頁面彈出層(GreyBox)

jquery外掛——頁面彈出層(GreyBox)

一、基礎安裝
1.在<head></head>標籤中加入如下程式碼:
<script type="text/javascript">
    var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>
"GB_ROOT_DIR"變數是用來載入彈出層的靜態檔案,當然你也可以將對應的目錄下載下來放在工程目錄中,這裡用相對路徑即可,比如:
<script type="text/javascript">
    var GB_ROOT_DIR = "js/jquery/greybox/";
</script>

2.附加上需要用到的js檔案和css樣式表文件


<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" />
注意:官方有這樣一句"AJS_fx.js is optional, it's used for effects. If you don't wish effects, then don't include AJS_fx.js in your header section. ",中文意思是"AJS_fx.js檔案是

可選的,它是用來做特效的,如果你需要使用特效,可以不用附加此檔案。"這裡個人在用的時候加上了,至於官方說的特效還沒使用過。有知道的朋友可以幫忙新增一下說明。

通過以上兩步便可以再程式中使用greybox外掛了。

二、實戰使用
概述:我在專案中使用時用到了iframe,這樣的話,如果要達到全屏的效果,必須將以上的兩步載入檔案加到你的父級頁面上,然後在iframe中的某個頁面通過訪問父級頁面的方式訪問greybox提供的方

法。我是在父級頁面定義了一個js的方法,程式碼如下:
<script type="text/javascript">
        function showChangePage()
        {
            return GB_show('WinCRM——客戶資源變更', 'Customer_Change_Edit.aspx')
        }
</script>
GB_show(args1,args2)方法是greybox外掛提供的,第一個引數是頁面的名稱,第二個引數是頁面url。我這裡使用的比較簡單,在官方還有更多的方法供大家使用,有興趣大家可以去看看,並幫忙貼出

來大家學習,官網地址:http://orangoo.com/labs/greybox/installation.html
這樣在我iframe頁面中其中的一個頁面呼叫的時候是這樣的,程式碼如下:
<asp:Button ID="btnFrame" runat="server" Text="開啟資源檢視模式" OnClientClick="parent.showFramePage();"/>
如果需要在彈出的頁面使用按鈕自己實現關閉的的話可以使用外掛提供的GB_hide()方法,當然我這裡使用了iframe,所以在使用的時候需要呼叫父級的這個方法,程式碼:parent.parent.GB_hide(); 如

果你還想在關閉後重新整理父級頁面那直接加上parent.location.reload(); 即可。

三、小結
整體來說jquery這個greybox是比較好用的,但是在使用中有個問題一直不能解決:在彈出的頁面中,在其右上角有個"close"關閉連線,想要去改成中文,一直在其檔案中找沒找到,希望大家在使用中

解決了告訴一下本人。