龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

增强站点交互性 Ajax小部件鉴赏(1)(4)

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
四、DHTML 窗口 浏览器使在 Web 页面上构建模式窗口变得更困难,这也许是件好事。但是有时候,小窗口也不错。它们便于显示警告,或者弹出小型表单。它
四、DHTML 窗口

浏览器使在 Web 页面上构建模式窗口变得更困难,这也许是件好事。但是有时候,小窗口也不错。它们便于显示警告,或者弹出小型表单。它们也是弹出广告的一种很好的方式,这些烦人的广告总是盖住了页面的内容。哦,等等:最后一句收回。

不管怎样,为动态 HTML(DHTML)页面构建窗口并不容易。所以,当我发现这个基于流行的 Protoype.js 库的极其健壮的窗口包时,感到非常高兴。它不仅容易使用,界面还可以换肤,而且在每个浏览器上都运行得很好。清单 7 显示了 window.html 页。

清单 7. Window.html











我首先将 prototype.js 和 window.js 源文件放进头部。然后,用我喜欢的参数构建弹出对象,包括大小、位置、标题和小部件从中获取显示内容的页面的 URL。通过 Ajax 从一个页面装载内容仅仅是获取内容的一种方法。您也可以通过 JavaScript 代码动态地设置它们,或者用页面上已有的 标记围住窗口。

在这个例子中,我引用了在清单 8 中显示的 terms.html 文件。

清单 8. Terms.html

Terms and Conditions

In order to use this site you must comply with the following conditions...


当在浏览器中打开该页面时,会看到如图 6 所示的窗口。

图 6. 初始窗口
初始窗口

不,那不是两个层叠的 Mac 窗口。其中一个是真正的 Firefox 浏览器窗口,另一个是 Mac 风格的假 DHTML 窗口。只不过彼此看起来很相似。

我可以放大和移动窗口,如图 7 所示。

图 7. 移动和缩放之后的窗口
移动和缩放之后的窗口

为了写作本文,同时也为了工作之用,我对几个 DHTML 窗口库进行过一些考察,我可以肯定地告诉您,这一个是我感觉最棒的一个。 其他窗口包有的在显示上有问题,有的显示起来不完整,有的在我调整其大小时效果很差。而这个窗口则看上去非常像浏览器中的一个真正的窗口。

精彩图集

赞助商链接