- 浏览: 321976 次
- 性别:
- 来自: 上海
文章分类
最新评论
最近发现一个不错的基于jquery的插件thickBox ,感觉比facebox好用。
做项目中发现facebox如果快速单击两下,容易出现黑屏。而且facebox的框架是用table写的,可能因为table相对div在结构方面更稳定些。如果弹出层里是table布局的,样式就会受到facebox的样式影响,还要重新reset一下。
看了下官方的api,我研究了下,做了个整理。看下图:
附件中index.html是主页,其它页面都是调用页面。点击index页面,就能看到如图的页面。图、按钮、文字都是可以点的。需要点击的标签都要加上class="thickbox"。当页面出现滚动条时,弹出层固定在窗口的正中间不会移动。当弹出层中只是图片时,图片大小会根据当前窗口的大小进行压缩。所有的弹出层都可以按"esc"退出,除了需要点确认的弹出层外,点击弹出层以外的地方都可以关闭弹出层。
1.展示图片(单张):
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"> <img src="images/single.jpg" alt="Plant" width="100" height="75" /> </a>
2.展示图片(多张):
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> <img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/> </a> <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> <img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/> </a> <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> <img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/> </a> <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> <img src="images/plant4.jpg" alt="Plant 4" width="100" height="75"/> </a>
这里每个a都要加上rel属性,而且属性值要一样。前后展示图可以通过" > "和" < "来切换
3.弹出层内容在当前页面中时:
<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show" type="button"> the paragraph and input below in a ThickBox, or <input alt="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show hidden modal content" type="button"> <div id="myOnPageContent" style="display:none;"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p><select name=""><option>test</option></select></p> </div> <div id="hiddenModalContent" style="display:none;"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p style="text-align: center;"><input type="submit" onclick="tb_remove()" value=" Ok " id="Login"/></p> </div>
第一个input点开的弹出层有input框、title和操作按钮以及文字。第二个input点开的弹出层只有文字。
弹出层的大小是根据input的alt属性里的width和height值来定义的。下面讲到的几种情况也是这样来定义弹出层大小的。
4.调用外部文件,弹出层是iframe
<a href="ajaxFrame.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a> <a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a> <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
如果弹出层是嵌套在iframe里需要添加“TB_iframe=true"。
第一个是调用ajaxFrame.PHP文件。
第二个是调用ajaxOverFlow2.html文件。
第三个是调用了iframeModal.html文件,隐藏了title和操作按钮。
5.调用外部文件,弹出层不是iframe
<a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a> <a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a> <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a> <a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>
第一个调用ajaxOverFlow.html文件。
第二个调用ajax.PHP文件。
第三个调用ajaxLogin.html文件,form表单。
第四个调用ajaxTBcontent.html文件,弹出层里再调用newTBcontent.html文件。
发表评论
-
遍历class
2010-11-14 22:03 1985一般国外的网站很注重细节,他们会把菜单或者button做成图片 ... -
简单的新闻滚动
2010-11-09 23:07 1421这里直接用jquey的animate函数做的滚动效果 ... -
上一张下一张
2010-11-09 22:12 3361预览照片的常用功能:上一张下一张 效果图(很喜欢的蒙奇 ... -
自动播放的jQuery幻灯片
2010-10-29 22:23 3135来看下效果图: <script src ... -
EasySlider
2009-11-16 21:58 1605Easy Slider 1.5 - The Easiest j ... -
Cookie Plugin for jQuery
2009-08-09 23:30 1956Cookie Plugin for jQuery ... -
价格过滤条
2009-04-03 10:18 1197写了一个价格过滤条: 重点是按钮的css定位要算好。 只能 ... -
js图片轮换效果(二)
2009-03-13 15:23 4796结构: <ul id="picture& ... -
jquery ui 日历插件(换色+类型)
2009-03-10 16:59 5613抽空把jquery ui 里的日历做了个整理,整合了换色和几 ... -
二级菜单效果(3)
2009-03-07 16:05 1559html代码结构: <li class=&quo ... -
jquery之Image Scroller插件
2009-02-23 21:10 2249jquery之Image Scroller插件 图片滚动插 ... -
jquery学习之—构建功能型表单(二)
2009-02-10 20:45 1377在构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的 ... -
很炫的图片循环效果(jquery改写版)
2009-02-08 21:18 3358以前我在博客中发表过这个图片循环效果,是用javascript ... -
用animate方法展示大图
2009-02-06 15:44 1289demo中点击按钮后div元素的几个不同属性一同变化 ... -
菜单伸缩动画
2009-02-06 13:41 1520方法: $(document).ready(funct ... -
sexy curls插件
2009-02-06 12:14 1223The sexy curls jquery plugin ... -
facebox插件
2009-01-19 14:03 3240在网上down下facebox1.2版的源码, 重新整理了下( ... -
lightbox插件
2009-01-16 16:58 2210lightbox基于jquery1.3版(附件1) 具 ... -
动态过滤填充input框和用弹出层替换select框
2008-12-23 23:21 3145左图是用keydown事件写的动态过滤填充input框 $ ... -
js图片轮换效果(一)
2008-12-15 21:39 7662常常在各大网站上看到如下图所示的图片轮换效果,有的是用flas ...
相关推荐
jquery插件thickbox的使用方法
最近发现一个不错的基于jquery的插件thickBox ,感觉比facebox好用。但因为jquery官方不推荐使用。所以这个只是学习的朋友,不建议使用这个。
ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌...ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀.
ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。 使用介绍: http://blog.csdn.net/intcry/archive/2010/11/25/6035639.aspx
JQUERY插件THICKBOX的功能很强大,但是它的基本使用却很简单容易.但是要研究的更深,运用得更加灵活的话,还是有点难度,根据其官方站点介绍
NULL 博文链接:https://q445862108.iteye.com/blog/1013002
基于jQuery弹出层插件thickbox,这是thickbox3.1版,需要jQuery支持,可以使用jquery-1.4.3.min.js这个文件比较新比较小。 两种调用方式: 点击弹出隐藏层 注意弹出层的内容 ID
熟悉thickbox的就知道此插件是做什么用的了,也就很容易入手此插件了,使用方法和thickbox几乎一样。此插件参考了thickbox,而且照搬了大部分代码,可以说是thickbox的升级版,也可以说是thickbox的修改版。除实现...
thickbox是一个非常好的弹出层插件,而且使用起来好方便。
主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下
jQuery thickbox 弹出框 弹出后网页变暗 插件,使用thickbox 可用来显示图片弹框和文字的弹框,比如一些登录框之类的,弹出后,网页背景渐变暗下来,操作完成后网页恢复。thickbox和Lightbox插件之类的功能十分相似...
熟悉thickbox的就知道此插件是做什么用的了,也就很容易入手此插件了,使用方法和thickbox几乎一样。此插件参考了thickbox,而且照搬了大部分代码,可以说是thickbox的升级版,也可以说是thickbox的修改版。除实现...
Jquery是继prototype之后又一个优秀的... 加一些Jquery的资源: http://www.visualjquery. com/index.xml 很好的API查询站点 http://jquery. com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西 ...
Joomla插件包括:google分析插件、Joomla google 天气预报模块、Joomla 幻灯播放、Joomla 标签卡片式插件、Joomla多语言支持、lightbox照片展示、thickbox插件、广告栏淡入淡出、登录、自定义模板_应用_QQ在线咨询、...
相册集成HighSlide、LightBox、GreyBox、ThickBox特效,并可以使用外部的Z-Blog插件; 停用时自动删除生成的文件,替换添加的导航,一键安装,一键卸载; 可以添加不同的相册,方便的设置和修改相册简介,并且可以...
支持本地上传和远程图片,自动盗链吝啬的国内门户提供的博客/空间/相册中... 相册集成HighSlide、LightBox、GreyBox、ThickBox特效,并可以使用外部的Z-Blog插件; 停用时自动删除生成的文件,替换添加的导航,一键安装
插件中使用的上传类为 风声 ASP 无组件上传类 V2.11 jquery 为 1.2.3 thickbox 为 3.1 详细介绍: http://www.firste.cn/form/dw_down.php?dwid=5 请大家及时到我的网站报告bug,在此先表示感谢! ------------...