网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

作者： 北京网站建设   日期：2008-03-27 06:14:05  来源： http://www.qitongnet.com

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

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

[中国站长站]

这种方法虽然方便，但局限性很大。 中国.站长站

第一、你必须为每个这样的img标签外套一个a标签

站长.站

第二、只能用class="thickbox"让thickbox去绑定事件 Chinaz

第三、不能自己定义事件

第四、当使用AJAX www.qitongnet.com载入页面后，载入的页面内的这些DOM不会被thickbox绑定

北京网页设计中. 网站建设国.站.长.站

稍稍看了下 北京网站建设thickbox的代码，其实以上问题完全可以使用thickbox 网页设计自己的方法来解决，以下举例说明。 Chinaz^com

例一、我能自己定位到需要用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>

Www@Chinaz@com

需要对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如下： Chinaz~com

以下为引用的内容：网站制作 <div id="PicList">北京网站制作 <img src="Pic01s.jpg" border="0"/> 网站设计 <img src="Pic01s.jpg" border="0"/>网站建设 </div>

Chinaz^com

代码如下：

以下为引用的内容： 企通互联企通互联 $(function() {网页设计 $("#PicList img").click(function() {网页设计 tb_show("",this.src.substring(0,this.src.length-5)+'.jpg',false);企通互联 });});

中国.站长站

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

Chinaz.com

北京网页设计

字体：【大】【中】【小】

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!