Tabs
~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Система вкладок позволяет разделить информацию на несколько блоков, обеспечивая легкий доступ к каждому из них и экономию места на странице.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="tabs"~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-3"~gt~Aenean lacinia~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~
Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum quam
ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-2"~gt~
~lt~p~gt~
Morbi tincidunt, dui sit amet facilisis feugiat, odio
metus gravida ante, ut pharetra massa metus id nunc.
Duis scelerisque molestie turpis. Sed fringilla, massa
eget luctus malesuada, metus eros molestie lectus, ut
tempus eros massa ut dolor. Aenean aliquet fringilla sem.
Suspendisse sed ligula in ligula suscipit aliquam.
Praesent in eros vestibulum mi adipiscing adipiscing.
Morbi facilisis. Curabitur ornare consequat nunc.
Aenean vel metus. Ut posuere viverra nulla. Aliquam erat
volutpat. Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-3"~gt~
~lt~p~gt~
Mauris eleifend est et turpis. Duis id erat. Suspendisse
potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque
rutrum erat, eu congue orci lorem eget lorem. Vestibulum non
ante. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sodales.
Quisque eu urna vel enim commodo pellentesque. Praesent
eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.
~lt~/p~gt~
~lt~p~gt~
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
potenti.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#tabs" ).tabs();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Ajax~lt~/tit~gt~
~lt~coment~gt~Указав в ссылке заголовка адрес страницы (html или php), вы укажите плагину на место с необходимым содержимым, которое будет запрошено автоматически (с помощью ajax), в момент перехода на эту вкладку. Неудачный запрос содержимого может быть обработан с помощью свойства ajaxOptions.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="tabs"~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Готовый~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="/ui/ex1"~gt~Подгружаемый~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="/ui/ex3.php"~gt~С задержкой~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="/ui/ex-broken.php"~gt~С ошибкой~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~
Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum quam
ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#tabs" ).tabs({
ajaxOptions:{
error: function( xhr, status, index, anchor ) {
$( anchor.hash )("Содержимое не найдено :(");
}
}
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Открыть при наведении~lt~/tit~gt~
~lt~coment~gt~С помощью свойства event можно настроить открытие вкладок на наведение курсора.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="tabs"~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-3"~gt~Aenean lacinia~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~
Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum quam
ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-2"~gt~
~lt~p~gt~
Morbi tincidunt, dui sit amet facilisis feugiat, odio
metus gravida ante, ut pharetra massa metus id nunc.
Duis scelerisque molestie turpis. Sed fringilla, massa
eget luctus malesuada, metus eros molestie lectus, ut
tempus eros massa ut dolor. Aenean aliquet fringilla sem.
Suspendisse sed ligula in ligula suscipit aliquam.
Praesent in eros vestibulum mi adipiscing adipiscing.
Morbi facilisis. Curabitur ornare consequat nunc.
Aenean vel metus. Ut posuere viverra nulla. Aliquam erat
volutpat. Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-3"~gt~
~lt~p~gt~
Mauris eleifend est et turpis. Duis id erat. Suspendisse
potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque
rutrum erat, eu congue orci lorem eget lorem. Vestibulum non
ante. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sodales.
Quisque eu urna vel enim commodo pellentesque. Praesent
eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.
~lt~/p~gt~
~lt~p~gt~
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
potenti.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#tabs" ).tabs({
event: "mouseover"
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Закрыть все вкладки~lt~/tit~gt~
~lt~coment~gt~При включении свойства collapsible появляется возможность закрывать все вкладки. Для этого нужно нажать на заголовок открытой вкладки.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="tabs"~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-3"~gt~Aenean lacinia~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~
Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum quam
ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-2"~gt~
~lt~p~gt~
Morbi tincidunt, dui sit amet facilisis feugiat, odio
metus gravida ante, ut pharetra massa metus id nunc.
Duis scelerisque molestie turpis. Sed fringilla, massa
eget luctus malesuada, metus eros molestie lectus, ut
tempus eros massa ut dolor. Aenean aliquet fringilla sem.
Suspendisse sed ligula in ligula suscipit aliquam.
Praesent in eros vestibulum mi adipiscing adipiscing.
Morbi facilisis. Curabitur ornare consequat nunc.
Aenean vel metus. Ut posuere viverra nulla. Aliquam erat
volutpat. Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-3"~gt~
~lt~p~gt~
Mauris eleifend est et turpis. Duis id erat. Suspendisse
potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque
rutrum erat, eu congue orci lorem eget lorem. Vestibulum non
ante. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sodales.
Quisque eu urna vel enim commodo pellentesque. Praesent
eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.
~lt~/p~gt~
~lt~p~gt~
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
potenti.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#tabs" ).tabs({
collapsible: true
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Перестановка вкладок~lt~/tit~gt~
~lt~coment~gt~С помощью двух строк кода и плагина Sortable можно сделать заголовки вкладок переставляемыми между собой.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="tabs"~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-3"~gt~Aenean lacinia~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~
Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum quam
ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-2"~gt~
~lt~p~gt~
Morbi tincidunt, dui sit amet facilisis feugiat, odio
metus gravida ante, ut pharetra massa metus id nunc.
Duis scelerisque molestie turpis. Sed fringilla, massa
eget luctus malesuada, metus eros molestie lectus, ut
tempus eros massa ut dolor. Aenean aliquet fringilla sem.
Suspendisse sed ligula in ligula suscipit aliquam.
Praesent in eros vestibulum mi adipiscing adipiscing.
Morbi facilisis. Curabitur ornare consequat nunc.
Aenean vel metus. Ut posuere viverra nulla. Aliquam erat
volutpat. Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-3"~gt~
~lt~p~gt~
Mauris eleifend est et turpis. Duis id erat. Suspendisse
potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque
rutrum erat, eu congue orci lorem eget lorem. Vestibulum non
ante. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sodales.
Quisque eu urna vel enim commodo pellentesque. Praesent
eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.
~lt~/p~gt~
~lt~p~gt~
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
potenti.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#tabs" ).tabs()
.find( ".ui-tabs-nav" )
.sortable({ axis: "x" });
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Заголовки внизу~lt~/tit~gt~
~lt~coment~gt~Несложными манипуляциями с классами и css, можно переместить заголовки вкладок вниз.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
#tabs { height: 270px; }
.tabs-bottom { position: relative; }
.tabs-bottom .ui-tabs-panel { height: 270px; overflow: auto; }
.tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; }
.tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
.ui-tabs-selected { margin-top: -3px !important; }
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="tabs" class="tabs-bottom"~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-3"~gt~Aenean lacinia~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~
Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum quam
ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-2"~gt~
~lt~p~gt~
Morbi tincidunt, dui sit amet facilisis feugiat, odio
metus gravida ante, ut pharetra massa metus id nunc.
Duis scelerisque molestie turpis. Sed fringilla, massa
eget luctus malesuada, metus eros molestie lectus, ut
tempus eros massa ut dolor. Aenean aliquet fringilla sem.
Suspendisse sed ligula in ligula suscipit aliquam.
Praesent in eros vestibulum mi adipiscing adipiscing.
Morbi facilisis. Curabitur ornare consequat nunc.
Aenean vel metus. Ut posuere viverra nulla. Aliquam erat
volutpat. Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-3"~gt~
~lt~p~gt~
Mauris eleifend est et turpis. Duis id erat. Suspendisse
potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque
rutrum erat, eu congue orci lorem eget lorem. Vestibulum non
ante. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sodales.
Quisque eu urna vel enim commodo pellentesque. Praesent
eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.
~lt~/p~gt~
~lt~p~gt~
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
potenti.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#tabs" ).tabs();
$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
.removeClass( "ui-corner-all ui-corner-top" )
.addClass( "ui-corner-bottom" );
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Использование cookie~lt~/tit~gt~
~lt~coment~gt~На первый взгляд, этот пример ничем не отличается от самого первого, но на самом деле отличие есть. В этом примере включена поддержка cookie, с помощью которых плагин tabs будет запоминать последнюю открытую вкладку (при повторном входе на страницу, будет открыта последняя открытая пользователем вкладка). Требует подключения дополнительного плагина для работы с cookie.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-1.8.3.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jqueryui.custom.js"~gt~~lt~/script~gt~
~lt~script src="/ui/jquery.cookie.js"~gt~~lt~/script~gt~
~lt~link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" /~gt~
~lt~style~gt~
body{font:normal 9pt Arial,sans-serif;}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div id="tabs"~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-3"~gt~Aenean lacinia~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~
Proin elit arcu, rutrum commodo, vehicula tempus,
commodo a, risus. Curabitur nec arcu. Donec
sollicitudin mi sit amet mauris. Nam elementum quam
ullamcorper ante. Etiam aliquet massa et lorem. Mauris
dapibus lacus auctor risus. Aenean tempor ullamcorper leo.
Vivamus sed magna quis ligula eleifend adipiscing. Duis orci.
Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis
aliquam molestie erat. Ut et mauris vel pede varius sollicitudin.
Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-2"~gt~
~lt~p~gt~
Morbi tincidunt, dui sit amet facilisis feugiat, odio
metus gravida ante, ut pharetra massa metus id nunc.
Duis scelerisque molestie turpis. Sed fringilla, massa
eget luctus malesuada, metus eros molestie lectus, ut
tempus eros massa ut dolor. Aenean aliquet fringilla sem.
Suspendisse sed ligula in ligula suscipit aliquam.
Praesent in eros vestibulum mi adipiscing adipiscing.
Morbi facilisis. Curabitur ornare consequat nunc.
Aenean vel metus. Ut posuere viverra nulla. Aliquam erat
volutpat. Pellentesque convallis. Maecenas feugiat,
tellus pellentesque pretium posuere, felis lorem euismod
felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-3"~gt~
~lt~p~gt~
Mauris eleifend est et turpis. Duis id erat. Suspendisse
potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque
rutrum erat, eu congue orci lorem eget lorem. Vestibulum non
ante. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Fusce sodales.
Quisque eu urna vel enim commodo pellentesque. Praesent
eu risus hendrerit ligula tempus pretium. Curabitur lorem
enim, pretium nec, feugiat nec, luctus a, lacus.
~lt~/p~gt~
~lt~p~gt~
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra
justo vitae neque. Praesent blandit adipiscing velit. Suspendisse
potenti.
~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$( "#tabs" ).tabs({
cookie: { expires:1 }
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Описание
Свойства
Методы
События
Оформление
Рецепты
Плагин Tabs позволяет превратить выбранный элемент в систему вкладок, что помогает разделить информацию на несколько блоков, обеспечивая легкий доступ к каждому из них и экономить место на странице. (Для этих целей есть еще один плагин — Accordion). Для того, чтобы сделать из элемента систему вкладок, нужно, чтобы он имел подобную структуру:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Заголовок первой вкладки</a></li>
<li><a href="#tabs-2">Заголовок второй вкладки</a></li>
<li><a href="#tabs-3">Заголовок третей вкладки</a></li>
</ul>
<div id="tabs-1">
<p>Содержимое первой вкладки</p>
</div>
<div id="tabs-2">
<p>Содержимое второй вкладки</p>
</div>
<div id="tabs-3">
<p>Содержимое третей вкладки</p>
</div>
</div>Исключением является ситуация, когда содержимое вкладки запрашивается с сервера (это делается автоматически с помощью технологии ajax). Заголовок такой вкладки определяется так:
<li><a href="адрес с содержимым">Заголовок ajax-вкладки</a></li>
а элемент с содержимым не указывается вообще. В одном блоке, часть вкладок может быть готовой, а часть подгружаемой:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Готовая вкладка</a></li>
<li><a href="/ui/ex1">Подгружаемая вкладка 1</a></li>
<li><a href="/ui/ex3.php">Подгружаемая вкладка 2</a></li>
</ul>
<div id="tabs-1">
<p>Содержимое вкладки 1</p>
</div>Неудачный запрос содержимого может быть обработан с помощью свойства ajaxOptions (см пример "Ajax" выше).
Замечание: динамически добавляемые вкладки (с помощью метода .tabs( "add", ... )) получают класс ui-tabs-NUM, где NUM — увеличивающееся на единицу число с каждой новой вкладки (инкремент). Поэтому, если вы вдруг используете такую же систему классов у себя на странице, то могут возникнуть проблемы.
Обработка событий
Вкладки являются источником ряда событий, их описание можно найти в разделе "События". Три из них: tabsselect, tabsload и tabsshow событий происходят при переходе от одной вкладке к другой, причем именно в той последовательности, в которой они были перечислены.
Обработчики событий будут получать 2 параметра: стандартный объект события от браузера и дополнительный объект (назовем его ui) со следующими полями:
- ui.tab — элемент якоря, закрепленного за содержимым выбранной вкладки
- ui.panel — элемент с содержимым выбранной вкладки.
- ui.index — номер открытой вкладки (начиная с нулевого).
Если обработчик события tabsselect возвратит false, то переключение вкладок не произойдет. Это может быть полезно, например когда переключение вкладок можно разрешить только после заполнения данных формы в текущей вкладке.
↓ Имя свойства :типы значений (значение по умолчанию)
Описание этого свойства в официальной документации неоднозначно — отдельно описаны сразу два противоречивых свойства с этим названием. Но судя по всему правильное описание это:
В этом свойстве можно задавать массив с номерами вкладок, которые должны оказаться недоступны для выбора.
// ------- Работа со свойством disabled ---------
// в момент установки tabs на элемент
$("selector").tabs({ disabled: [1,2] });
//получение значения disabled
var disabled = $("selector").tabs( "option", "disabled" );
//изменение значения disabled
$("selector").tabs( "option", "disabled", [1,2] );
Если содержимое вкладок будет подгружаться с сервера (с помощью ajax), то в этом свойстве можно задать настройки выполнения этих ajax-запросов (об этих настройках можно посмотреть в
$.ajax()).
// ------- Работа со свойством ajaxOptions ---------
// в момент установки tabs на элемент
$("selector").tabs({ajaxOptions:{ async:false }});
//получение значения ajaxOptions
var ajaxOptions = $("selector").tabs("option", "ajaxOptions");
//изменение значения ajaxOptions
$("selector").tabs("option", "ajaxOptions",{ async:false });
Это свойство определяет, будет ли кешироваться загруженное содержимое вкладки, если та была запрошена с сервера. В случае значения
false, содержимое будет загружаться при каждом открытии удаленной вкладки. При
true содержимое вкладки будет загружено один раз — в момент ее первого открытия (так называемая "ленивая загрузка").
Отметим, что описываемый кеш организуется средствами jQuery UI. Если необходимо, чтобы запросы не кешировались на уровне браузера, необходимо отключить соответствующий кэш в настройке ajaxOptions.
// ------- Работа со свойством cache ---------
// в момент установки tabs на элемент
$("selector").tabs({ cache:true });
//получение значения cache
var cache = $("selector").tabs( "option", "cache" );
//изменение значения cache
$("selector").tabs( "option", "cache", true );
Если установить это свойство в
true, то появится возможность сворачивать все вкладки. Для этого достаточно нажать на заголовок открытой в данный момент вкладки (см. пример "закрыть все вкладки" выше).
// ------- Работа со свойством collapsible ---------
// в момент установки tabs на элемент
$("selector").tabs({ collapsible: false });
//получение значения closeOnEscape
var collapsible = $("selector").tabs( "option", "collapsible" );
//изменение значения collapsible
$("selector").tabs( "option", "collapsible", false );
Позволяет хранить в кукисах значение последней открытой вкладки, чтобы при следующем открытии страницы оказалась открыта эта же вкладка (см. пример "Использование cookie" выше). Использовать кукисы можно только подключив
специальный плагин. В параметре
cookie необходимо задать объект с настройками работы кукисов. Доступные настройки:
- {expires:7, path:'/', domain:'jquery.com', secure:true}
Начиная с jQueryUI-1.7 в настройках можно так же указывать имя кукисов в свойстве name.
// ------- Работа со свойством cookie ---------
// в момент установки tabs на элемент
$("selector").tabs({ cookie: {expires:30} });
//получение значения cookie
var cookie = $("selector").tabs( "option", "cookie" );
//изменение значения cookie
$("selector").tabs( "option", "cookie", {expires:30} );
Устаревшее с jQueryUI-1.7 свойство. Используйте вместо него
collapsible.
// ------- Работа со свойством deselectable ---------
// в момент установки tabs на элемент
$("selector").tabs({ deselectable: true });
//получение значения deselectable
var deselectable = $("selector").tabs( "option", "deselectable" );
//изменение значения deselectable
$("selector").tabs( "option", "deselectable", true );
В
event можно указать, событие какого типа должно произойти на элементе заголовка вкладки, чтобы она открылась.
// ------- Работа со свойством event ---------
// в момент установкиtabs на элемент
$("selector").tabs({ event: 'mouseover' });
//получение значения event
var event = $("selector").tabs( "option", "event" );
//изменение значения event
$("selector").tabs( "option", "event", 'mouseover' );
Описание этого свойства в официальной документации весьма неполно, поэтому кроме перевода добавлены личные наблюдения из опыта работы с плагином, однако, возможно что то упущено.
Это свойство определяет тип анимации, используемой при скрытии и появлении вкладок, а так же продолжительность этой анимации. В поле duration можно задать продолжительность анимации (строковым значением "slow", "normal" или "fast" или целым числом — количеством миллисекунд). По умолчанию, duration равен "normal". Тип анимации задается указанием изменяемого css-свойства и режимом его изменения (насколько я понимаю, подходит только значение toggle):
// ------- Работа со свойством fx ---------
// в момент установки tabs на элемент
$("selector").tabs({ fx: {opacity:'toggle', duration:'fast' } });
//получение значения fx
var fx = $("selector").tabs( "option", "fx" );
//изменение значения fx
$("selector").tabs( "option", "fx", {opacity:'toggle', duration:'fast' } );
К сожалению, суть этого свойства ускользнула от автора статьи. Если вы понимаете для чего именно оно нужно, пожалуйста, опишите это в обсуждении этой статьи. Понятно, что в нем задается префикс для id какого то из элементов вкладки. Но для какого именно и нюансы его формирования остались мне не ясны.
If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".
// ------- Работа со свойством idPrefix ---------
// в момент установки tabs на элемент
$("selector").tabs({ idPrefix: 'ui-tabs-primary' });
//получение значения idPrefix
var idPrefix = $("selector").tabs( "option", "idPrefix" );
//изменение значения idPrefix
$("selector").tabs( "option", "idPrefix", 'ui-tabs-primary' );
panelTemplate:string('<div></div>')
panelTemplate определяет HTML-заготовку, которая будет использоваться в качестве области для содержимого вкладки, если та была создана с помощь метода
add или при ajax-загрузке удаленного содержимого.
// ------- Работа со свойством panelTemplate ---------
// в момент установки tabs на элемент
$("selector").tabs({ panelTemplate: '<li></li>' });
//получение значения panelTemplate
var panelTemplate = $("selector").tabs( "option", "panelTemplate" );
//изменение значения panelTemplate
$("selector").tabs( "option", "panelTemplate", '<li></li>');
Определяет номер открытой вкладки (нумерация начиная с 0). Чтобы все вкладки оказались закрыты, необходимо указать значение -1.
// ------- Работа со свойством selected ---------
// в момент установки tabs на элемент
$("selector").dialog({ selected: 3 });
//получение значения selected
var selected = $("selector").tabs( "option", "selected" );
//изменение значения selected
$("selector").tabs( "option", "selected", 3 );
В этом свойстве можно задать текст HTML, который будет использован в качестве заголовка вкладки, пока загружается ее содержимое. Если задать в этом свойстве пустую строку, то на время загрузки содержимого, заголовок вкладки меняться не будет.
// ------- Работа со свойством spinner ---------
// в момент установки tabs на элемент
$("selector").tabs({ spinner: 'Загрузка...' });
//получение значения spinner
var spinner = $("selector").tabs( "option", "spinner" );
//изменение значения spinner
$("selector").tabs( "option", "spinner", 'Загрузка...' );
tabTemplate:string('<li><a href="#{href}"><span>#{label}</span></a></li>')
tabTemplate определяет HTML-заготовку, которая будет использоваться в качестве области для заголовка вкладки, если та была создана с помощь метода
add. Значения #{href} и #{label} будут заменены на url и текст заголовка, переданные в метод добавления новой вкладки.
// ------- Работа со свойством tabTemplate ---------
// в момент установкиtabs на элемент
$("selector").tabs({ tabTemplate:
'<div><a href="#{href}"><span>#{label}</span></a></div>'
});
//получение значения tabTemplate
var minWidth = $("selector").tabs( "option", "tabTemplate" );
//изменение значения tabTemplate
$("selector").tabs( "option", "tabTemplate",
'<div><a href="#{href}"><span>#{label}</span></a></div>'
);
↓ Способ вызова
.tabs("destroy")
Удаляет всю функциональность плагина tabs с выбранных элементов.
.tabs("disable")
Останавливает работу плагина tabs на выбранных элементах. Для возобновления, необходимо воспользоваться методом .tabs("enable").
.tabs("enable")
Возобновляет работу плагина tabs на выбранных элементах (например, после того, как она была остановлена с помощью .tabs("disable")).
.tabs("option",optionName,[value])
Этот метод позволяет изменять/получать свойства плагина tabs. Если необходимо изменить сразу несколько свойств, воспользуйтесь следующей формой этой функции — .tabs("option", options), где options это объект в формате {optionName1:value1, optionName2:value2, ...}.
.tabs("widget")
Возвращает те из выбранных элементов, к которым был применен плагин tabs (поиск осуществляется по классу ui-tabs, который автоматически присваивается этим элементам).
.tabs("add",url,label,[index])
Создает новую вкладку. Ее содержимое может быть вставлено либо заранее, вручную (например методом
.append()), либо загружено с сервера. В первом случае, в параметре
url нужно указать "#"+id элемента с содержимым (например для содержимого с id="newTab" нужно будет указать "#newTab"). Если вы собираетесь загружать содержимое с сервера, то в параметре
url нужно будет указать url-адрес содержимого (абсолютный или относительный, но не кроссдоменный). Параметр
label отвечает за текст в заголовке вкладки. В необязательном параметре
index можно указать номер вкладки, после которой будет вставлена новая (нумерация вкладок начинается с 0). По умолчанию, новая вкладка будет добавлена последней.
.tabs("remove",index)
Удаляет вкладку, идущую под номером index (нумерация вкладок начинается с нуля).
.tabs("enable",index)
Делает вкладку, идущую под номером
index, активной (доступной для выбора) (сделать вкладку неактивной можно с помощью метода disable). Нумерация вкладок начинается с 0.
Вывести из неактивного состояния сразу все вкладки можно с помощью свойства disabled:
- $('selector').tabs("option","disabled",[]);.
.tabs("disable",index)
Делает вкладку, идущую под номером
index, неактивной (недоступной для выбора) (сделать вкладку активной можно с помощью метода enable). Нумерация вкладок начинается с 0.
Сделать неактивного сразу все вкладки можно с помощью свойства disabled:
- $('selector').tabs("option","disabled",[1, 2]);.
Здесь в последнем аргументе перечисляются номера вкладок, которые стать неактивными.
.tabs("select",index)
Открывает вкладку, идущую под номером index. Нумерация вкладок начинается с 0.
.tabs("load",index)
Обновляет содержимое вкладки, идущей под номером index (имеются ввиду вкладки, содержимое которых подгружается с помощью ajax). Нумерация вкладок начинается с 0.
.tabs("url",index,url)
Изменяет у вкладки с номером index, параметр url (адрес удаленного содержимого вкладки, которое будет получено с помощью ajax-запроса). До изменения адреса, вкладка может быть как статичной, так и удаленной.
.tabs("length")
Возвращает количество вкладок. Если
выбранных элементов более одного, возвращается количество вкладок в первом из них, который является системой вкладок.
.tabs("abort")
Завершает все ajax-запросы, запущенные для получение содержимого вкладок, а так же все действующие анимации вкладок.
.tabs("rotate",ms,[continuing])
Запускает цикличный перебор всех вкладок. Переключения происходят через ms миллисекунд. Необязательный параметр continuing определяет, нужно ли продолжать автоматические переключения, если пользователь самостоятельно выбрал одну из них. По умолчанию, этот параметр равен false.
↓ Внутреннее имя события :внешнее имя
create:tabscreate
Событие create происходит в момент инициализации tabs на элементе.
// обработка события create
$("selector").tabs({
create: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "tabscreate", function(event, ui){ ... });
select:tabsselect
Это событие происходит, при клике по заголовку вкладки. Если обработчик этого события вернет значение
false, то переключения между вкладками не произойдет.
// обработка события select
$("selector").tabs({
select: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "tabsselect", function(event, ui){ ... });
load:tabsload
Это событие происходит в момент окончания ajax-загрузки удаленной вкладки.
// обработка события load
$("selector").tabs({
load: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "tabsload", function(event, ui){ ... });
show:tabsshow
Это событие происходит, когда вкладка становится видимой.
// обработка события show
$("selector").tabs({
show: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "tabsshow", function(event, ui){ ... });
add:tabsadd
Это событие происходит при добавлении новой вкладки.
// обработка события add
$("selector").tabs({
add: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "tabsadd", function(event, ui){ ... });
remove:tabsremove
Это событие происходит при удалении вкладки.
// обработка события remove
$("selector").tabs({
remove: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "tabsremove", function(event, ui){ ... });
enable:tabsenable
Это событие происходит, когда одна из вкладок становиться неактивной (недоступной для выбора).
// обработка события enable
$("selector").tabs({
enable: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "tabsenable", function(event, ui){ ... });
disable:tabsdisable
Это событие происходит, когда одна из вкладок становиться активной (доступной для выбора).
// обработка события disable
$("selector").tabs({
tabsdisable: function(event, ui) { ... }
});
// еще один способ (используя метод bind)
$("selector").bind( "disable", function(event, ui){ ... });
Плагин Tabs использует стандартные стили jQueryUI-css для оформления вкладок. Для редактирования оформления рекомендуется использовать специальную ручную настройку на сайте jQuery UI. Для специфичных манипуляций диалоговыми окнами, можно воспользоваться информацией о его структуре:
// если применить плагин Tabs к div-элементу с такой структурой:
~lt~div~gt~
~lt~ul~gt~
~lt~li~gt~~lt~a href="#tabs-1"~gt~Заголовок первой вкладки~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-2"~gt~Заголовок второй вкладки~lt~/a~gt~~lt~/li~gt~
~lt~li~gt~~lt~a href="#tabs-3"~gt~Заголовок третей вкладки~lt~/a~gt~~lt~/li~gt~
~lt~/ul~gt~
~lt~div id="tabs-1"~gt~
~lt~p~gt~Содержимое первой вкладки~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-2"~gt~
~lt~p~gt~Содержимое второй вкладки~lt~/p~gt~
~lt~/div~gt~
~lt~div id="tabs-3"~gt~
~lt~p~gt~Содержимое третей вкладки~lt~/p~gt~
~lt~/div~gt~
~lt~/div~gt~
// то Tabs автоматически внесет следующие изменения:
~lt~div class="ui-tabs ui-widget ui-widget-content ui-corner-all"~gt~
~lt~ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"~gt~
~lt~li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"~gt~~lt~a href="#tabs-1"~gt~Nunc tincidunt~lt~/a~gt~~lt~/li~gt~
~lt~li class="ui-state-default ui-corner-top"~gt~~lt~a href="#tabs-2"~gt~Proin dolor~lt~/a~gt~~lt~/li~gt~
~lt~div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"~gt~
~lt~p~gt~Tab one content goes here.~lt~/p~gt~
~lt~/div~gt~
...
~lt~/div~gt~
Как узнать номер открытой вкладки?
// Если вкладки установлены на элемент с id = example:
var $tabs = $('#example').tabs();
// то получить номер открытой вкладки можно так:
var selected = $tabs.tabs('option', 'selected');Как открыть ссылку прямо во вкладке, не покидая страницу?
Если необходимо, чтобы при нажатии по ссылке, которая находится внутри вкладки, содержимое страницы по ссылке загрузилось в эту вкладку, вместо того, чтобы пользователь перешел на эту страницу
// "перехватим" нажатие по ссылке и загрузим средствами jQuery
// содержимое находящееся по ссылке прямо во вкладку:
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});Как открыть открыть вкладку по нажатию на ссылку, а не заголовок вкладки?
Если необходимо, чтобы при нажатии по ссылке, которая находится внутри вкладки, содержимое страницы по ссылке загрузилось в эту вкладку, вместо того, чтобы пользователь перешел на эту страницу
// инициализация вкладок
// (будет открыта первая вкладка)
var $tabs = $('#example').tabs();
// при нажатии на ссылку, сымитируем нажатие по нужной вкладке
$('#my-text-link').click(function() {
$tabs.tabs('select', 2);
return false;
});Как предотвратить выбор другой вкладки, пока не будет пройдена валидация формы в текущей вкладке?
Воспользуемся тем, что когда обработчик события tabsselect возвращает false, переключение вкладки не происходит:
$('#example').tabs({
select: function(event, ui) {
var isValid = ... // выполним валидацию, присвоив переменной true или false
return isValid;
}
});Как незамедлительно открыть добавленную вкладку?
Воспользуемся тем, что при добавлении новой вкладки происходит событие tabsadd
var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});Как избавиться от эффекта FOUC (Flash of Unstyled Content) пока идет инициализация вкладок?
Эффектом FOUC называют тот случай, когда браузер собирает (инициализирует) тяжелую страницу не мгновенно, а за несколько секунд, во время которых в окне браузера постоянно мельтешат элементы страницы.
Наиболее простым способом является скрыть вкладки, которые должны оказаться закрытыми, добавив их элементам специальный класс. Заметим, что если у пользователя будет отключен JS, то он так и не увидит этих вкладок.
<div id="example" class="ui-tabs">
...
<div id="a-tab-panel" class="ui-tabs-hide"> </div>
...
</div>
Почему мой слайдер (или Google Map, или sIFR и т.д.) не работает, если он был в первоначально закрытой вкладке?
Многие виджеты в момент инициализации пытаются узнать свой размер, но если они находятся в закрытой вкладке, то они не смогут это сделать: элемент вкладки скрыт с помощью css-правила display:none, а значит размеры всех содержащихся в нем элементов равны 0.
Эту проблему можно исправить, изменив способ скрытия вкладок на "смещение влево". Для этого нужно переписать следующие правила:
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}Для Google Map подойдет и другой способ. Можно вызвать метод пересчета размеров карты, когда вкладка с ней будет открыта:
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});