Сделал табы jQuery UI tabs.
Сами табы и их содержимое генерируется скриптом на основе данных полученных из базы данных.
В имени таба указывается ID элемента который относится к табу:
<li><a href="#tabs-3">tab3</a></li><br>
<div id="tabs-3"><br>
...<br>
</div><br>
Тоесть там не последовательные значения, а некие произвольные номера.
Контент же для каждого таба одинаковый на 100% и генерируется один раз и просто вкладывается в каждый таб. Я привел всего один элемент SELECT, на самом деле там их будет много и они будут привязаны к этому селекту. Скажем так — при выборе в селекте пунктов будут отображаться и скрываться элементы — интерактивно будет меняться форма.
Вот код странички целиком. При смене селекта выводится алерт просто в котором показывается что выбрано сейчас.
<!DOCTYPE html><br>
<html><br>
<head><br>
<meta http-equiv="content-type" content="text/html; charset=utf8"/><br>
<title>jQuery tabs test</title><br>
<br>
<link type="text/css" href="css/redmond/jquery-ui-1.8.24.custom.css" rel="stylesheet" /><br>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><br>
<script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script><br>
<script><br>
$(document).ready(function(){<br>
$("#edit_tabs").tabs();<br>
$('#edit_tabs #select_type').change(function(){<br>
var gTabSelect = $('#edit_tabs').tabs("option", "selected");<br>
var gSelectType = $(this).val();<br>
alert('type:' + gSelectType + '\ntab:' + gTabSelect);<br>
})<br>
});<br>
</script><br>
<br>
</head><br>
<body><br>
<br>
<div id="edit_tabs"><br>
<ul><br>
<li><a href="#tabs-3">tab3</a></li><br>
<li><a href="#tabs-5">tab5</a></li><br>
<li><a href="#tabs-9">tab9</a></li><br>
</ul><br>
<br>
<div id="tabs-3"><br>
<select id="select_type" size="1"><br>
<option value="4">data4</option><br>
<option value="6">data6</option><br>
<option value="7">data7</option><br>
</select><br>
</div><br>
<div id="tabs-5"><br>
<select id="select_type" size="1"><br>
<option value="4">data4</option><br>
<option value="6">data6</option><br>
<option value="7">data7</option><br>
</select><br>
</div><br>
<div id="tabs-9"><br>
<select id="select_type" size="1"><br>
<option value="4">data4</option><br>
<option value="6">data6</option><br>
<option value="7">data7</option><br>
</select><br>
</div><br>
</div><br>
</body><br>
</html><br>
А теперь проблема.
Чтобы узнать какой таб сейчас выбран достаточно спросить у него:
var gTabSelect = $('#edit_tabs').tabs("option", "selected");<br>
И вот тут и кроется проблема — так как таб говорит свой индекс начиная с нуля и ему наплевать на мои заранее заданные имена табов. Как следствие я не могу далее управлять контентом так как не знаю в каком идентификаторе мне что надо править…
тоесть мое обращение к данным внутри таба может быть таким:
$('#tabs-3 #select_type')...<br>
но у меня есть лишь индекс таба, но не его имя для такого обращения… А индекс и номер не совпадают…
В общем как обойти эту проблему? Мне потом надо передавать через AJAX данные и указывать не индекс таба, а его имя так как ано привязано у меня к базе данных. Плюс я даже не могу скрипт сделать чтобы извне менять активный таб — я так же должен индекс таба указывать, а не его имя чтобы сделать активным…
Как получить имя таба, а не его индекс?
Как изменять активный таб по имени, а не указывая его индекс?
Как получить доступ к элементам текущего таба, если в каждом табе все элементы имеют одинаковые имена?
