站內搜尋

Saturday, May 7, 2011

[jQuery] ThickBox 超簡單的燈箱套件 使用教學

版主:官方已不更新,故網站及連結皆已失效。
----

燈箱是近幾年滿常見的網頁設計技巧,就連臉書(facebook)的相片前一陣子也改以燈箱方式呈現,而眾多燈箱套件中,ThickBox是一套非常輕巧且簡單的套件,使用方式如下...

ThickBox提供了程式碼供我們下載
    下載連結:thickbox.js
    下載連結:thickbox.css
還有一個圖檔(圖檔必須放在/images檔案夾下)
    下載連結:http://jquery.com/demo/thickbox/images/loadingAnimation.gif
然後我們在使用google所提供的jquery檔,以減少網站流量負擔
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
有了這些必要的元件後,我們就可以開始使用thickbox了

步驟1:在head中引入必要的物件
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />


步驟2:在body中編輯程式碼
[應用一] 如果我們只是單純使用圖片燈箱
<a href="images/p1.jpg" title="照片說明" class="thickbox"><img src="images/p1.jpg" /></a>
[應用二] 如果我們要在燈箱中出現文字訊息(先以display:none隱藏文字訊息)
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">登入</a>
<div id="hiddenModalContent" style="display:none" >
<form method="post">
<input type="text" name="use_name" />
<input type="text" name="use_password" />
<input type="submit" name="submit_login" value="登入" />
</form>
</div>

[應用三] 在燈箱中使用PHP及AJAX技術
(待補充)

No comments:

Post a Comment