ThickBox 2.0——JS展示脚本
来源:互联网 发布:淘宝卖家第三层级 编辑:程序博客网 时间:2024/06/06 04:44
Cody Lindley 使用 jQuery 开发
译: croc
阅读原文
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 的功能.
支持的和经测试过的浏览器:
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
许可特此批出, 免费, 给任何人提供此软件的拷贝和他相关文档中的("软件"), 使用此软件不受任何限制, 所不受的限制包括: 有权利使用, 拷贝, 修改, 合并, 出版, 分发, 颁发从属许可, 和/或买卖该软件的拷贝.
下载打包的所有文件及教程
- ThickBox 2.0——JS展示脚本
- Thickbox。js
- thickbox.js插件学习
- Jquery插件——thickbox分享
- ThickBox
- 关闭thickbox弹出层的脚本
- JavaScript——12个超酷图片展示JS代码
- JS基础——运行脚本
- 案例—商品展示
- 常用的JS插件介绍:5、fancybox——弹出图片展示
- js头像(图片)上传,立即展示!——李帅醒博客
- js图片滚动展示
- js时间展示
- JS超级动感展示
- js 展示聊天动画
- 脚本展示:获取IP地址
- thickbox 使用说明
- thickbox学习体会
- Flex开发ArcGIS问题集锦三:如何发布地图(一)
- asp.net如何实现excel导入到sql或者根据需要再将sql中的数据导出到excel表格中
- 关于em与px的研究与使用
- Nifty Corners Cube
- 国内外 JavaScript 经典封装
- ThickBox 2.0——JS展示脚本
- Asp.Net 2.0连接ACCESS数据库相对路径问题,web.config中如何使用相对路径
- 使用 Split 方法分析字符串(C# 编程指南)
- 公交查询系统SQL查询储存过程
- ASP.NET2.0---GridView控件学习
- ASP.NET Interview Questions (ASP.NET 面试题)
- .NET牛人应该知道些什么?
- 超详细的SQL语句语法
- SQL语句学习手册实例版