用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-horizontal.html

Answer 2

这是一个您可能感兴趣的插件：http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

Answer 3

在这里，我重新发明了轮子。但有乐趣！ :)
在所有现代浏览器中测试+ IE 6-7-8

• 现在不使用“标题”图片，而是使用经典的可编辑文字！
• 设置所需的“开始”标签

<小时/>

编辑：添加/修复标题支持（IE 6-7-8的旋转）

H - ACCORDION DEMO

简单的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样式Ex：

.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的定位'容器'中，以避免手风琴元素在窗口调整大小时“跳舞”。