jQuery UI Tabs добавляет классы в неправильный div? - PullRequest
Новая
       14

jQuery UI Tabs добавляет классы в неправильный div?

4 голосов
/ 10 января 2010

Я пытаюсь использовать jQuery UI 1.7.2 для добавления вкладок на лету. Сначала я создаю div, который содержит контент, принадлежащий вкладке, а затем я вызываю $ ('# tabs'). Tabs ("add", ...). Пользовательский интерфейс jQuery правильно добавляет новый li в список вкладок. Однако вместо создания атрибута класса в моем элементе tab он создает совершенно новый элемент tab с некоторым поддельным идентификатором и создает для него класс.

Вот разметка, которую он генерирует: 

<div id="tabs" class="ui-tabs ui-widget ui-widget-content">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  <li class="ui-state-default"><a href="#ui-tabs-41"><span>Tab 1</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-36"><span>Tab 2</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-27"><span>Tab 3</span></a></li>
  </ul>

  <div id="MyTab1"><img src="/1.jpg"/></div>
  <div id="ui-tabs-41" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-36" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-27" class="ui-tabs-panel ui-widget-content"/>
  <div id="MyTab2"><img src="/2.jpg"/></div>
  <div id="MyTab3"><img src="/3.jpg"/></div>

Div, такие как MyTab1 и т. Д., - те, которые я хочу превратить в закладки. Div'ы, такие как ui-tabs-41, - это те, которые jQuery UI решает генерировать самостоятельно ... и я не знаю почему.

Ответы [ 2 ]

4 голосов
/ 11 января 2010

По-видимому, вам нужно сначала вызвать $ ('# tabs'). Tabs ("add", "# MyTab1", ...) и только потом вставлять свой контент в # MyTab1. Пользовательский интерфейс jQuery не может взять существующий контейнер # MyTab1 и превратить его во вкладку. Это не очевидно из документации по jQuery UI.

0 голосов
/ 08 декабря 2011

хмм, не совсем уверен, но у меня была такая же проблема, пока я не прочитал в документации, где сказано, что если вы добавите тег заголовка в li> a like 

   <div id=tabs>
   <ul>
   <li><a href="#Tab1" title="Tab1">Tab 1 Head</a></li>
   </ul>
    <div id=Tab1>tab 1 content</div>
   </div>

, то это ДЕЙСТВИТЕЛЬНОиспользуйте предопределенный div и не добавляйте никаких других (т.е. просто $ ("# tabs"). tabs ()) работает без всяких "add" и т. д. (работало для меня в любом случае).Не знаю, может, кому-то это поможет

...