Home » jQuery 外掛

[jQ]Drop Down Panel script 1.0

[ 日期： | 瀏覽：6,260 | 迴響：8 ]
範例 1
請協助我把這個效果加到我的網站 (只要 600 元)
沒錯!只要 600 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

Drop Down Panel script 1.0

Drop Down Panel script 加入一個下拉的區塊在網頁的頂部，透過 Ajax 的方式載入指定的網頁內容。用來當廣告或是消息顯示的話還蠻有趣的。

套件名稱：Drop Down Panel script
套件版本：1.0
作者網站：http://www.javascriptkit.com/script/script2/dropdownpanel.shtml
套件網址：http://plugins.jquery.com/project/dropdownpanelscript
發佈日期：2008-03-29
檔案大小：1.34 KB
檔案下載：jkpanel.js

參數說明：

檢視原始碼 JavaScript
1
2
3

controltext(選填)
描述： 按鈕顯示的文字
預設值： 'Panel Content'

方法說明：

檢視原始碼 JavaScript
1
2

// 載入 file，同時指定其區塊的 height 及顯示時的 speed
jkpanel.init(file, height, speed);

使用範例：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jkpanel.js"></script>
<style type="text/css">
	#dropdownpanel{ /*Outermost Panel DIV*/
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		visibility:hidden;
	}
	#dropdownpanel .contentdiv{ /*Div containing Ajax content*/
		background: black;
		color: white;
		padding: 10px;
	}
	#dropdownpanel .control{ /*Div containing panel button*/
		border-top: 5px solid black;
		color: white;
		font-weight: bold;
		text-align: center;
		background: transparent url("images/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/
		padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
		height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
		line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
	}
</style>
<script type="text/javascript">
	$(function(){
		// 設定按鈕顯示文字為-熱門消息
		jkpanel.controltext = "熱門消息";
 
		// 設定載入 panelcontent.htm，height 為 200px，顯示速度為 500(毫秒)
		jkpanel.init('panelcontent.htm', '200px', 500);
	});
</script>
 
<body>
 
</body>
範例 1

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

8 筆針對 [jQ]Drop Down Panel script 1.0 的迴響

    • 以這個外掛來看, 就只是上往下。要從左往右的話, 只要把區塊設成 absolute 後, 再改變 left 值即可

發表迴響