在这个一切都要求新奇的世界中Q要吸引用户的注意实属不易。了解如何在 Ajax 工具中?lightbox、弹出、窗口和渐变消息之类的新技术吸引用L目光?
q可能是传在都市中的一个传奇故事。很多年之前有人和我说q这样一个用户交互体验。测试者的座位下面塞了 100 金Q而他正在使用计算Z的桌面应用程序。这个应用程序的状态栏中显CZq样一条信息：“在您的位下面有 100 金?#8221;可悲的是Q没有一个参与者能够发C座位下面的钱。这个故事告诉我们状态栏传递信息的效率有多低，而且要吸引用L注意l非易事?
本文介l如何结?PHP、动?HTMLQDHTMLQ和异步?JavaScript + XMLQAjaxQؓ内容增色Q从而真正吸引用L眼球?
工具提示
在浏览器中设|状态栏相当单，但是要实C些有用的功能Q比如说弹出一个工hC）则不是那么容易。考虑到简单性，我选择使用了一个可从网l上免费获得的工hC库Q它构徏于出色的 Prototype.js JavaScript 库之上?a >清单 1 昄了这个工hC的代码?
清单 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 cR然后再使用工具提示库所提供?Tooltip cd工具提示分配l?book1 <div> 标记?
清单 2 昄了该工具提示内容的代码?/p>
清单 2. text.php
An excellent book on code generation and generative programming
by Jack Herrington.
|
现在Q可以在览器中打开面以查看效果。显C的面??1 所C?
?1. 鼠标未移到文本上
当我把鼠标移到文本上Q页面将弹出一个小H口Q如 ?2 所C?
?2. 弹出H口
工具提示是一U整z的面呈现方式Qƈ能根据用L需要显C内宏V如果某个用h了解某项内容的更多信息，只需鼠标移到该内容上便可显Cl信息。这些详l信息可h不同的复杂度Q可以是囑փ、表格和格式化数据?
Lightbox
Lightbox 是一U最前沿的创新方法，可以用L注意力集中到面上的某个特定元素。在下面的示例中Q我在页面中d了一个羃略图Q当用户单击它时便会?“lightbox” 中显C出大图?
要创U效果，我将使用极ؓ优秀?Lightbox JS 2.0 库，它同hZ Prototype.js 框架之上?a >清单 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>
|
在浏览器中打开该页面时Q只能看到羃略图Q如 ?3 所C?
?3. 单击~略图之前的昄效果
当我单击该羃略图Ӟ实际大小的图像将优雅地显C在H口中央Q如 ?4 所C?
?4. 昄实际大小囑փ?lightbox
此外Q背景中的所有其他内容将变成灰色Q这L户将更容易注意到面中间昄的内宏V?
如果您对 lightbox q个术语q不太熟悉也没有关系Q因为它是摄p业中的一个相当深奥的词汇。在q去胶片摄媄的时代，lightbox 是一?6 英寸高，长宽皆ؓ几英的盒子形状的设备，剙涂有塑性白漆，盒子中间的小灯可以ؓ整个表面提供照明。因此， 我们可以灯片和底片放?lightbox 上，然后使用一U小型放大镜来检查图像。您可以认ؓ?4 中的效果是在通过 lightbox 上的攑֤镜查看照片。因此，lightbox 的术语便从此而来?
但是Q是否可以将囑փ换成文本Qƈ实现同样的效果呢Q?
文本 lightbox
Particle Tree q个站点׃用这U与众不同的Ҏ实现?lightbox。此Ҏ的优点便是可以显CZ?Ajax 从服务器获取的Q?HTML 代码。我用这U方法将额外的文本显C给用户?
清单 4 昄了主代码?/p>
清单 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 获取q后显C给用户?
清单 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 所C?/p>
?5. 单击文本便可获得更多信息
当我单击文本Ӟ可以看到面内容突出显C出来。请参见 ?6?
?6. q行中的文本 lightbox
q种Ҏ可以为页面上列出的品或文章昄额外信息Q而不必用户d当前面。相反，您将间接地将用户的注意力转移到这些内容上。与 HTML 代码一Pq些信息可以包括更多的文本内宏V图像，或者甚x表单Q比如说注册、评论或d表单Q?
H口
我在上一CZ中提到过使用 lightbox 昄表单Q但是这q不是用户在使用表单时真正需要的。他们真正需要的是窗口。所q的是，Prototype 库提供了一个极好的H口实现Q该H口实现h各种不同的皮肤可满您的需要?
H口代码q将使用 Ajax 通过 Prototype 获取在H口框架中显C的内容。首先，开发托窗口的基本面Q如 清单 6 所C?
清单 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 按钮的操作，l果是创Z个具有指定宽度、高度、标题和内容Q内容由特定?URL 指定Q的H口。然后?showCenter() Ҏ昄H口Q窗口将昄在在览器窗口的中部?
清单 7 昄了窗口的内容?/p>
清单 7. test.html
<h1>Registration</h1>
<p>You need to first register the product before...</p>
|
该页面在览器的昄效果??7 所C?
?7. H口链接
面中ƈ没有什么内容，但是单击H口链接之后却是另一番景艌Ӏ如 ?8 所C?
?8. 弹出H口
有点华而不实的感觉Q但是它实可以吸引用户的注意力。除了石灰绿之外Q您q可以选择一些不同的皮肤?
但是我真正想要的是弹单，不是吗？我特别想在主上实现一个登录表单，当我单击 Login 按钮时便会弹Z个登录表单?a >清单 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>
|
q次Q窗口的内容直接存攑֜面中。但是，当用户单击表单上?Login 按钮Ӟ面?Ajax.Request 对象向服务器hd表单?a >清单 9 昄了这个简单的d脚本Q实际中的实现将q没有这么简单?
清单 9. login.php
q时Q当我在览器中打开该页面时看C个登录链接，??9 所C?
?9. login 链接
当我单击该链接时Q将看到一个非帔R?Web 2.0 样式的登录窗口，??10 所C?
?10. login H口
当用户单?Login 按钮Ӟ面把用户名和密码发送给服务器。然后，服务器将验证凭证q徏立一个会?cookieQƈ回复响应Q指C页面返回主c?
实际上，此类功能可以在应用程序中实现弹出H口Qƈ让用h觉自׃佛更像是在用桌面应用程序，而不是在讉K Web 面?
渐变消息
与用户通信的另一U新Ҏ?em>渐变消息 ?也就是，q种消息在屏幕的一个重要位|弹出，告诉用户某些重要的事情。在本例中，我将使用 Scriptaculous 效果库（它也构徏?Prototype.js 之上Q实现渐变消息。?
首先Q我们从 清单 10 开始?/p>
清单 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>
|
在理x况下Q该面有点cM含有 Submit 按钮的表单。然后，当用户单?Submit 按钮Ӟ服务器接收到提交的表单数据后返回一个消息。这个消息将H出昄在某个位|，然后效果渐渐减弱。在本例中，我省M表单元素Q因此页面中只有一?Submit 按钮?
Submit 按钮?Ajax h发送给 alert.html 面。然后，该面的结果存攑֜ result <div> 标记中，Scriptaculous 效果cd以该标记显CZؓ渐变效果?
清单 11 昄?alert 面的代码?/p>
清单 11. alert.html
A new record has been added.
|
该页面中览器中的显C效果如 ?11 所C?/p>
?11. 表单?Submit 按钮
q是一P面中ƈ没有什么内宏V可以考虑?Submit 按钮上面加入一些含有数据的表单字段?
当我单击 Submit 按钮Ӟ面突出显C告提C，??12 所C?/p>
?12. 渐变效果的消?
![渐变效果的消? src=]()
几秒钟之后，消息逐渐消失?/p>
q种与用户交互的方式虽然单，但是十分有效。只要别q度使用Q它可以直接让用h受到对象的出现和消失。这是hcM生俱来的本能。因此，您会自然地注意到。只要能够合理地使用q些技巧，吸引用户的注意力不再困难?
l束?/span>
希望本文中的工具可以让您通过创新的方式实C互和提示。随着旉的推U，我确信这些技巧将q度使用Qƈ最l落得与状态栏一L下场。但是在开始阶D，q些工具提供一U有、有效且W合 Web 2.0 的吸引用h意的方式?/p>
]]>
