Вкладки jQueryUI: мне просто нужно, чтобы показать или скрыть div! Почему это так сложно?

Question

Вкладки jQueryUI: мне просто нужно, чтобы показать или скрыть div! Почему это так сложно?

0

Мне нравится jQueryUI, но виджет Tabs, похоже, слишком усложняет ситуацию (jQueryUI версия 1.10.3).

Я знаю, что он может загружать контент "на лету", и это все замечательно, но у меня здесь очень простая структура с формой и некоторыми DataTables, более или менее такими:

<div id="MyContent">
  <ul>
    <li><a href="#Form">Main Data</a></li>
    <li><a href="#SubTable1">Additional data 1</a></li>
    <li><a href="#SubTable2">Additional data 2</a></li>
  </ul>
  <div id="Form">
    <form>...</form>
  </div>
  <div id="SubTable1">
    DataTables 1 goes here
  </div>
  <div id="SubTable2">
    DataTables 2 goes here
  </div>
</div>

Однако, когда я применяю вкладки jQueryUI, это ужасно ломается. Одной из причин, по которой я уже знаю, является использование <base> в моем коде, что делает вкладки "думаю", что я хочу загрузить мой контент "на лету", а не просто скрывать/показывать контент уже там. Но даже с помощью взлома, чтобы исправить это, DataTables не отображается правильно.

И, честно говоря, я не хочу тратить дни, пытаясь понять все, чтобы найти исправление.

Вместо этого я хотел бы знать, есть ли способ "отключить" все причуды JQueryUI Tabs и заставить его просто скрывать и показывать мои вкладки, используя все, что находится внутри каждого div. Является ли это возможным?

Это решило бы мою проблему. Если я вручную создаю несколько кнопок и связываю событие click, которое просто выполняет display: none/display: block to my divs, они работают как шарм, включая DataTables.

На самом деле, я рассматриваю возможность полного добавления jQueryUI вкладок и создания необходимого кода для этого, но я предпочел бы использовать вкладки jQueryUI, если это возможно.

Заранее большое спасибо!

Marcovecchio 20 дек. 2013, в 19:17

Источник

0

Вы можете использовать более простые библиотеки с вкладками, подобные этой - os.alfajango.com/easytabs
Kelly J Andrews 20 дек. 2013, в 18:04
0

Или сверните свое собственное, так как эта функциональность может быть выполнена в 10 строк или меньше.
Kevin B 20 дек. 2013, в 18:18
1

Вероятно, ваша проблема с рендерингом данных связана с тем, что сам подключаемый модуль данных неправильно вычисляет размер своего контейнера, поскольку он скрыт при инициализации таблицы данных.
Kevin B 20 дек. 2013, в 18:19
0

@KevinB: Действительно! И еще: это связано с оболочкой, созданной DataTables, асинхронно с вкладками. Вероятно, вкладки создаются до того, как обертка существует, создавая беспорядок. Я должен буду использовать обратные вызовы, чтобы исправить это.
Marcovecchio 20 дек. 2013, в 18:43

Показать ещё 2 комментария

Теги:

javascript

jquery

datatables

jquery-ui

jquery-ui-tabs

1 ответ

Ещё вопросы

Вы можете использовать более простые библиотеки с вкладками, подобные этой - os.alfajango.com/easytabs
Или сверните свое собственное, так как эта функциональность может быть выполнена в 10 строк или меньше.
Вероятно, ваша проблема с рендерингом данных связана с тем, что сам подключаемый модуль данных неправильно вычисляет размер своего контейнера, поскольку он скрыт при инициализации таблицы данных.
@KevinB: Действительно! И еще: это связано с оболочкой, созданной DataTables, асинхронно с вкладками. Вероятно, вкладки создаются до того, как обертка существует, создавая беспорядок. Я должен буду использовать обратные вызовы, чтобы исправить это.

Kelly J Andrews · Accepted Answer · 2013-12-20T16-50-00.000Z

Я признаю, что это немного хам-кулак, но это работает, как пример.

HTML:

<div id="MyContent">
  <ul>
    <li><a href="#Form">Main Data</a></li>
    <li><a href="#SubTable1">Additional data 1</a></li>
    <li><a href="#SubTable2">Additional data 2</a></li>
  </ul>
  <div id="Form" class="tab active">
    <form>My Form</form>
  </div>
  <div id="SubTable1" class="tab">
    DataTables 1 goes here
  </div>
  <div id="SubTable2" class="tab">
    DataTables 2 goes here
  </div>
</div>

CSS:

.tab{display:none}
.active{display:block}

JQuery:

$('#MyContent a').on('click',function(e){
    var id = $(this).attr('href')
    $('div.active').toggleClass('active');
    $(id).toggleClass('active', ($(this).attr('class') != 'active'));
    console.log()
})

Работа jsFiddle

Спасибо Келли, за код и за отличные отзывы о EasyTabs. Похоже, отличная библиотека!