thickbox使用技巧
来源:互联网 发布:corethink php版本 编辑:程序博客网 时间:2024/05/21 17:21
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的事件。
- thickbox使用技巧
- thickbox使用技巧
- thickbox使用技巧
- jquery的thickbox使用技巧汇总
- HTML:对话框插件thickbox使用技巧
- 使用Thickbox
- thickbox使用
- thickbox使用
- Thickbox的使用
- ThickBox使用心得
- ThickBox 使用小记
- Jquery ThickBox的使用
- Jquery ThickBox的使用
- ThickBox
- Thickbox使用中的一些问题
- thickbox的一些使用心得
- thickbox使用与参数详解
- Jquery插件Thickbox的使用
- 人生道路!!!
- 笔记本扩展并口使用sjf2410 + Jtag烧写bootloader
- Log4net日志记录组件-学习心得
- 相对路径和绝对路径的优缺点
- 圣思园的随堂视频发布了
- thickbox使用技巧
- ossec study-4:如何设置将ossec的警告邮件从root(root@localhost)发给自己的邮箱(如gmail邮箱)
- 12-1学习日志夜话前四集
- 属性不匹配。存在属性(Directory, Compressed),包括属性(0),不包括属性(Archive, Compressed, Encrypted)
- 8-7-12-01-22.47.c
- Flex如何使用UDP传输
- Android的View的布局控制
- Treectrl de 用法
- 最近在对比几个CMS源代码,希望自己能写出