首页 > Web开发 > 详细

ThickBox tab标签页 加载图片和ajax内容 登陆框

时间：2014-11-15 02:18:05      阅读：325      评论：0      收藏：0      [点我收藏+]

ThickBox tab标签页 加载图片和ajax内容 登陆框

?
bubuko.com,布布扣
演示

?

?

XML/HTML Code
  1. <div?id="examples"><!--?examples?-->??
  2. ??
  3. ????<div?id="container-2">??
  4. ????????<ul?class="anchors"?style="width:100%">??
  5. ????????????<li><a?href="#sectionb-1">一张图片</a></li>??
  6. ????????????<li><a?href="#sectionb-2">演示</a></li>??
  7. ????????????<li><a?href="#sectionb-3">调用代码</a></li>??
  8. ????????</ul>??
  9. ????????<div?id="sectionb-1"?class="anchor">??
  10. ????????????<h5?class="hfivepadding">描述:</h5>??
  11. ????????????<p>??
  12. ????????????????这是ThickBox的一个简单实例，这个例子展示了在中放置一张图片（请看演示）。??
  13. ????????????</p>??
  14. ????????????<h5>说明:</h5>??
  15. ????????????<ul>??
  16. ????????????????<li>创建一个link元素?(<a?href>)</li>??
  17. ????????????????<li>给创建的这个link元素一个class属性，其值是：thickbox?(class="thickbox")</li>??
  18. ????????????????<li>在href属性中指定一个张图片地址(.jpg?.jpeg?.png?.gif?.bmp)</li>??
  19. ????????????</ul>??
  20. ????????</div>??
  21. ????????<div?id="sectionb-2"?class="anchor">??
  22. ????????<h5>点击图片查看效果:</h5>??
  23. ????????????<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>??
  24. ????????</div>??
  25. ????????<div?id="sectionb-3"?class="anchor">??
  26. ????????<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>??
  27. ????????</div>??
  28. ????</div>??
  29. ??????
  30. ????<div?id="container-3">??
  31. ????????<ul?class="anchors"?style="width:100%">??
  32. ????????????<li><a?href="#sectionc-1">多张图片</a></li>??
  33. ????????????<li><a?href="#sectionc-2">演示</a></li>??
  34. ????????????<li><a?href="#sectionc-3">调用代码</a></li>??
  35. ????????</ul>??
  36. ????????<div?id="sectionc-1"?class="anchor">??
  37. ????????????<h5?class="hfivepadding">描述:</h5>??
  38. ????????????<p>??
  39. ????????????????这个例子和单张图片差不多，但他允许使用rel属性使多张图片成为一组，在ThickBox里导航。这种完美的使用方法适用于图片集。??
  40. ????????????</p>??
  41. ????????????<h5>使用说明:</h5>??
  42. ????????????<ul>??
  43. ????????????????<li>创建一个link元素?(<a?href>)</li>??
  44. ????????????????<li>给创建的这个link元素一个class属性，其值是：thickbox;?(class="thickbox")</li>??
  45. ????????????????<li>在href属性中指定一个张图片地址?(.jpg?.jpeg?.png?.gif?.bmp)</li>??
  46. ????????????????<li>给每一个link元素一个相同的rel值。（比如：rel="gallery-plants"）</li>??
  47. ????????????</ul>??
  48. ????????????<h5>重点提醒:</h5>??
  49. ????????????<p>当你打开一个ThickBox图片集的时候,?你能通过键盘的左右箭头键向前和向前和向后导航（在?ThickBox?里也提供了Next和Previous的链接）。?图片将会在图片集中按HTML文档流程从第一张显示到最后一张。</p>??
  50. ????????</div>??
  51. ????????<div?id="sectionc-2"?class="anchor">??
  52. ????????<h5?class="hfivepadding">点击一张图片:</h5>??
  53. ????????????<p>??
  54. ????????????<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>??
  55. ???
  56. <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>??
  57. ???
  58. <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>??
  59. ???
  60. <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>??
  61. ????????????</p>??
  62. ????????</div>??
  63. ????????<div?id="sectionc-3"?class="anchor">??
  64. ????????<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>???
  65. <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>???
  66. <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>???
  67. <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>??
  68. ????????</div>??
  69. ????</div>??
  70. ??????
  71. ????<div?id="container-4">??
  72. ????????<ul?class="anchors"?style="width:100%">??
  73. ????????????<li><a?href="#sectiond-1">内嵌内容</a></li>??
  74. ????????????<li><a?href="#sectiond-2">演示</a></li>??
  75. ????????????<li><a?href="#sectiond-3">调用代码</a></li>??
  76. ????????</ul>??
  77. ????????<div?id="sectiond-1"?class="anchor">??
  78. ????????????<h5?class="hfivepadding">描述:</h5>??
  79. ????????????<p>??
  80. ????????????????页面中的内嵌内容，隐藏的或是显示的均可以放置在ThickBox中。??
  81. ????????????</p>??
  82. ????????????<h5>使用说明:</h5>??
  83. ????????????<ul>??
  84. ????????????????<li>创建一个link元素(<a?href>)</li>??
  85. ????????????????<li>给创建的这个link元素一个class属性，其值是：thickbox?(class="thickbox")</li>??
  86. ????????????????<li>给link元素的href属性设置为:?#TB_inline</li>??
  87. ????????????????<li>在href属性的值#TB_inlineIn后面追加一下字符:?<pre?class="exampleCode"><code?class="html">?height=300&width=300&inlineId=myOnPageContent</code></pre></li>??
  88. ????????????????<li>根据你的实际需要更改height,?width,?和?inlineId的值（这里的inlineID就是包含你想显示在ThickBox上的内容的容器的id）。</li>??
  89. ????????????????<li>当然你也可以在参数字符串中加?modal=true(比如.?#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true)?这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“显示隐藏模式的内容”则要求点击yes?或?no才能关闭ThickBox。</li>??
  90. ????????????</ul>??
  91. ????????????<h5>重点提醒:</h5>??
  92. ????????????<p>如果内嵌在ThickBox的内容多于ThickBox显示的尺寸，一个滚动条会出现。请确认ThickBox的尺寸和内容的匹配避免出现滚动条而显示全部内嵌内容。也就是说，如果不想要滚动条，你可以增加ThickBox的宽和高直到内嵌的内容不需要滚动条就能全部显示。</p>??
  93. ????????</div>??
  94. ????????<div?id="sectiond-2"?class="anchor">??
  95. ????????????<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>??
  96. ????????????<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>??
  97. ????????????<p><select?name=""><option>测试</option></select></p>??
  98. ????????????</div>??
  99. ????????????<div?id="hiddenModalContent"?style="display:none">??
  100. <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>??
  101. <p?style="text-align:center"><input?type="submit"?id="Login"?value="??Ok??"?onclick="tb_remove()"?/></p>??
  102. </div>??
  103. ????????</div>??
  104. ????????<div?id="sectiond-3"?class="anchor">??
  105. ????????<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"?/>????
  106. <a?href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"?class="thickbox">Show?hidden?modal?content.</a></code></pre>??
  107. ????????</div>??
  108. ????</div>??
  109. ??????
  110. ????<div?id="container-5">??
  111. ????????<ul?class="anchors"?style="width:100%">??
  112. ????????????<li><a?href="#sectione-1">iFramed?内容</a></li>??
  113. ????????????<li><a?href="#sectione-2">演示</a></li>??
  114. ????????????<li><a?href="#sectione-3">调用代码</a></li>??
  115. ????????</ul>??
  116. ????????<div?id="sectione-1"?class="anchor">??
  117. ????????????<h5?class="hfivepadding">描述:</h5>??
  118. ????????????<p>??
  119. ????????????在ThickBox中打开被?iFramed?URL.哈,?这正?<a?href="http://amix.dk/greybox/demo.html">Greybox</a>的功能.??
  120. ??
  121. Opens?URL‘s?in?an?iframe?inside?of?ThickBox.?Yes,?this?is?<a?href="http://amix.dk/greybox/demo.html">Greybox</a>?functionality.</p>??
  122. ????????????<h5>使用说明:</h5>??
  123. ????????????<ul>??
  124. ????????????????<li>创建一个link元素?(<a?href>)</li>??
  125. ????????????????<li>给创建的这个link元素一个class属性，其值是：thickbox?(class="thickbox")</li>??
  126. ????????????????<li>给link元素的href属性指向一个你希望在ThickBox显示的URL。</li>??
  127. ????????????????<li>href属性的URL后面追加上以下字符参数：?<pre?class="exampleCode"><code?class="html">?KeepThis=true&TB_iframe=true&height=400&width=600</code></pre></li>??
  128. ????????????????<li>根据你的实际需要改变上面的参数字符。</li>??
  129. ????????????????<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>??
  130. ????????????</ul>??
  131. ????????????<h5>重点提醒:</h5>??
  132. ????????????<p>所有其他参数字符都必须在TB_iframe?参数之前。URL中所有"TB"?之后的将被移除。</p>??
  133. ????????</div>??
  134. ????????<div?id="sectione-2"?class="anchor">??
  135. ????????????<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>??
  136. ??????????????????????
  137. ????????</div>??
  138. ????????<div?id="sectione-3"?class="anchor">??
  139. ????????<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>????
  140. <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>??
  141. <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>??
  142. </code></pre>??
  143. ????????</div>??
  144. ????</div>??
  145. ??
  146. ????<div?id="container-6">??
  147. ????????<ul?class="anchors"?style="width:100%">??
  148. ????????????<li><a?href="#sectionf-1">AJAX内容</a></li>??
  149. ????????????<li><a?href="#sectionf-2">演示</a></li>??
  150. ????????????<li><a?href="#sectionf-3">调用代码</a></li>??
  151. ????????</ul>??
  152. ????????<div?id="sectionf-1"?class="anchor">??
  153. ????????????<h5?class="hfivepadding">描述:</h5>??
  154. ????????????<p>??
  155. ????????????????采用一个隐藏的HTTP?request?(AJAX)?从同一个服务器上获取文件，并使用显示其内容。??
  156. ??????????</p>??
  157. ????????????<h5>使用说明:</h5>??
  158. ????????????<ul>??
  159. ????????????????<li>创建一个link元素?(<a?href>)</li>??
  160. ????????????????<li>给创建的这个link元素一个class属性，其值是：thickbox?(class="thickbox")</li>??
  161. ????????????????<li>给link元素的href属性指向一个链接文件或是服务器目录。(href="ajaxLogin.htm")?</li>??
  162. ????????????????<li>在href属性的URL后面追加以下字符来结束URL:?<pre?class="exampleCode"><code?class="html">?height=300&width=300</code></pre></li>??
  163. ????????????????<li>根据需要更改宽和高的值。</li>??
  164. ????????????????<li>当然，你也可以在上面的参数字符串再加上modal=true(比如.??height=300&width=300&modal=true)?这样当关闭ThickBox时会调用ThickBox内部的一个tb_remove()函数。在演示中查看“login”这个例子则要求点击yes?或?no才能关闭ThickBox。</li>??
  165. ????????????</ul>??
  166. ????????<h5>重点提醒:</h5>??
  167. ????????????<p>为了在新打开的Ajax?ThickBox中打开新的Ajax内容，他的代码必须包含适当的?HTML?(class=""thickbox)?来加载一个Ajax?ThickBox?(请留意演示例子)。其他唯一需要注意的一个地方就是调用的ThickBox必须包含宽和高，如果你给这两项留空，则窗口会自适应到默认大小（630*440）.</p>??
  168. ????????</div>??
  169. ????????<div?id="sectionf-2"?class="anchor">??
  170. ????????????<p><a?href="Upimg/ajaxOverFlow.html?height=300&width=400"?title="add?a?caption?to?title?attribute?/?or?leave?blank"?class="thickbox">有滚动条的内容</a>????
  171. <a?href="Upimg/ajax.html?height=220&width=400"?class="thickbox"?title="add?a?caption?to?title?attribute?/?or?leave?blank">没滚动条的内容</a>????
  172. <a?href="Upimg/ajaxLogin.html?height=85&width=250&modal=true"?class="thickbox"?title="Please?Sign?In">登入(模式)</a>??
  173. ????
  174. <a?href="Upimg/ajaxTBcontent.html?height=200&width=300"?class="thickbox"?title="">更新ThickBox内容</a></p>??
  175. ????????</div>??
  176. ????????<div?id="sectionf-3"?class="anchor">??
  177. ????????<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>????
  178. <a?href="Upimg/ajax.html?height=220&width=400"?class="thickbox"?title="add?a?caption?to?title?attribute?/?or?leave?blank">没滚动条的内容</a>????
  179. <a?href="Upimg/ajaxLogin.html?height=85&width=250&modal=true"?class="thickbox"?title="Please?Sign?In">登入(模式)</a>????
  180. <a?href="Upimg/ajaxTBcontent.html?height=200&width=300"?class="thickbox"?title="">更新ThickBox内容</a></code></pre>??
  181. ????????</div>??
  182. ????</div>??
  183. ??
  184. ????<div?style="clear:both"></div>??
  185. </div><!--?/examples?-->??

?


原文地址:http://www.freejs.net/article_tabbiaoqian_310.html

?

?

ThickBox tab标签页 加载图片和ajax内容 登陆框

原文：http://freejs.iteye.com/blog/2155888
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！