jquery外掛製作 手風琴Panel效果實現_jquery

首先我們還是建立一個html文件，裡麵包含如下的html結構。

複製程式碼 程式碼如下:

　　　

first pane

　　　　

this script should allow only one pane to visible at

div>
　　

　　　　

second pane

　　　　

> script should allow onon pane to be bethis 　　

　　

　　　　

third pane

　　　　　　
　　

　　

然後為頁面定義如下css：

程式碼如下:

padding: 10px;
margin: 0;
background-color: #e4e4e4;

} 　　 } 　　〜>我們來介紹jquery.accordtion.js插件的實作。首先我們要考慮的是如何隱藏pane裡面的內容部分，也就是p標籤。 h1作為標題是不需要隱藏的。

複製程式碼


程式碼如下:

(function ($) {

(function ($) { $. .accordtion = function () {

return this.each(function () { $(this).find('p').hide(); }); } })(jQuery);　　

頁面呼叫的程式碼：

複製程式碼

複製程式碼複製程式碼

複製程式碼



複製程式碼


程式碼

$(document).ready(function () {
　　$('#pane-container').accordtion();

}); 　　外掛程式碼很簡單，就是找到class為pane的div下面的p，對其隱藏。接下來我們要實現的是，當用戶點到h1的時候，對應的p標籤的內容顯示出來，同時其他h1對應的p標籤的內容隱藏。代碼如下： 複製代碼 代碼如下: //對h1標籤設置click事件self.delegate('h1', 'click', function () { 　　//為對應的p標籤設定slideToggle效果　　$(this).next('p').slideToggle(600) 　　　　　　//取得其他pane對象，找到他們下面的p標籤，收起　　　　　　.parent().siblings().children('p').slide(Up6000); 🎜> 現在我們的插件已經很有型了，最後要做的就是添加用戶自訂屬性options，這次我們只添加一個'預設顯示第幾個pane'的屬性。 複製程式碼 程式碼如下: //設定第幾個元素顯示self .children(':eq(' options.visibleByDefault ')')//找到和options.visibleByDefault一致的pane物件　　.children('p') 〜　.show(); 　　完整的程式碼大家還是下demo自己看吧。 jQuery.plugin.accordtion 　　謝謝大家的支持，希望這篇文章對你有幫助。如果對程式碼哪裡有不清楚的地方，可以聯絡我。