首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

thickbox运用技巧

2012-06-28 
thickbox使用技巧thickbox是一个不错的对话框插件,不过官方站提供的使用方法具限性很大。比如,我页面上有个

thickbox使用技巧
thickbox是一个不错的对话框插件,不过官方站提供的使用方法具限性很大。比如,我页面上有个缩略图,点击之后用thickbox显示大图。使用官方的方法:
<a href="大图的URL" title="简介" border="0"/></a>

这种方法虽然方便,但局限性很大。
第一、你必须为每个这样的img标签外套一个a标签
第二、只能用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里的border="0"/>
  <img src="Pic01s.jpg" border="0"/>
</div>

代码如下:thickbox是一个不错的对话框插件,不过官方站提供的使用方法具限性很大。比如,我页面上有个缩略图,点击之后用thickbox显示大图。使用官方的方法:
<a href="大图的URL" title="简介" border="0"/></a>

这种方法虽然方便,但局限性很大。
第一、你必须为每个这样的img标签外套一个a标签
第二、只能用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里的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的事件

热点排行