Ajax 和 XML: 使用 Ajax 實現 lightbox（轉載）

使用 Ajax 技術創建 lightbox 效果、漸變效果、彈出效果和窗口。

級別：初級

Jack D Herrington ([email protected]), 高級軟件工程師, Leverage Software Inc.

2007 年 10 月 29 日

在這個一切都要求新奇的世界中，要吸引用戶的注意實屬不易。瞭解如何在 Ajax 工具中使用 lightbox、彈出、窗口和漸變消息之類的新技術吸引用戶的目光。

這可能是流傳在都市中的一個傳奇故事。很多年之前就有人和我說過這樣一個用戶交互體驗。測試者的座位下面塞了 100 美金，而他正在使用計算機中的桌面應用程序。這個應用程序的狀態欄中顯示了這樣一條信息：“在您的座位下面有 100 美金。”可悲的是，沒有一個參與者能夠發現他座位下面的錢。這個故事告訴我們狀態欄傳遞信息的效率有多低，而且要吸引用戶的注意絕非易事。

本文將介紹如何結合 PHP、動態 HTML（DHTML）和異步的 JavaScript + XML（Ajax）爲內容增色，從而真正吸引用戶的眼球。

工具提示

在瀏覽器中設置狀態欄相當簡單，但是要實現一些有用的功能（比如說彈出一個工具提示）則不是那麼容易。考慮到簡單性，我選擇使用了一個可從網絡上免費獲得的工具提示庫，它構建於出色的 Prototype.js JavaScript 庫之上。清單 1 顯示了這個工具提示的代碼。

清單 1. index.html

                        <html>
                        <head>
                        <script src="prototype.js" type="text/javascript"></script>
                        <script src="tooltip.js" type="text/javascript"></script>
                        <style>
                        body { font-family: arial,verdana; }
                        .popup { padding:10px; border:1px solid #ccc;
                        background:#eee; width:250px; font-size: small; }
                        </style>
                        </head>
                        <body>
                        <div id="book1">Code Generation In Action</div>
                        <div id="popup1" class="popup">
                        </div>
                        </body>
                        <script type="text/javascript">
                        new Ajax.Updater( 'popup1', 'text.php' );
                        new Tooltip('book1', 'popup1')
                        </script>
                        </html>

該頁面首先使用一個 Ajax 調用更新工具提示的內容，方法是使用 Prototype.js 庫中的 Ajax.Updater 類。然後再使用工具提示庫所提供的 Tooltip 類將工具提示分配給 book1 <div> 標記。

清單 2 顯示了該工具提示內容的代碼。

清單 2. text.php

                        An excellent book on code generation and generative programming
                        by Jack Herrington.

現在，可以在瀏覽器中打開頁面以查看效果。顯示的頁面如圖 1 所示。

圖 1. 鼠標未移到文本上

當我把鼠標移到文本上，頁面將彈出一個小窗口，如圖 2 所示。

圖 2. 彈出窗口

工具提示的動態演示

查看工具提示的在線動態演示。

工具提示是一種整潔的頁面呈現方式，並能根據用戶的需要顯示內容。如果某個用戶想了解某項內容的更多信息，只需將鼠標移到該內容上便可顯示詳細信息。這些詳細信息可具有不同的複雜度，可以是圖像、表格和格式化數據。

回頁首

Lightbox

Lightbox 是一種最前沿的創新方法，可以將用戶的注意力集中到頁面上的某個特定元素。在下面的示例中，我在頁面中添加了一個縮略圖，當用戶單擊它時便會在 “lightbox” 中顯示出大圖。

要創建這種效果，我將使用極爲優秀的 Lightbox JS 2.0 庫，它同樣構建於 Prototype.js 框架之上。清單 3 顯示了示例代碼。

清單 3. index.html

                        <html>
                        <head>
                        <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
                        <script src="js/prototype.js" type="text/javascript"></script>
                        <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
                        <script src="js/lightbox.js" type="text/javascript"></script>
                        </head>
                        <body>
                        <a href="images/megan1_400_320.jpg" rel="lightbox">
                        <img src="images/megan1_400_320.jpg" width="100" height="80"
                        alt="Megan" border="0" /></a>
                        </body>
                        </html>

在瀏覽器中打開該頁面時，只能看到縮略圖，如圖 3 所示。

圖 3. 單擊縮略圖之前的顯示效果

當我單擊該縮略圖時，實際大小的圖像將優雅地顯示在窗口中央，如圖 4 所示。

圖 4. 顯示實際大小圖像的 lightbox

此外，背景中的所有其他內容將變成灰色，這樣用戶將更容易注意到頁面中間顯示的內容。

lightbox 的動態演示

查看 lightbox的在線動態演示。

如果您對 lightbox 這個術語還不太熟悉也沒有關係：因爲它是攝影行業中的一個相當深奧的詞彙。在過去膠片攝影的時代，lightbox 是一個 6 英寸高，長寬皆爲幾英尺的盒子形狀的設備，頂部塗有塑性白漆，盒子中間的小燈可以爲整個表面提供照明。因此，我們可以將幻燈片和底片放在 lightbox 上，然後使用一種小型放大鏡來檢查圖像。您可以認爲圖 4 中的效果就是在通過 lightbox 上的放大鏡查看照片。因此，lightbox 的術語便從此而來。

但是，是否可以將圖像換成文本，並實現同樣的效果呢？

文本 lightbox

Particle Tree 這個站點就使用這種與衆不同的方法實現了 lightbox。此方法的優點便是可以顯示使用 Ajax 從服務器獲取的任意 HTML 代碼。我將使用這種方法將額外的文本顯示給用戶。

清單 4 顯示了主頁代碼。

清單 4. index.html

                        <html>
                        <head>
                        <title>
                        Lightbox Text Test
                        </title>
                        <link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
                        <link rel="stylesheet" href="css/lightbox.css" media="screen,projection"
                        type="text/css" />
                        <script type="text/javascript" src="scripts/prototype.js"></script>
                        <script type="text/javascript" src="scripts/lightbox.js"></script>
                        </head>
                        <body>
                        <a href="text.php" class="lbOn">More About This Article</a>
                        </body>
                        </html>

清單 5 中的 HTML 代碼將通過 Ajax 獲取並隨後顯示給用戶。

清單 5. text.php

                        <p>This article covers the basics of AJAX Lightbox that
                        shows text blocks instead of images</p>
                        <p><a href="#" class="lbAction" rel="deactivate">
                        Return to article list</a></p>

以上代碼在瀏覽器中的顯示效果如圖 5 所示。

圖 5. 單擊文本便可獲得更多信息

當我單擊文本時，可以看到頁面內容將突出顯示出來。請參見圖 6。

圖 6. 運行中的文本 lightbox

文本 lightbox 的動態演示

查看文本 lightbox的在線動態演示。

這種方法可以爲頁面上列出的產品或文章顯示額外信息，而不必使用戶離開當前頁面。相反，您將間接地將用戶的注意力轉移到這些內容上。與 HTML 代碼一樣，這些信息可以包括更多的文本內容、圖像，或者甚至是表單（比如說註冊、評論或登錄表單）。

回頁首

窗口

我在上一示例中提到過使用 lightbox 顯示錶單，但是這並不是用戶在使用表單時真正需要的。他們真正需要的是窗口。所幸的是，Prototype 庫提供了一個極好的窗口實現，該窗口實現具有各種不同的皮膚可滿足您的需要。

窗口代碼還將使用 Ajax 通過 Prototype 獲取將在窗口框架中顯示的內容。首先，開發託管窗口的基本頁面，如清單 6 所示。

清單 6. index.html

                        <html>
                        <head>
                        <script type="text/javascript" src="javascripts/prototype.js"></script>
                        <script type="text/javascript" src="javascripts/effects.js"></script>
                        <script type="text/javascript" src="javascripts/window.js"></script>
                        <script type="text/javascript" src="javascripts/window_effects.js"></script>
                        <link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
                        <link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
                        </head>
                        <body>
                        <a href="javascript:void showWindow();">Show Window</a>
                        <script>
                        function showWindow()
                        {
                        win = new Window( { className: 'spread', url: 'test.html',
                        title: 'Simple Window', width:400,
                        height:300, destroyOnClose: true, recenterAuto:false } );
                        win.showCenter();
                        }
                        </script>
                        </body>
                        </html>

此處的 JavaScript 代碼將響應單擊 Show window 按鈕的操作，結果是創建一個具有指定寬度、高度、標題和內容（內容由特定的 URL 指定）的窗口。然後使用 showCenter() 方法顯示窗口，窗口將顯示在在瀏覽器窗口的中部。

清單 7 顯示了窗口的內容。

清單 7. test.html

                        <h1>Registration</h1>
                        <p>You need to first register the product before...</p>

該頁面在瀏覽器的顯示效果如圖 7 所示。

圖 7. 窗口鏈接

頁面中並沒有什麼內容，但是單擊窗口鏈接之後卻是另一番景色。如圖 8 所示。

圖 8. 彈出窗口

有點華而不實的感覺，但是它確實可以吸引用戶的注意力。除了石灰綠之外，您還可以選擇一些不同的皮膚。

但是我真正想要的是彈出表單，不是嗎？我特別想在主頁上實現一個登錄表單，當我單擊 Login 按鈕時便會彈出一個登錄表單。清單 8 顯示了主頁的代碼。

清單 8. form.php

                        <html>
                        <head>
                        <script type="text/javascript" src="javascripts/prototype.js"></script>
                        <script type="text/javascript" src="javascripts/effects.js"></script>
                        <script type="text/javascript" src="javascripts/window.js"></script>
                        <script type="text/javascript" src="javascripts/window_effects.js"></script>
                        <link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
                        <link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
                        </head>
                        <body>
                        <div id="myloginform" style="display:none;overflow:clip;padding:10px;">
                        <form id="loginfrm">
                        <table>
                        <tr><td>Login</td><td><input type="text" name="name" /></td></tr>
                        <tr><td>Password</td><td><input type="password" name="password" /></td></tr>
                        </table>
                        </form>
                        <button οnclick="login()">Login</button>
                        </div>
                        <a href="javascript:void showWindow();">Login</a>
                        <script>
                        var g_loginWindow = null;
                        function login()
                        {
                        new Ajax.Request( 'login.php', {
                        parameters: $('loginfrm').serialize(),
                        method: 'post',
                        onSuccess: function( transport ) {
                        g_loginWindow.close();
                        }
                        } );
                        }
                        function showWindow()
                        {
                        g_loginWindow = new Window( { className: 'spread', title: "Login",
                        destroyOnClose: true,
                        onClose:function() { $('myloginform').style.display = 'none'; } } );
                        g_loginWindow.setContent( 'myloginform', true, true );
                        g_loginWindow.showCenter();
                        }
                        </script>
                        </body>
                        </html>

這次，窗口的內容將直接存放在頁面中。但是，當用戶單擊表單上的 Login 按鈕時，頁面將使用 Ajax.Request 對象向服務器請求登錄表單。清單 9 顯示了這個簡單的登錄腳本，實際中的實現將遠沒有這麼簡單。

清單 9. login.php

                        <true />

這時，當我在瀏覽器中打開該頁面時將看到一個登錄鏈接，如圖 9 所示。

圖 9. login 鏈接

當我單擊該鏈接時，將看到一個非常酷的 Web 2.0 樣式的登錄窗口，如圖 10 所示。

圖 10. login 窗口

窗口的動態演示

查看窗口的在線動態演示。

當用戶單擊 Login 按鈕時，頁面將把用戶名和密碼發送給服務器。然後，服務器將驗證憑證並建立一個會話 cookie，並回復響應，指示頁面返回主頁。

實際上，此類功能可以在應用程序中實現彈出窗口，並讓用戶感覺自己彷彿更像是在使用桌面應用程序，而不是在訪問 Web 頁面。

回頁首

漸變消息

與用戶通信的另一種新方法是漸變消息 — 也就是，這種消息將在屏幕的一個重要位置彈出，告訴用戶某些重要的事情。在本例中，我將使用 Scriptaculous 效果庫（它也構建於 Prototype.js 之上）實現漸變消息。。

首先，我們從清單 10 開始。

清單 10. index.html

                        <html><head>
                        <style>
                        .alert {
                        opacity: 0.0;
                        border:2px dashed black;
                        padding:5px;
                        background:#eee;
                        font-family: arial, verdana;
                        font-weight: bold; }
                        </style>
                        <script src="lib/prototype.js"></script>
                        <script src="src/effects.js"></script>
                        <script>
                        function submit()
                        {
                        new Ajax.Updater( 'result', 'alert.html', {
                        method: 'get',
                        onSuccess: function() {
                        new Effect.Opacity('result',
                        { duration: 2.0, from: 0.0, to: 1.0 } );
                        new Effect.Opacity('result',
                        { delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
                        } }
                        );
                        }
                        </script>
                        </head><body>
                        <div id="result" class="alert"></div><br/><br/>
                        <button οnclick="submit()">Submit</button>
                        </body></html>

在理想情況下，該頁面有點類似含有 Submit 按鈕的表單。然後，當用戶單擊 Submit 按鈕時，服務器接收到提交的表單數據後將返回一個消息。這個消息將突出顯示在某個位置，然後效果將漸漸減弱。在本例中，我省去了表單元素，因此頁面中只有一個 Submit 按鈕。

Submit 按鈕將 Ajax 請求發送給 alert.html 頁面。然後，將該頁面的結果存放在 result <div> 標記中，Scriptaculous 效果類可以使該標記顯示爲漸變效果。

清單 11 顯示了 alert 頁面的代碼。

清單 11. alert.html

                        A new record has been added.

該頁面中瀏覽器中的顯示效果如圖 11 所示。

圖 11. 表單的 Submit 按鈕

還是一樣，頁面中並沒有什麼內容。可以考慮在 Submit 按鈕上面加入一些含有數據的表單字段。

當我單擊 Submit 按鈕時，頁面將突出顯示警告提示，如圖 12 所示。

圖 12. 漸變效果的消息

漸變效果的動態演示

查看漸變的在線動態演示。

幾秒鐘之後，消息將逐漸消失。

這種與用戶交互的方式雖然簡單，但是十分有效。只要別過度使用，它可以直接讓用戶感受到對象的出現和消失。這是人類與生俱來的本能。因此，您會自然地注意到。只要能夠合理地使用這些技巧，吸引用戶的注意力將不再困難。

分享這篇文章……


	將本文提交到 Digg

	發佈到 del.icio.us

	提交到 Slashdot！

結束語

希望本文中的工具可以讓您通過創新的方式實現交互和提示。隨着時間的推移，我確信這些技巧將過度使用，並最終落得與狀態欄一樣的下場。但是在開始階段，這些工具將提供一種有趣、有效且符合 Web 2.0 的吸引用戶注意的方式。

Ajax 和 XML: 使用 Ajax 實現 lightbox（轉載）

Ajax 和 XML: 使用 Ajax 實現 lightbox（轉載）

ASPX頁生成靜態HTML頁(五種方案)

asp.net 頁面事件執行順序

JavaScript 使用面嚮對象的技術創建高級 Web 應用程序

interface abstract與virtual

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結