問題討論區


【JavaScript 語法】文章精華區


【分享】 介紹一個功能跟Lightbox 效果很像的 thickbox 功能



介紹一個功能跟Lightbox 效果很像的 thickbox 功能
會員二級
註冊日期:
2009/12/7 22:04
留言: 8
ThickBox 是 Cody Lindley 使用超輕量級的 jQuery 所開發
ThickBox除了具備圖像功能外,它還提供內置框架、內嵌內容、AJAX內容..等,是個多功能性的光箱
在連結後能在網頁形成美觀透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持"居中"

•對於圖像能用單一或多張方式展示,並重新調整大於瀏覽器的圖檔
•能夠在透明層中開啟內置框架預覽網頁
•開啟顯示網頁中指定的區塊(div)內容
•AJAX Content 載入網頁內容

ThickBox資料連結http://jquery.com/demo/thickbox/

附件:


rar thickbox.rar 大小: 36.18 KB; 下載次數: 1542

2010/2/11 3:39
 


回覆: 介紹一個功能跟Lightbox 效果很像的 thickbox 功能
會員二級
註冊日期:
2009/12/7 22:04
留言: 8
thickbox運用方法跟Lightbox是類似的,先把以附的檔案下載並放在網站的根目錄下之後...
複製這段

貼上語法在<head></head>之間
<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" />

完成之後,把thickbox.css 這CSS鍊結網頁中,這樣前置部分已完成



接下來是運用他的開始:

單一圖片作法
語法:在<a ……..插入class="thickbox"> <圖片img> </a>

<a href="大圖url" title="圖片" class="thickbox" >
<img src="小圖url" width="205" height="128" />
< /a>



圖片集作法
方法同上 此另加入 rel="chineseword"
rel="分類名稱" 的語法 只要是同一種分類名稱的圖檔,就會變成圖片集中的一員

<a href="大圖url" title="圖片" class="thickbox" rel="chineseword">
<img src="小圖url" width="205" height="128" />
< /a>
<a href="大圖url" title="圖片" class="thickbox" rel="chineseword">
<img src="小圖url" width="205" height="128" />
< /a>



內置框架作法

<a href="http://www.test.net
?keepThis=true&TB_iframe=true&height=500&width=820" title=" ThickBox " class="thickbox">連結</a>

// http://www.test.net(網址資料)

?keepThis=true&TB_iframe=true&height=500&width=820" title="ThickBox" class="thickbox" (語法)



顯示同一頁隱藏的文字 (以連結開啟指定div)
連結部分
<a href="#TB_inline?height=200&width=300&
inlineId=test01& modal=true" title="Title" class="thickbox">顯示隱藏
</a>

Div部分
<div id="test01" style="display:none" >
<p>ThickBox hidden modal content</p>
<p style="text-align:center"><input type="submit" value=" O k " onclick="tb_remove()" /></p>
</div>


// 連結部分
刪除 modal=true 就可顯示標題列
inlineId=test01

Div部分
style="display:none" 將區塊內容設為隱藏,不隱藏內容可刪除
需指定div的id (div id="test01")
若開啟不同的隱藏內容,更改div ID名稱,也就是說不同的ID名稱才能開啟不同的內容

注意 連結及Div 2部分ID這(inlineId=test01) (div id="test01")

按鈕也可開啟div作法同上

2010/2/11 5:09
 


回覆: 回覆: 介紹一個功能跟Lightbox 效果很像的 thickbox 功能
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1169
超贊的啦~

2010/2/23 0:51
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS