何尹璇：璇璇的祕密花園 » JavaScript http://poet.930.info/blog 每當夜深孤獨一人的時候，我會試著寫下一些記憶　它可能是愛情，可能是生活，也可能是一種夢與痛苦的感受 Sat, 21 Jan 2012 15:22:49 +0000 en hourly 1 http://wordpress.org/?v=3.1 thickbox 浮動視窗 http://poet.930.info/blog/2010/03/28/thickbox/ http://poet.930.info/blog/2010/03/28/thickbox/#comments Sun, 28 Mar 2010 03:03:21 +0000 小璇子 http://poet.930.info/blog/?p=1079 此篇為自我記錄

因彈跳視窗氾濫, 所以有些瀏覽器設定會把這類自動彈跳出來的視窗檔掉, 所以有了thickbox這種漂亮美觀的功能套件出現, 如果只是要點小圖出現大圖的話, 只要直接連結圖片即可,根本連頁面都不需要有~非常方便!

1) 解壓縮 trunk.zip
2) loadingAnimation.gif 放到 images/ 下面 (可換圖)
3) 另外三個檔放在根目錄下

檔前加這三行：

?View Code CSS
<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" />

要顯示的圖片用法：

?View Code CSS
<a href="圖片檔名" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">縮圖或文字</a>
<a href="圖片檔名" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">縮圖或文字</a>

add a caption to title attribute / or leave blank = 添加標題屬性/或留空

連結後面要放縮圖或文字隨你 happy~

Ps.若網頁有用 Flash 影片的話, Flash影片會蓋住 彈跳出來的視窗
只要在 flash 語法正確的位置上加入這兩串字就可以了
兩串都要加!! 這樣所有的瀏覽器才都可以正常!

?View Code CSS
<param name="wmode" value="transparent" />
wmode = 'transparent'

你可以延伸閱讀以下文章：

]]> http://poet.930.info/blog/2010/03/28/thickbox/feed/ 0 游標移入文字方塊文字消失效果 http://poet.930.info/blog/2008/12/08/%e6%b8%b8%e6%a8%99%e7%a7%bb%e5%85%a5%e6%96%87%e5%ad%97%e6%96%b9%e5%a1%8a%e6%96%87%e5%ad%97%e6%b6%88%e5%a4%b1%e6%95%88%e6%9e%9c/ http://poet.930.info/blog/2008/12/08/%e6%b8%b8%e6%a8%99%e7%a7%bb%e5%85%a5%e6%96%87%e5%ad%97%e6%96%b9%e5%a1%8a%e6%96%87%e5%ad%97%e6%b6%88%e5%a4%b1%e6%95%88%e6%9e%9c/#comments Mon, 08 Dec 2008 06:18:40 +0000 小璇子 http://poet.930.info/blog/?p=296 ?View Code CSS
<input type=text value="請輸入關鍵字" onMouseOver="this.focus()"
 onFocus="this.select()" onclick="this.value=''">

效果如下：

你可以延伸閱讀以下文章：

]]> http://poet.930.info/blog/2008/12/08/%e6%b8%b8%e6%a8%99%e7%a7%bb%e5%85%a5%e6%96%87%e5%ad%97%e6%96%b9%e5%a1%8a%e6%96%87%e5%ad%97%e6%b6%88%e5%a4%b1%e6%95%88%e6%9e%9c/feed/ 0