Имитируйте этот эффект слайдера с помощью jquery (вместо mootools) [Горизонтальный эффект аккордеона] - PullRequest
Новая
       0

Имитируйте этот эффект слайдера с помощью jquery (вместо mootools) [Горизонтальный эффект аккордеона]

1 голос
/ 21 сентября 2011

Я могу использовать javascript и все остальное, но прежде чем изобретать велосипед, я хотел бы знать, существует ли уже подобный плагин для jquery, потому что я хотел бы использовать этот каркас, а не mootools.

У меня нет проблем с деньгами, особенно для шаблона за 5 €, но я действительно хотел бы использовать jquery, потому что я изучал его, а не mootools.

Шаблон: http://www.globbersthemes.com/demo/upsilum/

РЕДАКТИРОВАТЬ 1: Я изменил название для будущих ссылок для людей, которые знают правильное название этого типа эффекта, спасибо всем.

Ответы [ 3 ]

1 голос
/ 21 сентября 2011

Вот плагин, который может вас заинтересовать: http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

1 голос
/ 22 сентября 2011

Здесь я заново изобрел колесо. Но было много веселья! :)
Проверено во всех современных браузерах + IE 6-7-8

  • Вместо использования «титульных» изображений теперь вы можете использовать классический редактируемый текст!
  • Установить нужную вкладку «Пуск»

РЕДАКТИРОВАТЬ: добавлена ​​/ исправлена ​​поддержка заголовка (поворот для IE 6-7-8)

H - ДЕКО АККОРДЕОНА

enter image description here

Простой 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, чтобы избежать «танца» элементов аккордеона при изменении размера окна.

1 голос
/ 21 сентября 2011

Мне всегда нравились вкладки jquery tools - см. http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html

...