隨筆-17  評論-64  文章-79  trackbacks-1
          在這個一切都要求新奇的世界中,要吸引用戶的注意實屬不易。了解如何在 Ajax 工具中使用 lightbox、彈出、窗口和漸變消息之類的新技術(shù)吸引用戶的目光。

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

          本文將介紹如何結(jié)合 PHP、動態(tài) HTML(DHTML)和異步的 JavaScript + XML(Ajax)為內(nèi)容增色,從而真正吸引用戶的眼球。

          工具提示

          在瀏覽器中設(shè)置狀態(tài)欄相當(dāng)簡單,但是要實現(xiàn)一些有用的功能(比如說彈出一個工具提示)則不是那么容易??紤]到簡單性,我選擇使用了一個可從網(wǎng)絡(luò)上免費(fèi)獲得的工具提示庫,它構(gòu)建于出色的 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 調(diào)用更新工具提示的內(nèi)容,方法是使用 Prototype.js 庫中的 Ajax.Updater 類。然后再使用工具提示庫所提供的 Tooltip 類將工具提示分配給 book1 <div> 標(biāo)記。

          清單 2 顯示了該工具提示內(nèi)容的代碼。


          清單 2. text.php
                      An excellent book on code generation and generative programming
                      by Jack Herrington.
                      

          現(xiàn)在,可以在瀏覽器中打開頁面以查看效果。顯示的頁面如 圖 1 所示。


          圖 1. 鼠標(biāo)未移到文本上
          鼠標(biāo)未移到文本上

          當(dāng)我把鼠標(biāo)移到文本上,頁面將彈出一個小窗口,如 圖 2 所示。


          圖 2. 彈出窗口
          彈出窗口
          工具提示的動態(tài)演示

          查看 工具提示單擊鏈接在新窗口中查看工具提示演示 的在線動態(tài)演示。

          工具提示是一種整潔的頁面呈現(xiàn)方式,并能根據(jù)用戶的需要顯示內(nèi)容。如果某個用戶想了解某項內(nèi)容的更多信息,只需將鼠標(biāo)移到該內(nèi)容上便可顯示詳細(xì)信息。這些詳細(xì)信息可具有不同的復(fù)雜度,可以是圖像、表格和格式化數(shù)據(jù)。





          回頁首


          Lightbox

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

          要創(chuàng)建這種效果,我將使用極為優(yōu)秀的 Lightbox JS 2.0 庫,它同樣構(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>
                      

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


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

          當(dāng)我單擊該縮略圖時,實際大小的圖像將優(yōu)雅地顯示在窗口中央,如 圖 4 所示。


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

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

          lightbox 的動態(tài)演示

          查看 lightbox單擊鏈接在新窗口中查看工具提示演示 的在線動態(tài)演示。

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

          但是,是否可以將圖像換成文本,并實現(xiàn)同樣的效果呢?

          文本 lightbox

          Particle Tree 這個站點就使用這種與眾不同的方法實現(xiàn)了 lightbox。此方法的優(yōu)點便是可以顯示使用 Ajax 從服務(wù)器獲取的任意 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. 單擊文本便可獲得更多信息
          單擊文本便可獲得更多信息

          當(dāng)我單擊文本時,可以看到頁面內(nèi)容將突出顯示出來。請參見 圖 6。


          圖 6. 運(yùn)行中的文本 lightbox
          運(yùn)行中的文本 lightbox
          文本 lightbox 的動態(tài)演示

          查看 文本 lightbox單擊鏈接在新窗口中查看工具提示演示 的在線動態(tài)演示。

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





          回頁首


          窗口

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

          窗口代碼還將使用 Ajax 通過 Prototype 獲取將在窗口框架中顯示的內(nèi)容。首先,開發(fā)托管窗口的基本頁面,如 清單 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)建一個具有指定寬度、高度、標(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>
                      

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


          圖 7. 窗口鏈接
          窗口鏈接

          頁面中并沒有什么內(nèi)容,但是單擊窗口鏈接之后卻是另一番景色。如 圖 8 所示。


          圖 8. 彈出窗口
          彈出窗口

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

          但是我真正想要的是彈出表單,不是嗎?我特別想在主頁上實現(xiàn)一個登錄表單,當(dāng)我單擊 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>
                      

          這次,窗口的內(nèi)容將直接存放在頁面中。但是,當(dāng)用戶單擊表單上的 Login 按鈕時,頁面將使用 Ajax.Request 對象向服務(wù)器請求登錄表單。清單 9 顯示了這個簡單的登錄腳本,實際中的實現(xiàn)將遠(yuǎn)沒有這么簡單。


          清單 9. login.php
                      <true />
                      

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


          圖 9. login 鏈接
          login 鏈接

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


          圖 10. login 窗口
          login 窗口
          窗口的動態(tài)演示

          查看 窗口單擊鏈接在新窗口中查看窗口演示 的在線動態(tài)演示。

          當(dāng)用戶單擊 Login 按鈕時,頁面將把用戶名和密碼發(fā)送給服務(wù)器。然后,服務(wù)器將驗證憑證并建立一個會話 cookie,并回復(fù)響應(yīng),指示頁面返回主頁。

          實際上,此類功能可以在應(yīng)用程序中實現(xiàn)彈出窗口,并讓用戶感覺自己仿佛更像是在使用桌面應(yīng)用程序,而不是在訪問 Web 頁面。





          回頁首


          漸變消息

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

          首先,我們從 清單 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 按鈕的表單。然后,當(dāng)用戶單擊 Submit 按鈕時,服務(wù)器接收到提交的表單數(shù)據(jù)后將返回一個消息。這個消息將突出顯示在某個位置,然后效果將漸漸減弱。在本例中,我省去了表單元素,因此頁面中只有一個 Submit 按鈕。

          Submit 按鈕將 Ajax 請求發(fā)送給 alert.html 頁面。然后,將該頁面的結(jié)果存放在 result <div> 標(biāo)記中,Scriptaculous 效果類可以使該標(biāo)記顯示為漸變效果。

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


          清單 11. alert.html
                      A new record has been added.
                      

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


          圖 11. 表單的 Submit 按鈕
          表單的 Submit 按鈕

          還是一樣,頁面中并沒有什么內(nèi)容??梢钥紤]在 Submit 按鈕上面加入一些含有數(shù)據(jù)的表單字段。

          當(dāng)我單擊 Submit 按鈕時,頁面將突出顯示警告提示,如 圖 12 所示。


          圖 12. 漸變效果的消息
          漸變效果的消息
          漸變效果的動態(tài)演示

          查看 漸變單擊鏈接在新窗口中查看漸變效果演示 的在線動態(tài)演示。

          幾秒鐘之后,消息將逐漸消失。

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

          分享這篇文章……

          digg 將本文提交到 Digg
          del.icio.us 發(fā)布到 del.icio.us

          結(jié)束語

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

          posted on 2007-11-25 11:59 飛鳥 閱讀(276) 評論(0)  編輯  收藏 所屬分類: AJAX
          主站蜘蛛池模板: 日喀则市| 元江| 文山县| 千阳县| 黄大仙区| 白银市| 山东| 澎湖县| 民丰县| 合作市| 板桥市| 姚安县| 武威市| 池州市| 嘉兴市| 栾城县| 寿阳县| 龙州县| 洪泽县| 贞丰县| 五河县| 玉龙| 渭源县| 土默特右旗| 扬州市| 道真| 监利县| 福泉市| 巩留县| 古丈县| 大港区| 普陀区| 绩溪县| 阿坝县| 巴塘县| 封开县| 荔波县| 高要市| 五河县| 文成县| 中超|