用jquery（而不是mootools）模拟这个滑块效果【水平手风琴效果】

Question

我可以使用 javascript 和其他所有东西，但在重新发明轮子之前，我想知道是否已经有类似的 jquery 插件，因为我想使用该框架而不是 mootools。

我对钱没有问题，特别是对于 5 欧元的模板，但我真的想使用 jquery，因为我研究了它而不是 mootools。

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

编辑1：我更改了标题，以供知道此类效果的正确名称的人将来参考，谢谢大家。

Answer 1

我一直喜欢 jquery 工具选项卡 - 请参阅 http://flowplayer.org/工具/演示/选项卡/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'
    });    
}

还有一件事 - 您只需使用 set 将手风琴包装到定位的“容器”中height 和 width 以避免手风琴元素在窗口调整大小时“跳舞”。