用 JavaScript 创建模块化的交互用户界面
2010-09-14 13:21:31 来源:WEB开发网本文示例源代码或素材下载
通过本文,了解使用拖放功能移动 Web 页面的不同部分的技巧。分别实现交互性的不同方面,然后再将它们组合在一起,这样便于灵活定制页面,也让您的 Web 用户非常满意。
JavaScript 是一种功能强大的语言,可用于创建基于 Web 的应用程序。它已经足够稳定和成熟,完全可以创建与传统桌面应用程序相抗衡的程序,因为后者在稳定性和特性丰富性方面都要胜出一筹。但 JavaScript 最初只是用来向静态 Web 页面添加某些交互性,使它不再是静态页面,它现在还用于此目的。
我将要展示的这个技巧的关键之处是如何恰当地构建页面,使它能与 JavaScript 代码交互。通常,页面都是通过头脑里固有的 JavaScript 代码构造的。但是,尽管如此,很多时候您都需要向现有页面内添加新的交互特性。而这往往需要一些技巧,因为 JavaScript 代码必须遍历文档结构并在合适的位置添加代码,而且通常还要求不影响现有的结构 — 和页面上已有的 JavaScript 代码。总之,要将对系统的影响最小化。
常见的缩写词
UI:用户界面
GUI:图形用户界面
HTML:超文本标记语言
XML:可扩展标记语言
DOM:文档对象模型
可切换系统
本文介绍了一种方法,它通过移动页面的不同部分来激活 页面。具体来讲,就是通过将一个部分拖放到另一个部分之上从而实现可切换 部分的切换。
要激活这些部分,只需向其添加 class 参数并加载一个 JavaScript 文件。可以通过向 <body> 标记添加 onload 方法来激活代码,此方法会在页面加载之后立即启动代码。代码会处理随后的事情。
注意:本文示例所对应的源代码可以从 下载 部分获得。
此外,可以尽量多地使用抽象来构造代码。程序的不同元素通常都不必要地相互缠结,UI 代码更是这样。可切换系统由不同的块构建而成,每个块实现交互性的不同部分。这些块结合起来就能实现简单无缝的界面,该界面对于 UI 的试验和调优都很关键。
Tags:JavaScript 创建 模块化
编辑录入:爽爽 [复制链接] [打 印]- ››JavaScript拖拽原理的实现
- ››javascript事件列表解说
- ››Javascript代码优化工具UglifyJS
- ››JavaScript Confirm 失效的解决办法
- ››JavaScript页面内拖拽原理分析
- ››javascript中select的常用操作
- ››javascript+css无刷新实现页面样式的更换
- ››javascript 摘记一
- ››JavaScript alert()函数详细使用说明
- ››创建基于PPTP的站点到站点VPN连接:ISA2006系列之...
- ››创建基于L2TP的站点到站点的VPN连接:ISA2006系列...
- ››创建一个Twisted Reactor TCP服务器
更多精彩
赞助商链接