ThickBox tab标签页 加载图片和ajax内容 登陆框
XML/HTML Code
- <div id="examples"><!-- examples -->
- <div id="container-2">
- <ul class="anchors" style="width:100%">
- <li><a href="#sectionb-1">一张图片</a></li>
- <li><a href="#sectionb-2">演示</a></li>
- <li><a href="#sectionb-3">调用代码</a></li>
- </ul>
- <div id="sectionb-1" class="anchor">
- <h5 class="hfivepadding">描述:</h5>
- <p>
- 这是ThickBox的一个简单实例,这个例子展示了在中放置一张图片(请看演示)。
- </p>
- <h5>说明:</h5>
- <ul>
- <li>创建一个link元素 (<a href>)</li>
- <li>给创建的这个link元素一个class属性,其值是:thickbox (class="thickbox")</li>
- <li>在href属性中指定一个张图片地址(.jpg .jpeg .png .gif .bmp)</li>
- </ul>
- </div>
- <div id="sectionb-2" class="anchor">
- <h5>点击图片查看效果:</h5>
- <p><a href="Upimg/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="Upimg/single_t.jpg" alt="Image 2"/></a></p>
- </div>
- <div id="sectionb-3" class="anchor">
- <pre class="tabscode" style="height:50px;"><code class="html"><a href="Upimg/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="Upimg/single_t.jpg" alt="Single Image"/></a></code></pre>
- </div>
- </div>
- <div id="container-3">
- <ul class="anchors" style="width:100%">
- <li><a href="#sectionc-1">多张图片</a></li>
- <li><a href="#sectionc-2">演示</a></li>
- <li><a href="#sectionc-3">调用代码</a></li>
- </ul>
- <div id="sectionc-1" class="anchor">
- <h5 class="hfivepadding">描述:</h5>
- <p>
- 这个例子和单张图片差不多,但他允许使用rel属性使多张图片成为一组,在ThickBox里导航。这种完美的使用方法适用于图片集。
- </p>
- <h5>使用说明:</h5>
- <ul>
- <li>创建一个link元素 (<a href>)</li>
- <li>给创建的这个link元素一个class属性,其值是:thickbox; (class="thickbox")</li>
- <li>在href属性中指定一个张图片地址 (.jpg .jpeg .png .gif .bmp)</li>
- <li>给每一个link元素一个相同的rel值。(比如:rel="gallery-plants")</li>
- </ul>
- <h5>重点提醒:</h5>
- <p>当你打开一个ThickBox图片集的时候, 你能通过键盘的左右箭头键向前和向前和向后导航(在 ThickBox 里也提供了Next和Previous的链接)。 图片将会在图片集中按HTML文档流程从第一张显示到最后一张。</p>
- </div>
- <div id="sectionc-2" class="anchor">
- <h5 class="hfivepadding">点击一张图片:</h5>
- <p>
- <a href="Upimg/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant1_t.jpg" alt="Plant 1" /></a>
- <a href="Upimg/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant2_t.jpg" alt="Plant 2" /></a>
- <a href="Upimg/plant3.jpg" title="leave blank, or add caption to title attribute" class="thickbox" rel="gallery-plants"><img src="Upimg/plant3_t.jpg" alt="Plant 3" /></a>
- <a href="Upimg/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant4_t.jpg" alt="Plant 4" /></a>
- </p>
- </div>
- <div id="sectionc-3" class="anchor">
- <pre class="tabscode" style="height:100px;"><code class="html"><a href="Upimg/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant1_t.jpg" alt="Plant 1" /></a>
- <a href="Upimg/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant2_t.jpg" alt="Plant 2" /></a>
- <a href="Upimg/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant3_t.jpg" alt="Plant 3" /></a>
- <a href="Upimg/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="Upimg/plant4_t.jpg" alt="Plant 4" /></a></code></pre>
- </div>
- </div>
- <div id="container-4">
- <ul class="anchors" style="width:100%">
- <li><a href="#sectiond-1">内嵌内容</a></li>
- <li><a href="#sectiond-2">演示</a></li>
- <li><a href="#sectiond-3">调用代码</a></li>
- </ul>
- <div id="sectiond-1" class="anchor">
- <h5 class="hfivepadding">描述:</h5>
- <p>
- 页面中的内嵌内容,隐藏的或是显示的均可以放置在ThickBox中。
- </p>
- <h5>使用说明:</h5>
- <ul>
- <li>创建一个link元素(<a href>)</li>
- <li>给创建的这个link元素一个class属性,其值是:thickbox (class="thickbox")</li>
- <li>给link元素的href属性设置为: #TB_inline</li>
- <li>在href属性的值#TB_inlineIn后面追加一下字符: <pre class="exampleCode"><code class="html">?height=300&width=300&inlineId=myOnPageContent</code></pre></li>
- <li>根据你的实际需要更改height, width, 和 inlineId的值(这里的inlineID就是包含你想显示在ThickBox上的内容的容器的id)。</li>
- <li>当然你也可以在参数字符串中加 modal=true(比如. #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes 或 no才能关闭ThickBox。</li>
- </ul>
- <h5>重点提醒:</h5>
- <p>如果内嵌在ThickBox的内容多于ThickBox显示的尺寸,一个滚动条会出现。请确认ThickBox的尺寸和内容的匹配避免出现滚动条而显示全部内嵌内容。也就是说,如果不想要滚动条,你可以增加ThickBox的宽和高直到内嵌的内容不需要滚动条就能全部显示。</p>
- </div>
- <div id="sectiond-2" class="anchor">
- <p style="padding-top:10px"><input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="显示" /> 点击“显示”按钮后,将在中看到下面的一段文字以及那个写了”测试“的input,或是点击<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">显示隐藏模式的内容</a> 则显示在本文档中隐藏起来id为“hiddenModalContent”的div内的内容</p>
- <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>
- <div id="hiddenModalContent" style="display:none">
- <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 style="text-align:center"><input type="submit" id="Login" value=" Ok " onclick="tb_remove()" /></p>
- </div>
- </div>
- <div id="sectiond-3" class="anchor">
- <pre class="tabscode" style="height:50px;"><code class="html"><input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
- <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a></code></pre>
- </div>
- </div>
- <div id="container-5">
- <ul class="anchors" style="width:100%">
- <li><a href="#sectione-1">iFramed 内容</a></li>
- <li><a href="#sectione-2">演示</a></li>
- <li><a href="#sectione-3">调用代码</a></li>
- </ul>
- <div id="sectione-1" class="anchor">
- <h5 class="hfivepadding">描述:</h5>
- <p>
- 在ThickBox中打开被 iFramed URL.哈, 这正 <a href="http://amix.dk/greybox/demo.html">Greybox</a>的功能.
- Opens URL's in an iframe inside of ThickBox. Yes, this is <a href="http://amix.dk/greybox/demo.html">Greybox</a> functionality.</p>
- <h5>使用说明:</h5>
- <ul>
- <li>创建一个link元素 (<a href>)</li>
- <li>给创建的这个link元素一个class属性,其值是:thickbox (class="thickbox")</li>
- <li>给link元素的href属性指向一个你希望在ThickBox显示的URL。</li>
- <li>href属性的URL后面追加上以下字符参数: <pre class="exampleCode"><code class="html">?KeepThis=true&TB_iframe=true&height=400&width=600</code></pre></li>
- <li>根据你的实际需要改变上面的参数字符。</li>
- <li>当然你也可以在参数字符串中加 modal=true<br/>(比如:?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true) 这样当关闭ThickBox时会调用ThickBox iframe (self.parent.tb_remove())内部的一个tb_remove()函数。在演示中查看“打开iFrame Modal的演示”则要求点击ok才能关闭ThickBox。</li>
- </ul>
- <h5>重点提醒:</h5>
- <p>所有其他参数字符都必须在TB_iframe 参数之前。URL中所有"TB" 之后的将被移除。</p>
- </div>
- <div id="sectione-2" class="anchor">
- <p><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> <a href="Upimg/ajaxOverFlow.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">例子2</a> <a href="Upimg/iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">iFrame Modal被打开的演示</a></p>
- </div>
- <div id="sectione-3" class="anchor">
- <pre class="tabscode" style="height:70px;"><code class="html"><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>
- <a href="Upimg/ajaxOverFlow.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">例子2</a>
- <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">iFrame Modal被打开的演示</a>
- </code></pre>
- </div>
- </div>
- <div id="container-6">
- <ul class="anchors" style="width:100%">
- <li><a href="#sectionf-1">AJAX内容</a></li>
- <li><a href="#sectionf-2">演示</a></li>
- <li><a href="#sectionf-3">调用代码</a></li>
- </ul>
- <div id="sectionf-1" class="anchor">
- <h5 class="hfivepadding">描述:</h5>
- <p>
- 采用一个隐藏的HTTP request (AJAX) 从同一个服务器上获取文件,并使用显示其内容。
- </p>
- <h5>使用说明:</h5>
- <ul>
- <li>创建一个link元素 (<a href>)</li>
- <li>给创建的这个link元素一个class属性,其值是:thickbox (class="thickbox")</li>
- <li>给link元素的href属性指向一个链接文件或是服务器目录。(href="ajaxLogin.htm") </li>
- <li>在href属性的URL后面追加以下字符来结束URL: <pre class="exampleCode"><code class="html">?height=300&width=300</code></pre></li>
- <li>根据需要更改宽和高的值。</li>
- <li>当然,你也可以在上面的参数字符串再加上modal=true(比如. ?height=300&width=300&modal=true) 这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“login”这个例子则要求点击yes 或 no才能关闭ThickBox。</li>
- </ul>
- <h5>重点提醒:</h5>
- <p>为了在新打开的Ajax ThickBox中打开新的Ajax内容,他的代码必须包含适当的 HTML (class=""thickbox) 来加载一个Ajax ThickBox (请留意演示例子)。其他唯一需要注意的一个地方就是调用的ThickBox必须包含宽和高,如果你给这两项留空,则窗口会自适应到默认大小(630*440).</p>
- </div>
- <div id="sectionf-2" class="anchor">
- <p><a href="Upimg/ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">有滚动条的内容</a>
- <a href="Upimg/ajax.html?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">没滚动条的内容</a>
- <a href="Upimg/ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">登入(模式)</a>
- <a href="Upimg/ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">更新ThickBox内容</a></p>
- </div>
- <div id="sectionf-3" class="anchor">
- <pre class="tabscode" style="height:100px;"><code class="html"><a href="Upimg/ajaxOverFlow.html?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">有滚动条的内容</a>
- <a href="Upimg/ajax.html?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">没滚动条的内容</a>
- <a href="Upimg/ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">登入(模式)</a>
- <a href="Upimg/ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">更新ThickBox内容</a></code></pre>
- </div>
- </div>
- <div style="clear:both"></div>
- </div><!-- /examples -->
原文地址:http://www.freejs.net/article_tabbiaoqian_310.html
相关推荐
ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等演示页面
ThickBox打开框架页 1.显示位置修正; 2.标题栏关闭改图片; 3.点击父页面关闭修正; 4.添加关闭刷新父页面; ...等; 如需更多修改化请自行修改。
ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容). 展示单一图片(single image) 展示图片集(multiple images) 展示内嵌内容(inline content) 展示被iFrame的内容(iframed content) 展示...
thickbox插件可以实现页面模态框的效果,并且兼容大部分的浏览器。
ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。 使用介绍: http://blog.csdn.net/intcry/archive/2010/11/25/6035639.aspx
使用thickbox时,经常会往回带值,比如,用thickbox显示上传一张图片,在关闭得时候,将上传后的图片路径返回到原来的页面。类似的操作很多,写了一个小实例,希望能对一些朋友有所帮助。
AJAX--greybox,thickbox,Lightbox 很好的ajax技术 很多网站都用的上 AJAX领域先进实例。。。。
thickbox3.1.zip 弹出div 显示图片
jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页jquery插件和例子 图片播放器 lightbox thickbox 手风琴 树 分页
图片及产品展示javascript特效
用 jquery 和 thickbox 实现图片浏览
ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层
ThickBox是多功能性的,它提供有對於圖像、內置框架、內嵌內容、AJAX內容 等變化, 在點擊連結後能在網頁形成美觀的透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持居中.
ThickBox 3_1 <br>最新的ThickBox JS库,使用方便。 <br>具体参考:http://jquery.com/demo/thickbox/
该文件中包括了thickbox 的基本样式,可配置显示方式 以及 加载图片以及其路径
Thickbox 3.1插件包,其中包裹Thickbox 3.1_js文件和thickbox.css样式包和所需注释及参考
——轻量级的弹出窗口jQuery插件,压缩后仅仅3.65Kb,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面……
ThickBox是一个基于JQuery类库的扩展 以下的是ThickBox3.1的实例+代码调用方法
45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子...
thickbox的具体使用方法 有具体的实例