国产日韩影院在线,欧美日韩制服诱惑在线观看,欧美日韩高清精品一区二区

用 JavaScript 創(chuàng)建模塊化的交互用戶界面

原創(chuàng)|其它|編輯：郝浩|2012-11-26 10:12:33.000|閱讀 802 次

概述：通過本文，了解使用拖放功能移動 Web 頁面的不同部分的技巧。分別實現(xiàn)交互性的不同方面，然后再將它們組合在一起，這樣便于靈活定制頁面，也讓您的 Web 用戶非常滿意。

通過本文，了解使用拖放功能移動 Web 頁面的不同部分的技巧。分別實現(xiàn)交互性的不同方面，然后再將它們組合在一起，這樣便于靈活定制頁面，也讓您的 Web 用戶非常滿意。

JavaScript 是一種功能強大的語言，可用于創(chuàng)建基于 Web 的應(yīng)用程序。它已經(jīng)足夠穩(wěn)定和成熟，完全可以創(chuàng)建與傳統(tǒng)桌面應(yīng)用程序相抗衡的程序，因為后者在穩(wěn)定性和特性豐富性方面都要勝出一籌。但 JavaScript 最初只是用來向靜態(tài) Web 頁面添加某些交互性，使它不再是靜態(tài)頁面，它現(xiàn)在還用于此目的。

我將要展示的這個技巧的關(guān)鍵之處是如何恰當?shù)貥?gòu)建頁面，使它能與 JavaScript 代碼交互。通常，頁面都是通過頭腦里固有的 JavaScript 代碼構(gòu)造的。但是，盡管如此，很多時候您都需要向現(xiàn)有頁面內(nèi)添加新的交互特性。而這往往需要一些技巧，因為 JavaScript 代碼必須遍歷文檔結(jié)構(gòu)并在合適的位置添加代碼，而且通常還要求不影響現(xiàn)有的結(jié)構(gòu) — 和頁面上已有的 JavaScript 代碼。總之，要將對系統(tǒng)的影響最小化。

可切換系統(tǒng)

本文介紹了一種方法，它通過移動頁面的不同部分來激活頁面。具體來講，就是通過將一個部分拖放到另一個部分之上從而實現(xiàn)可切換部分的切換。

要激活這些部分，只需向其添加 class 參數(shù)并加載一個 JavaScript 文件。可以通過向 <body> 標記添加 onload 方法來激活代碼，此方法會在頁面加載之后立即啟動代碼。代碼會處理隨后的事情。

注意：本文示例所對應(yīng)的源代碼可以點擊這里下載。

此外，可以盡量多地使用抽象來構(gòu)造代碼。程序的不同元素通常都不必要地相互纏結(jié)，UI 代碼更是這樣。可切換系統(tǒng)由不同的塊構(gòu)建而成，每個塊實現(xiàn)交互性的不同部分。這些塊結(jié)合起來就能實現(xiàn)簡單無縫的界面，該界面對于 UI 的試驗和調(diào)優(yōu)都很關(guān)鍵。

可切換界面

可切換系統(tǒng)很容易使用。先由 Web 頁面設(shè)計人員將某些部分標志為可切換的。然后就可以在任何一個可切換元素上單擊并將該元素拖放到另一個可切換元素。放開鼠標按鈕后，這兩個元素就完成了交換。

為了能清楚展示所發(fā)生的事情，可以使用一些標準的 GUI 操作。

突出顯示被拖動的元素

當?shù)谝淮螁螕艨汕袚Q元素時，在光標下面會出現(xiàn)一個透明的矩形。這個矩形由 coveringDiv() 函數(shù)創(chuàng)建，它剛好能覆蓋這個可切換元素。實際上是將這個矩形拖放到另一個元素。當拖放時，只有這個透明的矩形會移動 — 初始的元素保持不動直到鼠標按鈕被松開為止。 

突出顯示拖動到的目標

另一個重要的操作是清晰標識出要拖動到的目標元素。當拖動透明的矩形四處移動時，光標可以經(jīng)過多個可切換元素。當光標懸浮于某個可切換元素之上時，該元素就會通過另一個透明矩形突出顯示。這種突出顯示就能清楚地標示出此元素就是拖放到的目標。當松開鼠標按鈕時，被拖動的元素和拖放到的目標元素就會互換位置，而且所有透明矩形也會消失，直到下一次切換。

激活系統(tǒng)

正如先前提到的，必須要使代碼對已有系統(tǒng)影響最小。這就意味著頁面設(shè)計人員 —工作于 HTML 或 XML— 無需涉及可切換系統(tǒng)。這不是他們的工作。

此頁面只需具有如下三項內(nèi)容：

JavaScript 標記

<body> 標記內(nèi)的 onload 方法

標記為 swappable 的可切換區(qū)域

JavaScript 標記

必須將以下標記置于頁面文件的頂部：

此標記在加載過程的早期加載，但它在 body 內(nèi)的 onload 函數(shù)調(diào)用之后才會執(zhí)行。

標簽：界面設(shè)計

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都控件網(wǎng)