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

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

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

使用範例：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" src="http://abgne.myweb.hinet.net/jQuery/plugins/0028/js/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>

範例瀏覽：

http://abgne.myweb.hinet.net/jQuery/plugins/0028/0028.html