用jquery（而不是mootools）模擬此滑塊效果[水平手風琴效果]

Question

我可以使用javascript以及其他所有功能，但是在重新發明輪子之前，我想知道是否已經有一個類似的jquery插件，因為我想使用該框架而不是mootools。

我沒有金錢上的問題，特別是對於一個5歐元的模板，但實際上我想使用jquery，因為我研究了它而不是mootools。

模板： http ： //www.globbersthemes.com/demo/upsilum/

編輯1：感謝所有人，我為知道這種效果的正確名稱的人更改了標題，以供將來參考。

Answer 1

我一直很喜歡這個的jquery工具標簽-參見http://flowplayer.org/tools/demos/tabs/accordion-horizo​​ntal.html

Answer 2

這里是您可能感興趣的插件： http : //www.portalzine.de/Horizo​​ntal_Accordion_Plugin_2/index.html

Answer 3

在這里，我重新發明了輪子。 但是玩得很開心！ :)
在所有現代瀏覽器+ IE 6-7-8中經過測試

• 現在，您可以使用經典的可編輯文本來代替“標題”圖像了！
• 設置所需的“開始”標簽

---

編輯：添加/修復了標題支持（針對IE 6-7-8的旋轉）

H-手風琴示范

簡單的HTML：

<div id="acc">

        <div class="title"><p class="button">Title 1</p></div>
        <div class="cont">Cont 1</div>   

        <div class="title"><p class="button">Title 2</p></div>
        <div class="cont">Cont 2</div>   

        <!-- more tabs here.... -->
</div>

CSS樣式示例：

.title{
    cursor:pointer;
    position:relative;
    float:left;
    width:20px;
    height:200px;
    background:#444;
    color:#ccc;
    padding:15px;
    border-left:3px solid #aaa;
}
.cont{
    position:relative;
    float:left;
    width:300px;
    background:#999;
    height:200px;
    padding:15px;
}
.slide{
    position:relative;
    float:left;
    overflow:hidden;
    width:0px;
}
.active{
    background:#cf5;
    color:#444;
}
.button{
    white-space:nowrap;
    margin-top:180px;
    font-size:20px;
    line-height:25px;
    text-align:left;
}

而有趣的部分：jQuery！

//+IE678//// HORIZONTAL ACCORDION // roXon //////
var curr = 3;   // set desired opened tab

var contW = $('.cont').outerWidth(true);
$('.cont').wrap('<div class="slide" />');
$('.slide').eq(curr-1).width(contW).prev('.title').addClass('active');
$('.title').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    $('.slide').stop().animate({width:0},700);
    $(this).next('.slide').stop().animate({width:contW},700);
});
// TITLE ROTATION IE 6-7-8 FIX //
var titleH = $('.title').height();
var btn = $('.button');
btn.css('-webkit-transform','rotate(-90deg)');
btn.css('-moz-transform','rotate(-90deg)');
btn.css('transform','rotate(-90deg)');

if($.browser.msie && $.browser.version<="8.0"){
    btn.css({
        filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)',
        width: titleH+'px',
        position:'absolute',
        marginTop:'0px'
    });    
}

還有一件事-您只需要將手風琴包裝到一個已設置height和width “容器”中，就可以避免手風琴元素在調整窗口大小時“跳舞”。