Нужно заменить Tab UI на select/option

Тема в разделе "Верстка", создана пользователем Guyri, 13 мар 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Guyri

    Guyri Создатель

    Регистр.:
    9 апр 2009
    Сообщения:
    40
    Симпатии:
    11
    Форумчане выручайте.
    Имеем элемент вывод информации при помощи табов(кусочег кода из бустрапа)
    Код:
        <div class="bs-docs-example">
            <ul id="myTab" class="nav nav-pills" style="margin-bottom: 0;">
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Тип<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#dropdown1" data-toggle="tab">Календарь 1</a></li>
                        <li><a href="#dropdown2" data-toggle="tab">Календарь 2</a></li>
                        <li><a href="#dropdown3" data-toggle="tab">Календарь 3</a></li>
                    </ul>
                </li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="dropdown1">
                    <div id="calendari_3"></div>
                </div>
                <div class="tab-pane fade" id="dropdown2">
                    <div id="calendari_1"></div>
                </div>
                <div class="tab-pane fade" id="dropdown3">
                    <div id="calendari_2"></div>
                </div>
            </di
    Мне же нужно сделать это как в режиме option
    Код:
                <select>
                  <option>Календарь 1</option>
                    <option>Календарь 2</option>
                    <option>Календарь 3</option>
                </select>
    Т.е. выбрав название нужного выбранного элемента(его название), оно оставалась как актив, и менялась при выборе следующего, а сл уже оставалось тоже активным ибо выбрано.

    Прошу помочь где копать, или же где почитать, так как примерно не понимаю что ввести в том же гугле фразу для поиска.
    Заранее буду благодарен.

    Ну или уж если совсем все туго, дайте пример кода покапать, ибо не понимаю как сотворить так, чтобы выбранный элемент в табе оставался активным при функционале dropdown(т.е. выше по позициям)
     
  2. Demuri

    Demuri Постоялец

    Регистр.:
    6 мар 2009
    Сообщения:
    59
    Симпатии:
    3
    Понимаю, что ответ поздновато пришел, но вдруг кому-то понадобится. Есть вот такой вариант - http://jsfiddle.net/Moor/VekSp/1/ : ul автоматически заменяется на select через jQuery

    PHP:
    $(function() {
        var 
    $select = $('<select id="mySelect"></select>');
        var 
    count 0;
        $(
    'ul.nav li a').each(function() {
          
    $select.append('<option value="' + (count++) + '">' + $(this).text() + '</option>');
        });
     
        $(
    '.nav').before($select).hide();
      });
     
    $(
    '#mySelect').on('change', function (e) {
        $(
    '#myTab li a').eq($(this).val()).tab('show');
    });