Добрый день, перейду сразу к описанию проблемы:
Есть страница с jquery ui tabs. Например
URL [url]http://site.xx/page-1[/url]
По кликам на вкладки в URL строке ничего не добавляется (
location.hash
)
Это не удобно. Нужно сделать так, чтобы hash все же дорисовывался, однако не просто так:
http://site.xx/page-1#tab-1
[url]http://site.xx/page-1#tab-2[/url]
Это будет дергать экран пользователя, а это не хорошо. Поэтому идея такая - передавать hash почти как get параметр, взять его из URL не сложно, а дергаться экран не будет.
Вот пример того, как нужно (добавил id вкладки как параметр p= ) :
http://site.xx/page-1#p=tab-1
[url]http://site.xx/page-1#p=tab-2[/url]
Вот что у меня получилось:
$(".tabs").tabs({
select: function(event, ui) {
var param = '';
param = window.location.hash;
if(param.indexOf('p=') > 0)
{
var regexp = /#p=(.+)/i;
var hash = param.match(regexp)[1];
if(hash !== '' && hash != ui.tab.hash)
{
window.location.hash = '#p=' + ui.tab.hash.substr(1);
}
}
},
show: function(event, ui) {
var param = '';
param = window.location.hash;
if(param.indexOf('p=') > 0)
{
var regexp = /#p=(.+)/i;
var hash = param.match(regexp)[1];
if(hash !== '')
{
$('.tabs').tabs("select", hash);
}
}
}
});
Собственно суть проблемы: реализация очень емкая и подглючивает. Сталкивался ли кто с таким уже? Если не жалко, поделитесь решением
Заранее благодарен.
Ах да, чуть не забыл. По клику по табам, url (значение параметра p) должно меняться, чтобы непример можно было скопировать url и кинуть его кому-нибудь.
Как бонус: более интересный вариант реализации: если табы вложенные, как тогда?
Например каждая вкладка с табами содержит еще по 1 табу с тремя вкладками.
Пока есть только размышления: передавать второй параметр, если есть вложенный таб, а в коде через find искать - есть ли у текущего tab вложенные, если да и параметр №2 передан, то делать оба активными, иначе по умолчанию первый из главного таба и первый из второго.
Вот только как это закодать.....
