 |
您现在的位置： 圆点视线 >> 教程 >> 网页设计 >> html教程 >> 文章正文 |
|
|||
| 对话框插件thickbox使用技巧 | |||
作者：佚名 文章来源：网页教学网 点击数： 更新时间：2007-10-26 17:40:49  |
|||
|
|
||
| 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的事件。 |
||
| 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入：Rainsion 责任编辑：Rainsion 【字体：小 大】 |
| |
 最新文章 |
| 相关文章 |
| HTML元素语义的分类 根据网页结构选择最合适的XHTML标签 学习网页制作了解一些相关的语言代码知识 XHTML代码头部Doctype文档类型声明必不可少 在XHTML和HTML中使用语言信息 学习网页设计时要注意HTML向XHTML转化 网页标题和网页Meta的一些写法和注意 网页的新颖效果 斜着滚动的marquee XHTML+CSS的目的和好处(WEB标准的目的和好处 XHTML编写网页代码的七条基本规范 |
 网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！） |
| 发表评论： |
| 最 新 推 荐 |
| 百度主题推广 | |
| 最 新 热 门 |