在這個(gè)一切都要求新奇的世界中，要吸引用戶(hù)的注意實(shí)屬不易。了解如何在 Ajax 工具中使用 lightbox、彈出、窗口和漸變消息之類(lèi)的新技術(shù)吸引用戶(hù)的目光。
這可能是流傳在都市中的一個(gè)傳奇故事。很多年之前就有人和我說(shuō)過(guò)這樣一個(gè)用戶(hù)交互體驗(yàn)。測(cè)試者的座位下面塞了 100 美金，而他正在使用計(jì)算機(jī)中的桌面應(yīng)用程序。這個(gè)應(yīng)用程序的狀態(tài)欄中顯示了這樣一條信息：“在您的座位下面有 100 美金。”可悲的是，沒(méi)有一個(gè)參與者能夠發(fā)現(xiàn)他座位下面的錢(qián)。這個(gè)故事告訴我們狀態(tài)欄傳遞信息的效率有多低，而且要吸引用戶(hù)的注意絕非易事。
本文將介紹如何結(jié)合 PHP、動(dòng)態(tài) HTML（DHTML）和異步的 JavaScript + XML（Ajax）為內(nèi)容增色，從而真正吸引用戶(hù)的眼球。
工具提示
在瀏覽器中設(shè)置狀態(tài)欄相當(dāng)簡(jiǎn)單，但是要實(shí)現(xiàn)一些有用的功能（比如說(shuō)彈出一個(gè)工具提示）則不是那么容易。考慮到簡(jiǎn)單性，我選擇使用了一個(gè)可從網(wǎng)絡(luò)上免費(fèi)獲得的工具提示庫(kù)，它構(gòu)建于出色的 Prototype.js JavaScript 庫(kù)之上。清單 1 顯示了這個(gè)工具提示的代碼。
清單 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>
|
該頁(yè)面首先使用一個(gè) Ajax 調(diào)用更新工具提示的內(nèi)容，方法是使用 Prototype.js 庫(kù)中的 Ajax.Updater 類(lèi)。然后再使用工具提示庫(kù)所提供的 Tooltip 類(lèi)將工具提示分配給 book1 <div> 標(biāo)記。
清單 2 顯示了該工具提示內(nèi)容的代碼。
清單 2. text.php
An excellent book on code generation and generative programming
by Jack Herrington.
|
現(xiàn)在，可以在瀏覽器中打開(kāi)頁(yè)面以查看效果。顯示的頁(yè)面如 圖 1 所示。
圖 1. 鼠標(biāo)未移到文本上
當(dāng)我把鼠標(biāo)移到文本上，頁(yè)面將彈出一個(gè)小窗口，如 圖 2 所示。
圖 2. 彈出窗口
工具提示是一種整潔的頁(yè)面呈現(xiàn)方式，并能根據(jù)用戶(hù)的需要顯示內(nèi)容。如果某個(gè)用戶(hù)想了解某項(xiàng)內(nèi)容的更多信息，只需將鼠標(biāo)移到該內(nèi)容上便可顯示詳細(xì)信息。這些詳細(xì)信息可具有不同的復(fù)雜度，可以是圖像、表格和格式化數(shù)據(jù)。
Lightbox
Lightbox 是一種最前沿的創(chuàng)新方法，可以將用戶(hù)的注意力集中到頁(yè)面上的某個(gè)特定元素。在下面的示例中，我在頁(yè)面中添加了一個(gè)縮略圖，當(dāng)用戶(hù)單擊它時(shí)便會(huì)在 “lightbox” 中顯示出大圖。
要?jiǎng)?chuàng)建這種效果，我將使用極為優(yōu)秀的 Lightbox JS 2.0 庫(kù)，它同樣構(gòu)建于 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>
|
在瀏覽器中打開(kāi)該頁(yè)面時(shí)，只能看到縮略圖，如 圖 3 所示。
圖 3. 單擊縮略圖之前的顯示效果
當(dāng)我單擊該縮略圖時(shí)，實(shí)際大小的圖像將優(yōu)雅地顯示在窗口中央，如 圖 4 所示。
圖 4. 顯示實(shí)際大小圖像的 lightbox
此外，背景中的所有其他內(nèi)容將變成灰色，這樣用戶(hù)將更容易注意到頁(yè)面中間顯示的內(nèi)容。
如果您對(duì) lightbox 這個(gè)術(shù)語(yǔ)還不太熟悉也沒(méi)有關(guān)系：因?yàn)樗菙z影行業(yè)中的一個(gè)相當(dāng)深?yuàn)W的詞匯。在過(guò)去膠片攝影的時(shí)代，lightbox 是一個(gè) 6 英寸高，長(zhǎng)寬皆為幾英尺的盒子形狀的設(shè)備，頂部涂有塑性白漆，盒子中間的小燈可以為整個(gè)表面提供照明。因此， 我們可以將幻燈片和底片放在 lightbox 上，然后使用一種小型放大鏡來(lái)檢查圖像。您可以認(rèn)為圖 4 中的效果就是在通過(guò) lightbox 上的放大鏡查看照片。因此，lightbox 的術(shù)語(yǔ)便從此而來(lái)。
但是，是否可以將圖像換成文本，并實(shí)現(xiàn)同樣的效果呢？
文本 lightbox
Particle Tree 這個(gè)站點(diǎn)就使用這種與眾不同的方法實(shí)現(xiàn)了 lightbox。此方法的優(yōu)點(diǎn)便是可以顯示使用 Ajax 從服務(wù)器獲取的任意 HTML 代碼。我將使用這種方法將額外的文本顯示給用戶(hù)。
清單 4 顯示了主頁(yè)代碼。
清單 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 代碼將通過(guò) Ajax 獲取并隨后顯示給用戶(hù)。
清單 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. 單擊文本便可獲得更多信息
當(dāng)我單擊文本時(shí)，可以看到頁(yè)面內(nèi)容將突出顯示出來(lái)。請(qǐng)參見(jiàn) 圖 6。
圖 6. 運(yùn)行中的文本 lightbox
這種方法可以為頁(yè)面上列出的產(chǎn)品或文章顯示額外信息，而不必使用戶(hù)離開(kāi)當(dāng)前頁(yè)面。相反，您將間接地將用戶(hù)的注意力轉(zhuǎn)移到這些內(nèi)容上。與 HTML 代碼一樣，這些信息可以包括更多的文本內(nèi)容、圖像，或者甚至是表單（比如說(shuō)注冊(cè)、評(píng)論或登錄表單）。
窗口
我在上一示例中提到過(guò)使用 lightbox 顯示表單，但是這并不是用戶(hù)在使用表單時(shí)真正需要的。他們真正需要的是窗口。所幸的是，Prototype 庫(kù)提供了一個(gè)極好的窗口實(shí)現(xiàn)，該窗口實(shí)現(xiàn)具有各種不同的皮膚可滿(mǎn)足您的需要。
窗口代碼還將使用 Ajax 通過(guò) Prototype 獲取將在窗口框架中顯示的內(nèi)容。首先，開(kāi)發(fā)托管窗口的基本頁(yè)面，如 清單 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 代碼將響應(yīng)單擊 Show window 按鈕的操作，結(jié)果是創(chuàng)建一個(gè)具有指定寬度、高度、標(biāo)題和內(nèi)容（內(nèi)容由特定的 URL 指定）的窗口。然后使用 showCenter() 方法顯示窗口，窗口將顯示在在瀏覽器窗口的中部。
清單 7 顯示了窗口的內(nèi)容。
清單 7. test.html
<h1>Registration</h1>
<p>You need to first register the product before...</p>
|
該頁(yè)面在瀏覽器的顯示效果如 圖 7 所示。
圖 7. 窗口鏈接
頁(yè)面中并沒(méi)有什么內(nèi)容，但是單擊窗口鏈接之后卻是另一番景色。如 圖 8 所示。
圖 8. 彈出窗口
有點(diǎn)華而不實(shí)的感覺(jué)，但是它確實(shí)可以吸引用戶(hù)的注意力。除了石灰綠之外，您還可以選擇一些不同的皮膚。
但是我真正想要的是彈出表單，不是嗎？我特別想在主頁(yè)上實(shí)現(xiàn)一個(gè)登錄表單，當(dāng)我單擊 Login 按鈕時(shí)便會(huì)彈出一個(gè)登錄表單。清單 8 顯示了主頁(yè)的代碼。
清單 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>
|
這次，窗口的內(nèi)容將直接存放在頁(yè)面中。但是，當(dāng)用戶(hù)單擊表單上的 Login 按鈕時(shí)，頁(yè)面將使用 Ajax.Request 對(duì)象向服務(wù)器請(qǐng)求登錄表單。清單 9 顯示了這個(gè)簡(jiǎn)單的登錄腳本，實(shí)際中的實(shí)現(xiàn)將遠(yuǎn)沒(méi)有這么簡(jiǎn)單。
清單 9. login.php
這時(shí)，當(dāng)我在瀏覽器中打開(kāi)該頁(yè)面時(shí)將看到一個(gè)登錄鏈接，如 圖 9 所示。
圖 9. login 鏈接
當(dāng)我單擊該鏈接時(shí)，將看到一個(gè)非常酷的 Web 2.0 樣式的登錄窗口，如 圖 10 所示。
圖 10. login 窗口
當(dāng)用戶(hù)單擊 Login 按鈕時(shí)，頁(yè)面將把用戶(hù)名和密碼發(fā)送給服務(wù)器。然后，服務(wù)器將驗(yàn)證憑證并建立一個(gè)會(huì)話 cookie，并回復(fù)響應(yīng)，指示頁(yè)面返回主頁(yè)。
實(shí)際上，此類(lèi)功能可以在應(yīng)用程序中實(shí)現(xiàn)彈出窗口，并讓用戶(hù)感覺(jué)自己仿佛更像是在使用桌面應(yīng)用程序，而不是在訪問(wèn) Web 頁(yè)面。
漸變消息
與用戶(hù)通信的另一種新方法是漸變消息 — 也就是，這種消息將在屏幕的一個(gè)重要位置彈出，告訴用戶(hù)某些重要的事情。在本例中，我將使用 Scriptaculous 效果庫(kù)（它也構(gòu)建于 Prototype.js 之上）實(shí)現(xiàn)漸變消息。。
首先，我們從 清單 10 開(kāi)始。
清單 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>
|
在理想情況下，該頁(yè)面有點(diǎn)類(lèi)似含有 Submit 按鈕的表單。然后，當(dāng)用戶(hù)單擊 Submit 按鈕時(shí)，服務(wù)器接收到提交的表單數(shù)據(jù)后將返回一個(gè)消息。這個(gè)消息將突出顯示在某個(gè)位置，然后效果將漸漸減弱。在本例中，我省去了表單元素，因此頁(yè)面中只有一個(gè) Submit 按鈕。
Submit 按鈕將 Ajax 請(qǐng)求發(fā)送給 alert.html 頁(yè)面。然后，將該頁(yè)面的結(jié)果存放在 result <div> 標(biāo)記中，Scriptaculous 效果類(lèi)可以使該標(biāo)記顯示為漸變效果。
清單 11 顯示了 alert 頁(yè)面的代碼。
清單 11. alert.html
A new record has been added.
|
該頁(yè)面中瀏覽器中的顯示效果如 圖 11 所示。
圖 11. 表單的 Submit 按鈕
還是一樣，頁(yè)面中并沒(méi)有什么內(nèi)容。可以考慮在 Submit 按鈕上面加入一些含有數(shù)據(jù)的表單字段。
當(dāng)我單擊 Submit 按鈕時(shí)，頁(yè)面將突出顯示警告提示，如 圖 12 所示。
圖 12. 漸變效果的消息
幾秒鐘之后，消息將逐漸消失。
這種與用戶(hù)交互的方式雖然簡(jiǎn)單，但是十分有效。只要?jiǎng)e過(guò)度使用，它可以直接讓用戶(hù)感受到對(duì)象的出現(xiàn)和消失。這是人類(lèi)與生俱來(lái)的本能。因此，您會(huì)自然地注意到。只要能夠合理地使用這些技巧，吸引用戶(hù)的注意力將不再困難。
結(jié)束語(yǔ)
希望本文中的工具可以讓您通過(guò)創(chuàng)新的方式實(shí)現(xiàn)交互和提示。隨著時(shí)間的推移，我確信這些技巧將過(guò)度使用，并最終落得與狀態(tài)欄一樣的下場(chǎng)。但是在開(kāi)始階段，這些工具將提供一種有趣、有效且符合 Web 2.0 的吸引用戶(hù)注意的方式。
posted on 2007-11-25 11:59
飛鳥(niǎo) 閱讀(275)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
AJAX