it-swarm.com.ru

Вертикальные вкладки с JQuery?

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

Чрезвычайно ли сложно работать с вертикальными вкладками в разных браузерах, или это настолько тривиально, что, если у вас есть решение, не стоит публиковать пример кода?

80
Thomas L Holaday

Взгляните на вертикальные вкладки jQuery UI Docu . Я пробовал, все работало нормально.

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style> 

<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
        $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

    });
</script>
47
ig4

Попробуйте здесь:

http://www.sunsean.com/idTabs/

Посмотрите на вкладку Freedom может иметь то, что вам нужно.

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

7
David Berger

Я создал вертикальное меню и вкладки меняются в середине страницы. Я изменил два слова в коде источника и выделил два разных элемента

меню:

<div class="arrowgreen">
  <ul class="tabNavigation"> 
    <li> <a href="#first" title="Home">Tab 1</a></li>
    <li> <a href="#secund" title="Home">Tab 2</a></li>
  </ul>
</div> 

содержание:

<div class="pages">
  <div id="first">
    CONTENT 1
  </div>
  <div id="secund">
    CONTENT 2
  </div>
</div>

код работает с div отдельно 

$(function () {
    var tabContainers = $('div.pages > div');

    $('div.arrowgreen ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.arrowgreen ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});
6
Ricardo Lima
//o_O\\  (Poker Face) i know its late

просто добавьте ниже стиль CSS

<style type="text/css">

   /* Vertical Tabs ----------------------------------*/
 .ui-tabs-vertical { width: 55em; }
 .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
 .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
 .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
 .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
 .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

</style>

ОБНОВЛЕНО! http://jqueryui.com/tabs/#vertical

4
Code Spy

Я не ожидал бы, что вертикальные вкладки будут нуждаться в другом JavaScript из горизонтальных вкладок. Единственное, что будет отличаться - это CSS для представления вкладок и контента на странице. JS для вкладок, как правило, не более, чем показать/скрыть/возможно загрузить контент.

2
mdja

Другой вариант - плагин для вкладок jQuery mb.extruder от Matteo Bicocchi: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

1
Gavin

супер простая функция, которая позволит вам создать свою собственную структуру вкладок/аккордеона здесь: http://jsfiddle.net/nabeezy/v36DF/

bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) {
        //Dependent on jQuery
        //PARAMETERS
        //tabClass: 'the class name of the DOM elements that will be clicked',
        //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)',
        //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked',
        //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)',
        //MUST call bindSets() after dom has rendered

        var tabs = $('.' + tabClass);
        var tabContent = $('.' + contentClass);
        if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')};
        tabs.each(function (index) {
            this.matchedElement = tabContent[index];
            $(this).click(function () {
                tabs.each(function () {
                    this.classList.remove(tabClassActive);
                });
                tabContent.each(function () {
                    this.classList.add(contentClassHidden);
                });
                this.classList.add(tabClassActive);
                this.matchedElement.classList.remove(contentClassHidden);
            });
        })
        tabContent.each(function () {
            this.classList.add(contentClassHidden);
        });

        //tabs[0].click();
    }
bindSets('tabs','active','content','hidden');
0
Joe Nabeezy

Взгляните на Листаматик . Семантически вкладки - это просто список элементов, стилизованных определенным образом. Вам даже не нужен javascript для работы вертикальных вкладок, как показывают различные примеры в Listamatic.

0
Ryan Bolger