jquery插件制作 手風(fēng)琴Panel效果實(shí)現(xiàn)
<div id="pane-container">
<div class="pane">
<h1>first pane</h1>
<p>this script should allow only one pane to be visible at a time.</p>
</div>
<div class="pane">
<h1>second pane</h1>
<p>this script should allow only one pane to be visible at a time.</p>
</div>
<div class="pane">
<h1>third pane</h1>
<p>this script should allow only one pane to be visible at a time.</p>
</div>
</div>
然后為頁(yè)面定義如下css:
<style type="text/css">
#pane-container
{
margin: 0;
padding: 0;
width: 200px;
}
.pane h1
{
padding: 5px;
cursor: pointer;
position: relative;
background-color: #4c4c4c;
color: #fff;
font-weight: normal;
font-size: 20px;
margin: 0px;
}
.pane p
{
padding: 10px;
margin: 0;
background-color: #e4e4e4;
}
</style>
下面我們來(lái)介紹jquery.accordtion.js插件的實(shí)現(xiàn)。首先我們需要考慮的是如何隱藏pane里面的內(nèi)容部分,也就是p標(biāo)簽。h1作為標(biāo)題是不需要隱藏的。
(function ($) {
$.fn.accordtion = function () {
return this.each(function () {
$(this).find('p').hide();
});
}
})(jQuery);
頁(yè)面調(diào)用的代碼:
$(document).ready(function () {
$('#pane-container').accordtion();
});
插件代碼很簡(jiǎn)單,就是找到class為pane的div下面的p,對(duì)其隱藏。接下來(lái)我們要實(shí)現(xiàn)的是,當(dāng)用戶點(diǎn)到h1的時(shí)候,對(duì)應(yīng)的p標(biāo)簽的內(nèi)容顯示出來(lái),同時(shí)其他h1對(duì)應(yīng)的p標(biāo)簽的內(nèi)容隱藏。代碼如下:
//對(duì)h1標(biāo)簽設(shè)置click事件
self.delegate('h1', 'click', function () {
//為對(duì)應(yīng)的p標(biāo)簽設(shè)置slideToggle效果
$(this).next('p').slideToggle(600)
//獲取其他pane對(duì)象,找到他們下面的p標(biāo)簽,收起
.parent().siblings().children('p').slideUp(600);
});
現(xiàn)在我們的插件已經(jīng)很有型了,最后要做的就是添加用戶自定義屬性options,這次我們只添加一個(gè)‘默認(rèn)顯示第幾個(gè)pane'的屬性。
//設(shè)置第幾個(gè)元素顯示
self.children(':eq(' + options.visibleByDefault + ')')//找到和options.visibleByDefault一致的pane對(duì)象
.children('p')
.show();
完整的代碼大家還是下demo自己看吧。jQuery.plugin.accordtion
謝謝大家的支持,希望本篇文章對(duì)你有幫助。如果對(duì)代碼哪里有不清楚的地方,可以聯(lián)系我。
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- jQuery實(shí)現(xiàn)的簡(jiǎn)單手風(fēng)琴效果示例
- jQuery制作效果超棒的手風(fēng)琴折疊菜單
- 基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
- 基于jquery的slideDown和slideUp做手風(fēng)琴
- jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼
- jquery手風(fēng)琴特效插件
- Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
- jquery超簡(jiǎn)單實(shí)現(xiàn)手風(fēng)琴效果的方法
- jquery實(shí)現(xiàn)手風(fēng)琴展開效果
相關(guān)文章
jQuery ui實(shí)現(xiàn)動(dòng)感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery ui實(shí)現(xiàn)動(dòng)感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼,涉及jquery插件構(gòu)造圓角圖形及頁(yè)面過(guò)度效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jQuery實(shí)現(xiàn)簡(jiǎn)單復(fù)制json對(duì)象和json對(duì)象集合操作示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單復(fù)制json對(duì)象和json對(duì)象集合操作,結(jié)合實(shí)例形式分析了jQuery使用extend方法操作json對(duì)象與json對(duì)象集合復(fù)制相關(guān)技巧,需要的朋友可以參考下2018-07-07jQuery實(shí)現(xiàn)復(fù)選框的全選和反選
本文主要分享了使用jQuery實(shí)現(xiàn)復(fù)選框的全選和反選的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02jquery ui dialog替代confirm實(shí)例分析
這篇文章主要介紹了jquery ui dialog替代confirm的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery ui插件的dialog模擬confirm功能的具體步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求,返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請(qǐng)求,返回DataSet(XML) 異步調(diào)用實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-03-03jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié)
這篇文章主要介紹了jQuery EasyUI Tab 選項(xiàng)卡問題小結(jié),在項(xiàng)目開發(fā)階段很多朋友都遇到過(guò)此問題,其實(shí)解決辦法很簡(jiǎn)單的,下面小編給大家分享下問題原因及解決辦法,需要的朋友可以參考下2016-08-08jquery控制頁(yè)面的展開和隱藏實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)?lái)一篇jquery控制頁(yè)面的展開和隱藏實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jquery檢測(cè)input checked 控件是否被選中的方法
這篇文章主要介紹了jquery檢測(cè)input checked 控件是否被選中的方法,需要的朋友可以參考下2014-03-03