Как вставлять и вставлять вкладки как карусель

Question

Я пытаюсь сделать слайды в вкладках пользовательского интерфейса jQuery, как если бы они были рядом друг с другом и несколько приложены. Я думаю, что смогу добиться этого, одновременно запустив показ и спрячу анимацию.

В настоящее время jQuery отображает текущую панель, а затем следующую. Как я могу выдвинуть текущую панель, а в то же время перейти в следующую?

$("#tabs").tabs({ 
hide:{effect:"slide", direction:"right"}, 
show:{effect:"slide", direction:"left"} 
}); 

http://jsfiddle.net/CnEUh/2372/

Я хочу, чтобы начать оба hide: и show: эффекты одновременно, а не один за другим

Answer 1

Вот версия, основанная на мой оригинальный комментарий.

Это сохраняет систему вкладок jQuery, но скрывает существующие вкладки. Новый slidingTabs div содержит скользящие вкладки, чтобы они могли быть анимированы.

Update

По желанию, исходное содержание остается, как это было раньше.

function makeTabsIntoSlidingTabs($tabs) { 
 
    $tabs.find("div").wrapAll("<div style='display:none' />"); 
 
    $tabs.append("<div class='slidingTabs' />"); 
 
    $tabs.children("div").first().find("div").each(function(i) { 
 
    $tabs.find(".slidingTabs").append($("<div />").addClass("tab").html($(this).html())); 
 
    }); 
 

 
    $tabs.tabs({ 
 
    activate: function(event, ui) { 
 
     var tab = $tabs.tabs("option", "active"); 
 
     $tabs.find(".slidingTabs div").first().animate({ 
 
     marginLeft: (tab * -100) + '%' 
 
     }, 400, function() {}); 
 
    } 
 
    }); 
 
} 
 

 
makeTabsIntoSlidingTabs($("#tabs"));

.slidingTabs { 
 
    white-space: nowrap; 
 
    overflow-x: hidden; 
 
} 
 
.slidingTabs .tab { 
 
    width: 100%; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" /> 
 

 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tabs-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tabs-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Content for Tab 1</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>Content for Tab 2</p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Content for Tab 3</p> 
 
    </div> 
 
</div>

Answer 2

Это не то, что вы можете искать, но вы всегда можете ищите другие решения вне того, что дает вам jqueryui.

в этом примере я удалил эффект слайда, я обернул свое tab содержание divs в контейнер с nowrap и отображаюсь их как встроенный блок, чтобы они стояли бок о боке, даже если вы не видите их (overflow:hidden у родителя), затем с небольшим добавлением jquery и удалением классов в этот новый контейнер, когда вы нажимаете на вкладки и переход css, у вас может быть то, что вы ищете.

Гадкий как ад, но имхо это пример работы вокруг

$("#tabs").tabs({ 
    hide:{ 

    }, 
    show:{ 

    } 
}); 
$('#ui-id-1').click(function() { 
    $('.container').removeClass("move1"); 
    $('.container').removeClass("move2"); 
}); 
$('#ui-id-2').click(function() { 
    $('.container').addClass("move1"); 
    $('.container').removeClass("move2");  
}); 
$('#ui-id-3').click(function() { 
    $('.container').addClass("move2"); 
}); 

JSFIDDLE

Answer 3

Я думаю, что правильный способ изменить поведение виджета JQuery является расширяет его.

Таким образом, решение является расширяемым, оставляя место для настройки, позволяя вкладкам оставаться ui.widget, сохраняя стиль jQuery и управление состоянием.

$(document).ready(function() { 
 
    // Clean whitespaces before creating tabs 
 
    $('#tabs').cleanWhitespace(); 
 

 
    /* retains most of $.ui.tabs options, but now since both 
 
    * hide & show animations are combined there's a 
 
    * shared direction & duration 
 
    */ 
 
    $("#tabs").customSlideTabs({ 
 
    direction: "left", 
 
    duration: 500 
 
    }); 
 
}); 
 

 

 
$.widget("nameSpace.customSlideTabs", $.ui.tabs, { 
 
    _toggle: function(event, eventData) { 
 
    var that = this, 
 
     toShow = eventData.newPanel, 
 
     toHide = eventData.oldPanel; 
 

 
    this.running = true; 
 

 
    var container = $(toHide.parent()); 
 
    var originalContainerOverflow = container.css("overflow"); 
 

 
    function complete() { 
 
     container.css("overflow", originalContainerOverflow); 
 

 
     eventData.newTab.closest("li").addClass("ui-tabs-active ui-state-active"); 
 
     eventData.oldTab.closest("li").removeClass("ui-tabs-active ui-state-active"); 
 

 
     that.running = false; 
 
     that._trigger("activate", event, eventData); 
 
    } 
 

 
    // start out by hiding, then showing, then completing 
 
    if (toHide.length && toShow.length) { 
 
     if (!this.options.duration) this.options.duration = 300; 
 

 
     container.css({ 
 
     "overflow": "hidden", 
 
     "white-space": "nowrap" 
 
     }); 
 

 
     var fromX, toX; 
 

 
     if (this.options.direction == "right") { 
 
     toHide.appendTo(container); 
 
     fromX = "-100%"; 
 
     toX = 0; 
 
     } else { 
 
     toShow.appendTo(container); 
 
     fromX = 0; 
 
     toX = "-100%"; 
 
     } 
 

 
     toShow.css({ 
 
     "width": "100%", 
 
     "box-sizing": "border-box", 
 
     "display": "inline-block", 
 
     "vertical-align": "top", 
 
     "position": "relative", 
 
     "left": fromX, 
 
     "white-space": "wrap" 
 
     }); 
 
     toHide.css({ 
 
     "width": "100%", 
 
     "box-sizing": "border-box", 
 
     "display": "inline-block", 
 
     "vertical-align": "top", 
 
     "position": "relative", 
 
     "left": fromX, 
 
     "white-space": "wrap" 
 
     }); 
 

 
     toShow.animate({ 
 
     "left": toX 
 
     }, { 
 
     duration: that.options.duration, 
 
     complete: function() { 
 
      toShow.attr("style", "display: block;"); 
 
     } 
 
     }); 
 

 
     toHide.animate({ 
 
     "left": toX 
 
     }, { 
 
     duration: that.options.duration, 
 
     complete: function() { 
 
      toHide.attr("style", "display: none;"); 
 
      complete(); 
 
     } 
 
     }); 
 
    } else { 
 
     toHide.hide(); 
 
     toShow.show(); 
 
     complete(); 
 
    } 
 

 
    toHide.attr({ 
 
     "aria-expanded": "false", 
 
     "aria-hidden": "true" 
 
    }); 
 
    eventData.oldTab.attr("aria-selected", "false"); 
 
    // If we're switching tabs, remove the old tab from the tab order. 
 
    // If we're opening from collapsed state, remove the previous tab from the tab order. 
 
    // If we're collapsing, then keep the collapsing tab in the tab order. 
 
    if (toShow.length && toHide.length) { 
 
     eventData.oldTab.attr("tabIndex", -1); 
 
    } else if (toShow.length) { 
 
     this.tabs.filter(function() { 
 
      return $(this).attr("tabIndex") === 0; 
 
     }) 
 
     .attr("tabIndex", -1); 
 
    } 
 

 
    toShow.attr({ 
 
     "aria-expanded": "true", 
 
     "aria-hidden": "false" 
 
    }); 
 
    eventData.newTab.attr({ 
 
     "aria-selected": "true", 
 
     tabIndex: 0 
 
    }); 
 
    } 
 
}); 
 

 
// Gratitues http://stackoverflow.com/a/2587356/1645830 
 
$.fn.cleanWhitespace = function() { 
 
    textNodes = this.contents().filter(
 
     function() { 
 
     return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); 
 
     }) 
 
    .remove(); 
 
    return this; 
 
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tabs-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tabs-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tabs-1" class="tab"> 
 
    <p>Content for Tab 1</p> 
 
    </div> 
 
    <div id="tabs-2" class="tab"> 
 
    <p>Content for Tab 2</p> 
 
    <p>Content for Tab 2</p> 
 
    </div> 
 
    <div id="tabs-3" class="tab"> 
 
    <p>Content for Tab 3</p> 
 
    </div> 
 
</div> 
 
<div id="tabid"></div>

Это, не означает полного, так как это только поддержка сдвинув влево & право, а не полный набор анимации с JQuery, но я думаю, что это хорошая основа для работы.

Answer 4

Невозможно достичь этого эффекта, не изменяя скрипты js tabs. Вы можете использовать обходной путь с методом beforeActivate. Например.:

$("#tabs").tabs({ 
    hide:{effect:"slide", direction:"right"}, 
    beforeActivate: function(event, ui){ui.newPanel.show("slide", { direction: "left" });} 
}); 

Но тогда возникает проблема с позиционированием вкладок. Я написал быстрое решение этой проблемы, но я думаю, что лучше использовать некоторые пользовательские js. jsFiddle

$("#tabs").tabs({ 
 
    hide: { 
 
    effect: "slide", 
 
    direction: "right" 
 
    }, 
 
    beforeActivate: function(event, ui) { 
 
    setTimeout(function() { 
 
     ui.newPanel.css({ 
 
     'position': 'absolute', 
 
     'width': '100%', 
 
     'top': ui.oldPanel.offset().top - 11 
 
     }); 
 
     ui.newPanel.show("slide", { 
 
     direction: "left" 
 
     }, function() { 
 
     ui.newPanel.css({ 
 
      'position': 'relative', 
 
      'width': 'auto', 
 
      'top': 0 
 
     }); 
 
     }); 
 
    }, 15) 
 
    } 
 
});

body { 
 
    background-color: #eef; 
 
} 
 
#tabs { 
 
    width: 95%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
#tabs-1, 
 
#tabs-2, 
 
#tabs-3 { 
 
    outline: solid 5px red; 
 
    outline-offset: -5px; 
 
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tabs-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tabs-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Content for Tab 1 
 
     <br/> 
 
    </p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>Content for Tab 2</p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Content for Tab 3</p> 
 
    </div> 
 
</div> 
 
<div id="tabid"></div>

Answer 5

Попробовать это .HOpe это то, что вы needed.i использовали переход CSS для эффекта скольжения.

$(document).ready(function() { 
 
$("#tabs").tabs({ 
 
    beforeActivate: function(event, ui) { 
 
    var index = ui.newTab.find('a').attr('href'); 
 
    var currentPage = $(index).index(); 
 
    //530 is the width of the frame or you can say the overall width including padding and margin for the content tabs. 
 
    $('.inner').css('left', '-' + (currentPage) * 530 + 'px'); 
 
    }, 
 
}); 
 
    
 
});

body { 
 
    background-color: #eef; 
 
} 
 

 
#tabs { 
 
    width: 95%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
} 
 

 
#maindiv { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 530px; 
 
} 
 

 
.inner { 
 
    position: relative; 
 
    display: inline-flex; 
 
    height: 100%; 
 
    transition: -webkit-transition: left .6s ease-in-out; 
 
    transition: left .6s ease-in-out; 
 
} 
 

 
#tabs-1, 
 
#tabs-2, 
 
#tabs-3 { 
 
    outline: solid 5px red; 
 
    outline-offset: -5px; 
 
    float: left; 
 
    display: block !important; 
 
    width: 480px; 
 
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li><a href="#tabs-1">Tab 1</a> 
 
    </li> 
 
    <li><a href="#tabs-2">Tab 2</a> 
 
    </li> 
 
    <li><a href="#tabs-3">Tab 3</a> 
 
    </li> 
 
    </ul> 
 
    <div id="maindiv"> 
 
    <div class="inner" style="left:0px;"> 
 
     <div id="tabs-1"> 
 
     <p>Content for Tab 1</p> 
 
     </div> 
 
     <div id="tabs-2"> 
 
     <p>Content for Tab 2</p> 
 
     </div> 
 
     <div id="tabs-3"> 
 
     <p>Content for Tab 3</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="tabid"></div>

вы можете проверить Js скрипку Here.