1>?引用JQuery插件、thickbox插件;
<script?type="text/javascript"?src="path-to-file/jquery.js"></script>? <script?type="text/javascript"?src="path-to-file/thickbox.js"></script> 2>?引入thickbox的css文件;
<link?rel="stylesheet"?href="path-to-file/thickbox.css"?type="text/css"?media="screen"?/> 3>?对需要使用?thickbox效果的对象加入以下代码,
给创建的这个link元素一个class="thickbox"属性;<a?href="Upimg/single.jpg"?title="add?a?caption?to?title?attribute?"?class="thickbox"> ? ? ? ? ? ?对象/图片 ? </a> 一、一张图片 <1>给创建的这个link元素一个?
?class="thickbox"? ?属性 调用代码如下:
<a?href=”Upimg/single.jpg”?title=”add?a?caption?to?title?attribute?”?class=”thickbox”>
<img?src=”Upimg/single_t.jpg”?alt=”Image?2″/>
</a>
二、多张图片
<1>给创建的这个link元素一个? ?class="thickbox"? ?属性 <2>给每一个link元素一个相同的rel值。(比如:rel="gallery-plants") <a?href="Upimg/plant1.jpg"?title="add?a?caption?"?class="thickbox"?rel="gallery-plants">
?<img?src="Upimg/plant1_t.jpg"?alt="Plant?1"?/> </a>? <a?href="Upimg/plant2.jpg"?title="add?a?caption"?class="thickbox"?rel="gallery-plants"> ? ? ? ? ? ?<img?src="Upimg/plant2_t.jpg"?alt="Plant?2"?/> </a>? <a?href="Upimg/plant3.jpg"?title="add?a"?class="thickbox"?rel="gallery-plants"> ? ? ? ? ? ?<img?src="Upimg/plant3_t.jpg"?alt="Plant?3"?/> </a>?
三、?层
<1>给创建的这个link元素一个? ?class="thickbox"? ?属性 <2>给link元素的href属性设置为:?#TB_inline <3>在href属性的值#TB_inlineIn后面追加一下字符:? ?height=300&width=300&inlineId=myOnPageContent
?? ? ?当然你也可以在参数字符串中加?modal=true(比如.?#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true)?这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes?或?no才能关闭ThickBox。 ? ?代码如下: <input?alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent"?title="add?a?caption"?class="thickbox"?type="button"?value="Show"?/>?
iframe <1>给创建的这个link元素一个?<div?id="myOnPageContent"> ?<p>Lorem?ipsum?dolor?sit?amet,?consectetuer?adipiscing?elit,?sed?diam?nonummy?nibh?euismod?tincidunt?ut?laoreet?dolore?magna?aliquam?erat?volutpat.?Ut?wisi?enim?ad?minim?veniam,?quis?nostrud?exerci?tation?ullamcorper?suscipit?lobortis?nisl?ut?aliquip?ex?ea?commodo?consequat.</p> ?<p><select?name=""><option>测试</option></select></p> </div> 四、 ?class="thickbox"? ?属性? <2>?
href属性的URL后面追加上以下字符参数:??KeepThis=true&TB_iframe=true&height=400&width=600
代码如下:
<a?href="Upimg/ajax_ifram.html?keepThis=true&TB_iframe=true&height=250&width=400"?title="add?a?caption?to?title?attribute?/?or?leave?blank"?class="thickbox"> ?
? ? ?例子1 </a>?