ThickBox 遮罩层

最新推荐文章于 2024-08-25 09:57:22 发布

weixin_33728708

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量61

点赞数

文章标签： javascript python ui ViewUI

原文链接：https://my.oschina.net/u/615191/blog/124468

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

如何实现 ThickBox :
1. ThickBox 要求使用 jQuery JavaScript 库; 正因如此, 你需要外调 jquery.js 文件在你的网页的 head 元素内, 接着还要外调 thickbox.js 文件 (注意: jquery.js 必须放在调用资源的第一位). 例子如下:
<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>
一旦你外调了 .js 文件, 打开 thickbox.js 并寻找加载图片的名字 (loadingAnimation.gif). 找到后, 根据它在你服务器上的位置确定更改它的路径.
2. 在你的网页中外调 ThickBox CSS 文件. 例子如下:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
或
<style type="text/css" media="all">@import "path-to-file/thickbox.css";</style>
或, 打开 thickbox.css 文件并复制粘贴样式到你现有的样式表中.
3. 观看例子, 学习使用不同的方法调用 ThickBox，

http://www.blueidea.com/articleimg/2006/08/3912/thickbox.html

转载于:https://my.oschina.net/u/615191/blog/124468