Сочетание мобильных вкладок jQuery с панелью

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

Что я хочу, удалите navbar-tabs из виджета вкладки и разрешите ему работать только через виджет панели.

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

Как закрыть панель и перейти на соответствующую страницу вкладок?

<body> 
    <div data-role="page"> 
     <div data-role="panel" id="navpanel" data-display="overlay"> 
      <ul> 
       <li><a href="#news" class="ui-btn">News</a></li> 
       <li><a href="#contact" class="ui-btn">Contact</a></li> 
      </ul> 
     </div> 

     <div class="ui-content" role="main"> 
      <a class="ui-btn" href="#navpanel">Menu</a> 
      <div data-role="tabs" id="tabs"> 
       <div data-role="navbar" id="navbar-tabs"> 
        <ul> 
         <li><a href="#news" data-ajax="false" class="ui-btn-active">News</a></li> 
         <li><a href="#contact" data-ajax="false">Contact</a></li> 
        </ul> 
       </div> 

       <div id="news" class="ui-content">Some news</div> 
       <div id="contact" class="ui-content">Contact data</div> 
      </div> 
     </div> 
    </div> 
</body>

http://jsfiddle.net/cnu9zn58/

Я уже пробовал следующие, но я не люблю его. Как-то этот код выполняется на моей собственной веб-странице, и он не устанавливает класс ui-btn-active.

$(document).ready(function(){ 
    $("#navpanel a").click(function() 
    { 
     var href = $(this).attr("href"); 

     // trigger the actual navbar to switch 
     $("#navbar-tabs a[href='" + href + "']").trigger('click'); 

     $("#navpanel").panel("close"); 
    }); 
});

источник

2015-09-21 Marnix

jQM использует вкладку виджет jQueryUI, так что вы можете использовать активный вариант для установки активной вкладки с помощью индекса:

http://api.jqueryui.com/tabs/#option-active

В связи панели, использование атрибутов данных для хранения цели вкладка индекса, например:

<div data-role="panel" id="navpanel" data-display="overlay"> 
    <ul> 
     <li><a href="#" class="ui-btn ui-btn-active" data-idx="0">News</a></li> 
     <li><a href="#" class="ui-btn" data-idx="1">Contact</a></li> 
    </ul> 
</div>

Тогда для вкладки виджет для работы, вы должны оставить Navbar в разметке, однако, вы можете установить свой стиль дисплея ни для того, чтобы скрыть его:

#tabs [data-role="navbar"] { 
    display: none; 
}

Тогда ваш Javascript становится:

$(document).on("pagecreate", "#page1", function() { 

    $("#navpanel a").click(function() {   
     $("#navpanel a").removeClass("ui-btn-active"); 
     $(this).addClass("ui-btn-active"); 
     var idx = parseInt($(this).data("idx")); 
     $("#tabs").tabs("option", "active", idx); 
     $("#navpanel").panel("close"); 
    }); 

});

Обновлено FIDDLE

источник

2015-09-21 20:51:58 ezanker

Suberb! Это похоже на то, что я ищу. Жаль, что структура не поддерживает такую вещь в родной библиотеке. – Marnix

Сочетание мобильных вкладок jQuery с панелью

ответ

Смежные вопросы