Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Изменение вкладок ui tabs по нажатию кнопки назад в браузере (https://javascript.ru/forum/jquery/44311-izmenenie-vkladok-ui-tabs-po-nazhatiyu-knopki-nazad-v-brauzere.html)

martinss 15.01.2014 12:46

Изменение вкладок 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>


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


Часовой пояс GMT +3, время: 21:04.