Просмотр исходного текста страницы Как сделать вкладки, без перезагрузки страницы? (jquery)

Вероятно, Вы видели, как на некоторых страницах реализована функция переключения между различными вкладками без перезагрузки страницы.
Это удобно и часто облегчает навигацию по странице.<br/>
Ниже описано, как подключить похожий функционал к UMI.CMS<br/><br/>

Мы будем использовать уже готовое решение, опубликованное на сайте www.flowplayer.org. Итоговый вариант будет выглядеть примерно так:<br/>
 http://flowplayer.org/tools/demos/tabs/index.htm
<br/>
Для начала создадим обычный tpl шаблон и добавим в него запись следующего вида:
<source lang="xml">
<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
	<div>%test1%</div>
	<div>%test2%</div>
	<div>%test3%</div>
</div>
</source>
Количество вкладок может быть любым.<br/><br/>

Теперь необходимо подключить обработчик. Это делается следующей записью:
<source lang="xml">
<script>

// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script>
</source>

Осталось подключить необходимые скрипты и стили CSS. Чтобы подключить первую часть стилей, между тэгами <head></head> надо добавить такую запись:
<source lang="xml">
<style>
/* tab pane styling */
.panes div {
	display:none;		
	padding:15px 10px;
	border:1px solid #999;
	border-top:0;
	height:100px;
	font-size:14px;
	background-color:#fff;
}
</style>
</source>

Теперь нужно подключить основные стили и скрипты:
Скачать необходимые стили для css и картикиоформления можно здесь [[Файл:Cms-tabs.zip]]. Этот архив необходимо распаковать в папку  "\css\cms\". Как вариант, Вы можете скачать стили и оформление здесь: http://flowplayer.org/tools/css/tabs-no-images.css и http://flowplayer.org/tools/img/tabs/tabs.zip. Но тогда надо будет самостоятельно подправить пути в файле стиля, до нужных картинок. В шаблоне эти скрипты подключаются записью 
<source lang="">
<link rel="stylesheet" type="text/css" href="/css/cms/tabs.css" />
</source>
<br/><br/>
Теперь осталось подключить сам скрипт. Он называется jquery.tools.min.js и добавить его надо в папку "js". Затем в шаблоне добавить в <head></head> запись вида:
<source lang="xml">
<script src="/js/jquery.tools.min.js"></script>
</source>
Скачать этот скрипт можно здесь [[Файл:Jquery.tools.min.zip]] или на сайте http://flowplayer.org/tools/download/index.html. Только нужно в вариантах скачки оставить галочку только напротив Tabs,иначе скачаются лишние функции и могут стать недоступны некоторые функции EIP.<br/><br/>
Итоговый вид tpl-шаблона может выглядеть примерно так
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" >
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link type="text/css" rel="stylesheet" href="/css/cms/style.css"/>
		<link type="text/css" rel="stylesheet" href="/css/cms/home.css"/>
		<script type="text/javascript">
			if (navigator.appName == "Opera") document.write('<link rel="stylesheet" type="text/css" href="/css/cms/styleOpera.css"/>');
		</script>
		<title>%title%</title>

		<meta name="DESCRIPTION" content="%description%" />
		<meta name="KEYWORDS" content="%keywords%" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<script type="text/javascript" src="/js/cross-domain.php"></script>
		<script type="text/javascript" src="/js/client/vote.js" charset="utf-8"></script>

		%system includeQuickEditJs()%
        %system includeEditInPlaceJs()%


        %data getRssMeta(%pid%)%
        %data getAtomMeta(%pid%)%
	<!-- include the Tools -->
	<script src="/js/jquery.tools.min.js"></script>
	 

	<!-- standalone page styling (can be removed) -->
	


	
	<!-- tab styling -->
	
	
	
	<!-- tab pane styling -->
	<style>
	
/* tab pane styling */
.panes div {
	display:none;		
	padding:15px 10px;
	border:1px solid #999;
	border-top:0;
	height:100px;
	font-size:14px;
	background-color:#fff;
}

	</style>
</head>

	<body id="umi-cms-demo">
		<div id="container">
			%system getOuterContent('./tpls/content/header.inc.tpl')%
			<div>
				<div>

					<div>
						<h2 umi:element-id="%pid%" umi:field-name="h1">%header%</h2>
						<div umi:element-id="%pid%" umi:field-name="content">


<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
	<div>%test1%</div>
	<div>%test2%</div>
	<div>%test3%</div>
</div>


<!-- This JavaScript snippet activates those tabs -->
<script>

// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script>


						</div>
					</div>
                    

					
					%vote insertlast('home')%


				</div>
			</div>
			%system getOuterContent('./tpls/content/footer.inc.tpl')%
		</div>
	</body>
</html>

</html>

</source>
Здесь <b>%test1% %test2%</b> и <b>%test3%</b> это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.<br/>
Осталось только добавить этот шаблон в настройках модуля "Структура".