开发学院网页设计 JavaScript 用 JavaScript 创建模块化的交互用户界面阅读

用 JavaScript 创建模块化的交互用户界面

　2010-09-14 13:21:31　来源：WEB开发网　　　

核心提示： 可切换界面可切换系统很容易使用，先由 Web 页面设计人员将某些部分标志为可切换的，用 JavaScript 创建模块化的交互用户界面(2)，然后就可以在任何一个可切换元素上单击并将该元素拖放到另一个可切换元素，放开鼠标按钮后，这不是他们的工作，此页面只需具有如下三项内容：JavaScr

可切换界面

可切换系统很容易使用。先由 Web 页面设计人员将某些部分标志为可切换的。然后就可以在任何一个可切换元素上单击并将该元素拖放到另一个可切换元素。放开鼠标按钮后，这两个元素就完成了交换。

为了能清楚展示所发生的事情，可以使用一些标准的 GUI 操作。

突出显示被拖动的元素

当第一次单击可切换元素时，在光标下面会出现一个透明的矩形。这个矩形由 coveringDiv() 函数创建，它刚好能覆盖这个可切换元素。实际上是将这个矩形拖放到另一个元素。当拖放时，只有这个透明的矩形会移动 — 初始的元素保持不动直到鼠标按钮被松开为止。

突出显示拖动到的目标

另一个重要的操作是清晰标识出要拖动到的目标元素。当拖动透明的矩形四处移动时，光标可以经过多个可切换元素。当光标悬浮于某个可切换元素之上时，该元素就会通过另一个透明矩形突出显示。这种突出显示就能清楚地标示出此元素就是拖放到的目标。当松开鼠标按钮时，被拖动的元素和拖放到的目标元素就会互换位置，而且所有透明矩形也会消失，直到下一次切换。

激活系统

正如先前提到的，必须要使代码对已有系统影响最小。这就意味着页面设计人员 —工作于 HTML 或 XML— 无需涉及可切换系统。这不是他们的工作。

此页面只需具有如下三项内容：

JavaScript 标记

<body> 标记内的 onload 方法

标记为 swappable 的可切换区域

JavaScript 标记

必须将以下标记置于页面文件的顶部：

<script src="rearrange-your-page.js"></script>

此标记在加载过程的早期加载，但它在 body 内的 onload 函数调用之后才会执行。

上一页 1 2 3 4 5 6 7 下一页