DIV CSS 佈局教程網

18.3 The User Interface, Revisited

傳統的Web應用程序提供的與用戶交互的界面比傳統的桌面應用程序要少。它們不是真的不需要。使用增強的Web 2.0這種情況有了些改變，就像我們給出的帶有AJax的Web頁。

Prototype庫克服了這個問題，它幫助你的應用程序以一種直覺的方式與用戶通信。Oh，這也是玩笑。

除了支持AJax調用外，Prototype庫也提供了豐富的，有用的對象，這會讓你生活輕松並會讓你的用戶得到更好的體驗。

由Prototype庫提供的功能被分成下面幾組：

1、AJax調用(我們已經討論過了)

2、文檔對象模型(DOM)的處理

3、可視特性(Visual effects)

Document Object Model Manipulation

在JavaScript內對DOM處理的標准支持是麻煩的，沉悶的，所以Prototype為常用操作提供了方便的縮寫。這包括了JavaScript內的所有功能，並且它可以從提交給浏覽器的頁內被調用。

1、$(id) 傳遞給$()方法的是個字符串，並且它返回帶有給定id的DOM元素。另外，它返回它的參數。(這種行意味著你即可以傳遞一個元素的 id= 屬性也可傳遞元素本身，並且會得到一個被返回的元素。)

$('mydiv').style.border = "1px solid red"; /* sets border on mydiv */

2、Element.toggle(element, ...) 它會釘住給出的元素，而不管此元素是否被顯示。在內部，它在’inline’和’none’之間切換CSS顯示屬性的值。

Element.toggle('mydiv'); /* toggles mydiv */

Element.toggle('div1', 'div2', 'div3'); /* toggles div1-div3 */

3、Element.show(element, ...) 確保做為參數被其接受的所有元素將被顯示。

Element.show('warning'); /* shows the element with id 'warning' */

4、Element.hide(element, ...) 與 Element.show( ) 相反。

5、Element.remove(element) 從DOM中完全移出一個元素。

Element.remove('mydiv'); /* completely erase mydiv */

6、Insertion methods 各種插入方法可以容易地添加Html 段給現有的元素。這些描述放在18.4節中。

Visual Effects

因為AJax在後台工作，它對用戶是透明的。服務器可以接受一個AJax請求，但是用戶不必得到這個請求的任何反饋。浏覽器甚至不指出加載中的頁。用戶可以通過單擊在一個to-do列表中刪除一個條目，但那個按鈕會發送一個請求給服務端，但是沒有反饋，那麼用戶是如何知道發生了什麼事呢？典型地，如果它們沒有看到發生什麼，多數用戶會一遍又一遍地單擊按鈕。

那麼我們的工作是做浏覽器不工作時提供一個反饋。我們需要讓用戶知道，它能看到發生了什麼事情。這可分成兩步來做。首先，我們可以使用各種DOM處理技術來讓浏覽器顯示服務端發生的事情。但是，只有這個途徑還不夠。

例如，用link_to_remote()調用從你的數據庫刪除一個記錄，然後傾空顯示這個數據的DOM元素。對於你的用戶，元素似乎在它們的視野中消失了。在一個傳統桌面應用程序中，這不是個大問題，因為用戶會接受這種行為。在Web應用程序中，這可能引起問題：你的用戶不可能得到它。

這就是第二步做的。你應該使用effects來提供對已做完成的修改的反饋。如果記錄以一種動畫方式或漸漸隱出的方式退出，你的用戶會很高興，並相信它的動作起作用了。

Visual effects 支持被綁定到它自己的JavaScript庫，effects.JS內。因為它依賴於prototype.JS，所以在你想在你的站點內使用effects時，將需要包括這兩者。(或許通過編輯layout模板。)

<%= Javascript_include_tag "prototype", "effects" %>

有兩種類型的effects：one-shot effects 和可重復調用的effects 。

One-Shot Effects

這些effects用於為用戶提供一個清晰的消息：有時候會離開，或者有時候被修改或添加。所有這些effects接收一個參數，你的頁內的一個元素。你應該使用包含一個元素id的JavaScript字符串：newEffect.Fade(‘id_of_an_element’)。如果你在一個元素的事件內使用一個effect，你也可以使用 new Effect.Fade(this)語法—這種方式下你不必使用一個id屬性，除非你需要它。

1、Effect.Appear(element) 這個effect修改給定元素的透明性，從%0到%100，平滑地衰退。

2、Effect.Fade(element) 與Effect.Appear()相反—元素平滑地淡出，The opposite of Effect.Appear( )—the element will fade out smoothly, and its display CSS property will be set to none at the end (which will take the element out of the normal page flow).

3、Effect.Highlight(element) 在元素上使用傑出 Yellow Fade 技術，讓背景從黃色平滑地變成白色。最好的方式不只是在浏覽器上告訴你的用戶有些值改變了，在服務器上也要這樣。

4、Effect.Puff(element) 創建一個元素在逐漸擴大的煙圈中消失的幻覺。以同樣的時間梯度，元素漸漸消失。在動畫之後，顯示特性將被設置為 none(見圖18.7)。

5、Effect.Squish(element) 使元素越來越小平滑地消失。

圖18.7是由下面模板生成的。頂部的代碼是個幫助方法，它交互設置格式子內正方體的風格。底部的循環創建初始化了16個方格。當一個Destroy鏈接被單擊時，控制器內的destroy動作被調用。在這個例子中，控制器不做任何事，but in real life it might remove a remove from a database table. 動作完成時，, the Puff effect is invoked on the square that was clicked, and away it goes.

<% def style_for_square(index)

color = (index % 2).zero? ? "#444" : "#ccc"

%{ width: 150px; height: 120px; float: left;

padding: 10px; color: #fff; text-align:center;

background: #{color} }

end %>

<% 16.times do |i| %>

<div id="mydiv<%= i %>" style="<%= style_for_square(i) %>">

<div style="font-size: 5em;"><%= i %></div>

<%= link_to_remote("Destroy",

:complete => "new Effect.Puff('mydiv#{i}')",

:url => { :action => :destroy, :id => i }) %>

</div>

<% end %>

Repeatedly Callable Effects

1、Effect.Scale(element, percent) 影響指定元素的平滑縮放比例。如果你縮放一個<div>，則它包含的所有元素必須有它們以 em為單位設置的寬和高度。如果你縮放一個圖像，寬和高不要求必須設置。

讓我們在一個圖像上完成一些縮放。

<%= image_tag("image1",

:onclick => "new Effect.Scale(this, 100)") %>

如果你對你的字體尺寸使用了em單位，你也可以縮放文本。

<%= content_tag("div",

"Here is some text that will get scaled.",

:style => "font-size:1.0em; width:100px;",

:onclick => "new Effect.Scale(this, 100)") %>

2、Element.setContentZoom(element, percent) 這會以一種非動畫的方式來設置文本和其它 使用em單位元素的縮放。

<div id="outerdiv"

style="width:200px; height:200px; border:1px solid red;">

<div style="width:10em; height:2em; border:1px solid blue;">

First inner div

</div>

<div style="width:150px; height: 20px; border:1px solid blue;">

Second inner div

</div>

</div>

<%= link_to_function("Small", "Element.setContentZoom('outerdiv', 75)") %>

<%= link_to_function("Medium", "Element.setContentZoom('outerdiv', 100)") %>

<%= link_to_function("Large", "Element.setContentZoom('outerdiv', 125)") %>

注意第二個內部<div>的尺寸沒有修改，因為它沒有使用em單位。

18.4 Advanced Techniques

這一節我們將查看一些更高級的AJax。

Replacement Techniques

就像我們先前提到的，Progotype庫提供了一些高級的替換技術來只覆寫一個元素的內容。你使用各種insertion對象來調用它們。

1、Insertion.Top(element, content) 在一個元素開始之後，插入一個Html段。

new Insertion.Top('mylist', '<li>Wow, I'm the first list item!</li>');

2、Insertion.Bottom(element, content) 在一個元素結束之前，立即插入一個Html段。例如，你可以使用這個來插入新表格行到<table>元素的尾部，或者是一個<ol>或<ul>元素尾部的一個新列表條目。

new Insertion.Bottom('mytable', '<tr><td>We've a new row here!</td></tr>');

3、Insertion.Before(element, content) 在一個元素開始之前，插入一個Html段。

new Insertion.Before('mypara', '<h1>I'm dynamic!</h1>');

4、Insertion.After(element, content) 在一個元素結束之後，插入一個Html段。

new Insertion.After('mypara', '<p>Yet an other paragraph.</p>');

More on Callbacks

你可用link_to_remote()，form_remote_tag()，和observe_xxx方法使用四個JavaScript回調。這些回調自動訪問稱為 request 的 JavaScript 變量，此變量包含相應的SMLHttpRequest對象。

1、:loading( ) 在XMLHttpRequest開始發送數據給服務端時被調用。

2、:loaded( ) 所有數據已被發送到服務端，XMLHttpRequest在等待服務器做出應答時被調用。

3、:interactive( ) 當數據從服務端返回時，這個事件被觸發。注意，這個事件的實現是指定浏覽器的。

4、:complete( ) 在接收完服務端應答的所有數據後被調用。

現在，你或許不想使用 :loaded() 和 :interactive() 回調—它們的行為依據浏覽器而不同。:loading()和:complete()將在所有支持的浏覽器上工作並總是會被正確地調用。

link_to_remote( ) 有幾個提供了更多靈活性的，額外的參數。

1、:confirm 使用一個確認對話框，就像用於link_to()的:confirm。

2、:condition 提供一上可被計算(在單擊連接時)的JavaScript表達式；如果表達式返回true，遠程請求將會開始。

3、:before,:after 在AJax調用前後立即計算一個JavaScript表達式。(注意 :after不等待調用返回。可使用:complete回調代替。)

request對象持有一些有用的方法。

1、request.responseText 返回由服務端提供的應答體(在字符串)。

2、request.status 返回服務端的HTTP狀態碼(如，200意味成功，404是沒找到)。

3、request.getResponseHeader(name) 返回服務端提供的應答內給定header的值。