Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2014, 12:46
Интересующийся
Отправить личное сообщение для martinss Посмотреть профиль Найти все сообщения от martinss
 
Регистрация: 29.12.2010
Сообщений: 24

Изменение вкладок ui tabs по нажатию кнопки назад в браузере
Добрый день, есть ui tabs. По клику на вкладку добавляются в location.hash параметры, соответствующие выбранной вкладке. Если есть вложенность у табов, то автоматически формируется 2 параметра (разделитель запятая).

Переключение работает нормально, но если в браузере нажать кнопку назад, location.hash меняется правильно, а вот переключение уже не происходит.

$(document).ready(function(){

	$(".myclass").tabs({
		select: function(event, ui)
		{
			var parent_id;

			parent_id = $(ui.panel).parents(".myclass").parents('.ui-tabs-panel').attr('id');

			if(typeof parent_id !== 'undefined')
			{
				window.location.hash = '#t=' + parent_id + ',' + ui.tab.hash.substr(1);
			}
			else
			{
				window.location.hash = '#t=' + ui.tab.hash.substr(1);
			}
		}
	});

	$.address.change(function(event)
	{
		var param = '';
		param = window.location.hash;

		if(param.indexOf('t=') > 0)
		{
			var regexp = /#t=(.+)/i;
			var hash = param.match(regexp);

			if(hash.length > 0)
			{
				hash = hash[1].split(/#t=\s*,\s*/);
			}

			if(hash.length > 0)
			{
				$(".myclass").tabs("select", hash[0]);
			}

			if(hash.length > 1)
			{
				$(".myclass").tabs("select", hash[1]);
			}
		}

	});
})


<div class="myclass">
	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">Tab 2</a></li>
	</ul>
	<div id="tab1">
		<p>Tab 1</p>
		<div id="subtabs1" class="myclass">
			<ul>
				<li><a href="#subtab11">SubTab 1</a></li>
				<li><a href="#subtab12">SubTab 2</a></li>
			</ul>
			<div id="subtab11">
				<p>SubTab 11</p>
			</div>
			<div id="subtab12">
				<p>SubTab 12</p>
			</div>
		</div>
	</div>
	<div id="tab2" >
		<p>Tab 2</p>
		<div id="subtabs2" class="myclass">
			<ul>
				<li><a href="#subtab21">SubTab 1</a></li>
				<li><a href="#subtab22">SubTab 2</a></li>
			</ul>
			<div id="subtab21">
				<p>SubTab 21</p>
			</div>
			<div id="subtab22">
				<p>SubTab 22</p>
			</div>
		</div>
	</div>
	<div id="tab3">
		<p>Tab 3</p>
		<div id="subtabs3" class="myclass">
			<ul>
				<li><a href="#subtab31">SubTab 31</a></li>
				<li><a href="#subtab32">SubTab 32</a></li>
			</ul>
			<div id="subtab31">
				<p>SubTab 31</p>
			</div>
			<div id="subtab32">
				<p>SubTab 32</p>
			</div>
		</div>
	</div>
</div>


Кто знает как можно допилить эту багину?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обновление значений в документе по нажатию кнопки Batyabest Events/DOM/Window 9 11.12.2013 19:24
Изменение цвета текста кнопки и цвета кнопки при нажатии Setta jQuery 22 31.07.2013 17:48
Изменение фрейма по нажатии кнопки. informa Элементы интерфейса 5 17.06.2013 12:53
Восстановление hidden field при нажатии кнопки Назад в браузере debugx Элементы интерфейса 1 19.10.2011 19:03
навигация AJAX кнопки назад - вперед FRIE AJAX и COMET 7 19.08.2010 13:38