`
zl198751
  • 浏览: 279588 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery的thickbox使用技巧汇总

jQueryAjaxCSSJavaScriptHTML 
阅读更多

在网上看到有不少没用过的技巧，抄下来，以免忘记！

到 http://jquery.com/demo/thickbox/ 下载需要的js及css文件
分别保存到目录
--js
--css
--images
中，

使用thickbox提供的方法，可以更加自由的用js控制元素动作：

1. tb_init()初始化，等于给a标签加class。

Ajax加载内容后用tb_init(’a.thickbox, area.thickbox, input.thickbox’);

2.等于a标签的点击动作:tb_show("",this.src.substring(0,this.src.length-5)+’.jpg’,false);


一、 在文件的<head></head>中插入
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
然 后修改thickbox.js指名loadingAnimation.gif 这个图片的路径
二、 在<head></head>中插入CSS
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
例子

单个图片时:

增加一个<a href="">然后给连接加一个class="thickbox"
<a href="images/single.jpg" title="caption" class="thickbox">图片</a>
title加连接
title="<a href="images/aa.jpg">my link</a>"
想法来自lightbox

多张图片时:
与单个图片的区别就是多了一个same rel element
<a href="images/a.jpg" class="thickbox" rel="test" title="测试一">测试一</a>
<a href="images/b.jpg" class="thickbox" rel="test" title="测试二">测试二</a>

显示一个层内的内容时弹出任意id:
创建立一个link <a href="">
给 连接增加一个class属性class="thickbox"
给连点增加一个锚点:#TB_inline
在锚点的后边增加字符 串：?height=300&width=300&inlineId=myOnPageContent
在字符串的后边添 加&modal=true,测必须在弹出的层内调用onclik=tb_remove()多用于隐藏的层
其中的inlineId就是你想 显示的元素的id

用ifame显示url
创建立一个link <a href="">
给连接增加一个class属性class="thickbox"
在href属性中提供想在thickbox中显示 的url连接
在url后边添加字符串?KeepThis=true&TB_iframe=true&height=400& amp;width=600
说明Add all other query parameters before the TB_iframe parameters.就是说其它参数一定要放在TB前

ajax内容
用ifame显示url
创建立一个link <a href="">
给连接增加一个class属性class="thickbox"
在href属性中提供想在 thickbox中显示的url连接
在连接后加字符串?height=300&width=300

 

其它技巧

thickbox是一个不错的对话框插件，不过官方站提供的使用方法具限性很 大。比如，我页面上有个缩略图，点击之后用thickbox显示大图。使用官方的方法： 

<a href="大图的URL" title="简介" class="thickbox"><img src="小图的URL" border="0"/></a>

这种方法虽然方便，但局限性很大。
第一、你必须为每个这样的img标 签外套一个a标签
第二、只能用class="thickbox"让thickbox去绑定事件
第三、不能自己定义事件
第四、当使 用AJAX载入页面后，载入的页面内的这些DOM不会被thickbox绑定

稍稍看了下thickbox的代码，其实以上问题完全可以使用 thickbox自己的方法来解决，以下举例说明。

例一。 我能自己定位到需要用 thickbox的元素，不想再加上class="thickbox"。HTML如下： 

<div id="PicList">
     <a href="Pic01.jpg"><img src="Pic01s.jpg" border="0"/></a>
     <a href="Pic02.jpg"><img src="Pic01s.jpg" border="0"/></a>
</div>

需要对id="PicList"里面的a标签下的img使用 thickbox，代码如下： 

$(function() {
     tb_init("#PicList a[img]");
});

例二。 我用AJAX载入了一段HTML， 但该HTML里的class="thickbox"这样的标签点击了没有任何反应。解决此问题只要在AJAX载入HTML并更新到页面后执行下以下代码： 

tb_init(’a.thickbox, area.thickbox, input.thickbox’); //引号里的是thickbox的默认选择器，你可以使用例一内这样的自定义选择器

例三。 我想点击img标签后显示 thickbox，不想在img标签外面再套<a url="大图" class="thickbox">这样的标签。缩略图URL只不过在大图URL的后缀前加了s。比如大图是pic01.jpg、小图是 pic01s.jpg。使用以下方法可以做到。HTML如下： 

<div id="PicList">
     <img src="Pic01s.jpg" border="0"/>
     <img src="Pic01s.jpg" border="0"/>
</div>

代码如下： 

$(function() {
     $("#PicList img").click(function() {
       tb_show("",this.src.substring(0,this.src.length-5)+’.jpg’,false);
     });
});

另外，如果想用其它事件，请使将例3里的click改成你想触发 thickbox的事件。

 

分享到：
| 关于Css一些初步学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics