首页 » 建站技术 » 浏览内容

ThickBox 2.0——JS展示脚本


2006-08-29 08:55:32 7,526 0 发表评论 字体: 作者:C.K.
标签: ajaxjavascript学习笔记

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

From:http://www.phpso.com/?action/viewspace/itemid/23

Cody Lindley 使用 jQuery 开发
译: croc

阅读原文

ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容.

查看实例演示

特性:

1. ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k.
2. ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k.
3. ThickBox 能重新调整大于浏览器窗口的图片.
4. ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容).
   4.1 展示单一图片(single image)
  4.2 展示图片集(multiple images)
  4.3 展示内嵌内容(inline content)
  4.4 展示被iFrame的内容(iframed content)
  4.5 展示AJAX内容(AJAX content)
  4.6 其他:教程本身还自带了一个很酷的JS跳转脚本
5. ThickBox 能隐藏 Windows IE 6 里的元素.
6. ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox.
7. ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀.

如何实现 ThickBox :

1. ThickBox 要求使用 jQuery JavaScript 库; 正因如此, 你需要外调 jquery.js 文件在你的网页的 head 元素内, 接着还要外调 thickbox.js 文件 (注意: jquery.js 必须放在调用资源的第一位). 例子如下:


一旦你外调了 .js 文件, 打开 thickbox.js 并寻找加载图片的名字 (loadingAnimation.gif). 找到后, 根据它在你服务器上的位置确定更改它的路径.

2. 在你的网页中外调 ThickBox CSS 文件. 例子如下:



或, 打开 thickbox.css 文件并复制粘贴样式到你现有的样式表中.

3. 观看例子, 学习使用不同的方法调用 ThickBox 的功能.

支持的和经测试过的浏览器:

Windows IE 6.0, Windows FF 1.5.0.5, Windows Opera 9.0, Macintosh Safari 1.3.2 & 2.0.3, Macintosh FF 1.5

MIT 许可

http://www.opensource.org/licenses/mit-license.php

许可特此批出, 免费, 给任何人提供此软件的拷贝和他相关文档中的(“软件”), 使用此软件不受任何限制, 所不受的限制包括: 有权利使用, 拷贝, 修改, 合并, 出版, 分发, 颁发从属许可, 和/或买卖该软件的拷贝.

下载打包的所有文件及教程:

网站统计 Statistics

  • 创建时间: 2005年1月3日 距今5038 天
  • 日志总数: 2461
  • 评论总数: 630
  • 标签总数: 654
  • 链接总数: 273
  • 最后更新: 2018-8-31 17:57:04
  • 您是本站第 14050296 位访客

广告区 Guǎng Gào