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

Материал из Umicms

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

Мы будем использовать уже готовое решение, опубликованное на сайте www.flowplayer.org. Итоговый вариант будет выглядеть примерно так:

http://flowplayer.org/tools/demos/tabs/index.htm

Для начала создадим обычный tpl шаблон и добавим в него запись следующего вида:

<!-- 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>

Количество вкладок может быть любым.

Теперь необходимо подключить обработчик. Это делается следующей записью:

<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>

Осталось подключить необходимые скрипты и стили CSS. Чтобы подключить первую часть стилей, между тэгами <head></head> надо добавить такую запись:

<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>

Теперь нужно подключить основные стили и скрипты: Скачать необходимые стили для css и картикиоформления можно здесь Файл:Cms-tabs.zip. Этот архив необходимо распаковать в папку "\css\cms\". Как вариант, Вы можете скачать стили и оформление здесь: http://flowplayer.org/tools/css/tabs-no-images.css и http://flowplayer.org/tools/img/tabs/tabs.zip. Но тогда надо будет самостоятельно подправить пути в файле стиля, до нужных картинок. В шаблоне эти скрипты подключаются записью

<link rel="stylesheet" type="text/css" href="/css/cms/tabs.css" />

Теперь осталось подключить сам скрипт. Он называется jquery.tools.min.js и добавить его надо в папку "js". Затем в шаблоне добавить в <head></head> запись вида:

<script src="/js/jquery.tools.min.js"></script>

Скачать этот скрипт можно здесь Файл:Jquery.tools.min.zip или на сайте http://flowplayer.org/tools/download/index.html. Только нужно в вариантах скачки оставить галочку только напротив Tabs,иначе скачаются лишние функции и могут стать недоступны некоторые функции EIP.

Итоговый вид tpl-шаблона может выглядеть примерно так

<!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>

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

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

Материал из Umicms

Просмотры

Личные инструменты

Поиск

Навигация

Документация

Инструменты