日韩在线一区二区,午夜亚洲无码,97成人碰碰

用 JavaScript 創建模塊化的交互用戶界面

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

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

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

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

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

可切換系統

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

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

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

此外，可以盡量多地使用抽象來構造代碼。程序的不同元素通常都不必要地相互纏結，UI 代碼更是這樣?？汕袚Q系統由不同的塊構建而成，每個塊實現交互性的不同部分。這些塊結合起來就能實現簡單無縫的界面，該界面對于 UI 的試驗和調優都很關鍵。

可切換界面

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

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

突出顯示被拖動的元素

當第一次單擊可切換元素時，在光標下面會出現一個透明的矩形。這個矩形由 coveringDiv() 函數創建，它剛好能覆蓋這個可切換元素。實際上是將這個矩形拖放到另一個元素。當拖放時，只有這個透明的矩形會移動 — 初始的元素保持不動直到鼠標按鈕被松開為止。 

突出顯示拖動到的目標

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

激活系統

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

此頁面只需具有如下三項內容：

JavaScript 標記

<body> 標記內的 onload 方法

標記為 swappable 的可切換區域

JavaScript 標記

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

此標記在加載過程的早期加載，但它在 body 內的 onload 函數調用之后才會執行。

標簽：界面設計

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

文章轉載自：慧都控件網