Вертикальные вкладки с JQuery? - PullRequest
80 голосов
/ 21 апреля 2009

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

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

Ответы [ 8 ]

47 голосов
/ 06 октября 2009

Посмотрите на вертикальные вкладки пользовательского интерфейса jQuery 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>
7 голосов
/ 21 апреля 2009

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

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

Посмотрите на вкладку "Свобода", возможно, вам нужно.

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

6 голосов
/ 16 сентября 2009

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

меню:

<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();
});
4 голосов
/ 18 мая 2012
//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

2 голосов
/ 21 апреля 2009

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

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

Другой вариант - плагин для вкладок jQuery mb.extruder от Matteo Bicocchi: http://pupunzi.open -lab.com / MB-JQuery-компоненты / JQuery-MB-экструдер /

0 голосов
/ 14 мая 2014

супер простая функция, которая позволит вам создать свою собственную структуру табуляции / аккордеона здесь: 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 голосов
/ 21 апреля 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...