HTML:对话框插件thickbox使用技巧
|
源代码网整理以下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如下: 源代码网整理以下
源代码网整理以下需要对id="PicList"里面的a标签下的img使用thickbox,代码如下: 源代码网整理以下
源代码网整理以下例二、我用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如下: 源代码网整理以下
源代码网整理以下代码如下: 源代码网整理以下
源代码网整理以下另外,如果想用其它事件,请使将例3里的click改成你想触发thickbox的事件。 源代码网供稿. |
