當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery ThickBox很好很弓虽大

發布時間：2023/12/18 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery ThickBox很好很弓虽大小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery ThickBox很好很弓雖大

雖然俺們平常主要在后臺搗鼓，但是偶爾也要跑到前臺去湊湊熱鬧。今天要推薦一下ThickBox。現在回想以前沒有使用JavaScript框架的年代，也不知道當時是怎么過來的。靠DOM一點一點拼湊，然后慢慢解析xml…… Oh,?買糕的,殺了俺們把。

ThickBox真的很好用，如果您還沒了解過，應該考慮花點時間看看。ThickBox?是基于?jQuery編寫的，主要方便我們彈出一個專業點的對話框，你可以用它來展示單一圖片,?若干圖片,?內嵌的內容, iframe的內容。在網頁中主要樣子就是render出一個半透明的遮蔽層，在屏幕中間或其它位置來顯示您想寫的提示性內容或者顯示一些圖片。它在網站有不少地方可有用到，例如用戶登錄可以不用跳轉到登錄頁面去操作然后再返回前面的操作頁面了，還有你知道用戶某個動作很耗費時間，你要通知用戶別著急小等一會，彈出這么一個對話框，絕對很專業。如果您還不心動，舉個實際使用的地方，http://www.douban.com/subject/1905038/，訪問豆瓣這本書，點擊想讀，在讀或者讀過都會彈出一個對話框，讓你方便的操作，這樣就可以充分利用ajax也能夠給用戶一個很好的UI表現。

ThickBox很小，所以你不用擔心客戶端耗費太多時間來load這些組件，壓縮過的thickbox.js才6k不到，css也4k不到。總共才約10k。

下面給個簡單的例子，看過大家它是多么簡單了。

<html>
<head>
????<title>test?thickbox</title>
????<script?type="text/javascript"?src="jquery.js"></script>?
????<script?type="text/javascript"?src="thickbox.js"></script>
????<link?rel="stylesheet"?href="thickbox.css"?type="text/css"?media="screen"?/>
</head>
<body>
???<input?alt="#TB_inline?height=300&width=400&inlineId=div1"?title="shawnliu"?class="thickbox"?type="button"?value="Show"?/>???
???<a?href="#TB_inline?height=155&width=300&inlineId=div2&modal=true"?class="thickbox">Show?hidden?modal?content.</a>
???
???<div?id="div1"?style="display:none">
???<P>
?????這是一個非模式對話框。
???</P>
???</div>
???<div?id="div2"?style="display:none">
???<P>
?????這是一個模式對話框。
?????<p?style="TEXT-ALIGN:?center"><INPUT?id="Login"?onclick="tb_remove()"?type="submit"?value="??Ok??"?/></p>
???</P>
???</div>
</body>
</html>

這個例子夠簡單把。我都懶得解釋了。你在一個鏈接或者按鈕上加上一個class=”thickbox”，然后在合適的attribute上加上#TB_inline參數，你可以制定對話框的高度和寬度，以及想顯示的內容所在的element id，還可以指定模式還是非模式對話框。至于圖片就更加簡單了。上面例子你想自己demo一下，先去下載thickbox.js和thickbox.css就很快可以看到fancy的效果。地址在這：http://jquery.com/demo/thickbox/。

如果你想在對話框中呈現的內容不在當前頁面，可以通過ajax去拿，thickbox也很好的支持這種情況。

<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>?

?<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>

需要解釋么，不需要把。更多例子參見http://jquery.com/demo/thickbox/。

類似的還有http://www.huddletogether.com/projects/lightbox/。?

http://www.blueidea.com/download/product/2007/5182.asp??

轉載于:https://www.cnblogs.com/yuanqiang/archive/2008/11/17/1335132.html

總結

以上是生活随笔為你收集整理的jQuery ThickBox很好很弓虽大的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。