在這個一切都要求新奇的世界中，要吸引用戶的注意實屬不易。了解如何在 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 是一個 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
這種方法可以為頁面上列出的產品或文章顯示額外信息，而不必使用戶離開當前頁面。相反，您將間接地將用戶的注意力轉移到這些內容上。與 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 onclick="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
這時，當我在瀏覽器中打開該頁面時將看到一個登錄鏈接，如 圖 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 onclick="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. 漸變效果的消息
幾秒鐘之后，消息將逐漸消失。
這種與用戶交互的方式雖然簡單，但是十分有效。只要別過度使用，它可以直接讓用戶感受到對象的出現和消失。這是人類與生俱來的本能。因此，您會自然地注意到。只要能夠合理地使用這些技巧，吸引用戶的注意力將不再困難。
結束語
希望本文中的工具可以讓您通過創新的方式實現交互和提示。隨著時間的推移，我確信這些技巧將過度使用，并最終落得與狀態欄一樣的下場。但是在開始階段，這些工具將提供一種有趣、有效且符合 Web 2.0 的吸引用戶注意的方式。
posted on 2007-11-25 11:59
飛鳥 閱讀(275)
評論(0) 編輯 收藏 所屬分類:
AJAX