ThickBox tab标签页 加载图片和ajax内容 登陆框
?
?
?
XML/HTML Code
- <div?id="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>??
?
原文地址:http://www.freejs.net/article_tabbiaoqian_310.html
?
?
ThickBox tab标签页 加载图片和ajax内容 登陆框
原文:http://freejs.iteye.com/blog/2155888