男丁格爾's 脫殼玩

沒錯!只要 900 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

如果是第一次接觸到 Mac 的使用者，應該會對於其桌面的選單感覺到很新奇及絢麗吧！國外就有網友用 jQuery 來模擬出這樣的效果來。而 IconDock 就是一個這樣的外掛。

套件名稱：IconDock
套件版本：0.8 beta
作者網站：http://siknus.cat/icondock-jquery-plugin-mac-os-x-menu-dock
套件網址：http://plugins.jquery.com/project/iconDock
發佈日期：2007-02-05
檔案大小：4.30 KB
檔案下載：jquery.dock-0.8b.js

參數說明：

檢視原始碼 JavaScript

iconMinSide(選填)
描述： 選單圖示最小的高度，建議值介於 20 - 50
預設值： 35
 
iconMaxSide(選填)
描述： 選單圖示最大的高度，建議值介於 70 - 140
預設值： 70
 
distAttDock(選填)
描述： 效果的衰減距離，就是滑鼠跟效果結束的距離
預設值： 100
 
coefAttDock(選填)
描述： 衰減係數，效果消失的速度，建議值介於 0.5 - 2.5
預設值： 2
 
veloOutDock(選填)
描述： 回復的速度，選單圖示在滑鼠離開後間隔多久要回到原位置(毫秒)
預設值： 1000
 
valign(選填)
描述： 選單圖示排列的方式，允許的值有 'top'、'bottom'、'middle'
預設值： 'middle'

方法說明：

檢視原始碼 JavaScript

1 2	// 把指定的區塊轉換成 IconDock 效果 $(selector).addDockEffect(conf);

使用範例：

檢視原始碼 JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dock-0.8b.js"></script>
<script type="text/javascript">
	$(function(){
		// 加入 iconDock 效果
		// 對齊圖示的下方
		$("#Bar").addDockEffect({
			iconMinSide : 64,
			iconMaxSide : 128,
			distAttDock : 100,
			coefAttDock : 2,	
			veloOutDock : 500,
			valign: "bottom"
		});
	});
</script>
 
<body>
	<div id="Bar">
		<a href="#">
			<img src="images/1_64.gif" alt="效能檢視" border="0" />
		</a>
		<a href="#">
			<img src="images/2_64.gif" alt="功能設定" border="0" />
		</a>
		<a href="#">
			<img src="images/3_64.gif" alt="事件紀錄" border="0" />
		</a>
		<a href="#" title="能快速掌握整體功能">
			<img src="images/4_64.gif" border="0" />
		</a>
		<a href="#" name="能定時檢查">
			<img src="images/5_64.gif" alt="更新檢查" border="0" />
		</a>
		<a href="#">
			<img src="images/6_64.gif" alt="下載更新" border="0" />
		</a>
	</div>
</body>

範例 1

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

附註：
圖片的檔名要跟著 iconMinSide 及 iconMaxSide 這兩屬性來設定才會有用。

也許您對這些文章也有興趣

31 筆針對 [jQ]IconDock 0.8 beta 的迴響

« 前一頁 1 2 3 下一頁 »

啦啦於 2010-06-19 22:44:59 說：

正常了! 謝謝你^^

回覆 ↓
分頁於 2010-06-21 15:07:19 說：

可不可以請教你有關jquery分頁的部分

回覆 ↓
- 男丁格爾於 2010-06-21 15:52:54 說：
  
  可以討論看看...:)
  
  回覆 ↓
新手於 2010-10-11 16:28:25 說：

請問一下
我測試的時候怎麼都沒有反應呢
圖片都不會動
那個套件要還要在另外安裝嗎??
如果是的話
因為是英文網站
不是很清楚要如何下載

回覆 ↓
derek 於 2010-10-11 16:34:05 說：

to 新手
建議將你的程式碼提供上來
這樣才能知道你的問題在哪

回覆 ↓
新手於 2010-10-11 16:41:52 說：

阿....我發現問題了

我沒有下載jquery元件
用了jquery-1.4.2.min.js這個是最新的八
就可以了

回覆 ↓
新手於 2010-10-11 16:42:40 說：

derek大
謝謝你的回覆真是有效率^^

回覆 ↓
新手於 2010-10-11 17:34:27 說：

阿..又有瓶頸了
這個範例獨自作測試都ok
可是當我把這個範例加入到另一個也含有jquery的頁面中時
這個就不能使用了

無標題文件

<!-

body {
background-color: #FFF;
top: 0px;
position: relative;
margin-top: 0px;
}

$(function(){
// 初始化參數
.
.
.

以上我頁面的大概結構
因為我的首頁有使用spry 所以就有他的script在了
然後我又使用了一個jquery的選單列
現在加上這個按鈕的時候其他都還正常只是這個按鈕不行動
測了很久都不行
請問是哪裡出問題
像我這樣那多的javascript該如何管理??!!
我都是先另開頁面
把每一個像是按鈕選單列做好後
再把div複製起來貼到我首頁牌好版的div內
css 以及script我就用引用的方式
可是以我現在來看是不是引用不能超過兩個阿
很多困惑希望大大可以幫忙解答

.
.
.

回覆 ↓
新手於 2010-10-11 17:37:19 說：

重新輸入依次

無標題文件

<!-

body {
background-color: #FFF;
top: 0px;
position: relative;
margin-top: 0px;
}

$(function(){
.
.

.
.(省略內容)
.

回覆 ↓
- 男丁格爾於 2010-10-11 17:42:36 說：
  
  如果你要貼程式碼的話..請貼在 code 區塊中, 或者直接到討論區發問！
  
  回覆 ↓
anthony 於 2011-02-15 11:06:25 說：

請問男丁老師:
你說大圖的檔名就是要_128結尾,但我看你的範例html程式碼中
你並沒有寫128結尾的檔名
我只是複製你的範例程式碼但滑鼠移動過去時圖片放大時依然沒有圖片
那要怎麼寫呢

回覆 ↓
- 男丁格爾於 2011-02-15 11:09:22 說：
  
  要有同檔名且_128結尾的圖檔放同路徑下, 這外掛自己會去抓的。
  
  回覆 ↓
anthony 於 2011-02-15 11:25:44 說：

我在iconMinSide : 64,照片的路徑也是在同一個網頁資料夾裡的images/1_64.gif
但為什麼ie會出現錯誤訊息附上照片
https://picasaweb.google.com/s920002625/IconDock#5573752909038719170

回覆 ↓
- 男丁格爾於 2011-02-15 11:30:15 說：
  
  你誤會我意思了...假設你 script 那邊 iconMinSide 設 64, 表示你要有小圖 _64 結尾的
  然後 iconMaxSide 若設成 140 的話, 表示你也要自備 _140 結尾的圖片
  
  回覆 ↓

也許您對這些文章也有興趣

31 筆針對 [jQ]IconDock 0.8 beta 的迴響

發表迴響 取消回覆

發表迴響取消回覆