Как сделать вкладки, без перезагрузки страницы? (jquery) — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
Строка 175: Строка 175:
 
Здесь <b>%test1% %test2%</b> и <b>%test3%</b> это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.<br/>
 
Здесь <b>%test1% %test2%</b> и <b>%test3%</b> это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.<br/>
 
Осталось только добавить этот шаблон в настройках модуля "Структура".
 
Осталось только добавить этот шаблон в настройках модуля "Структура".
 +
[[Категория:Шаблонизаторы]][[Категория:Верстка в TPL]]

Версия 08:43, 8 сентября 2011

Вероятно, Вы видели, как на некоторых страницах реализована функция переключения между различными вкладками без перезагрузки страницы. Это удобно и часто облегчает навигацию по странице.
Ниже описано, как подключить похожий функционал к 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% это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.
Осталось только добавить этот шаблон в настройках модуля "Структура".

Источник — «https://wiki.umisoft.ru/index.php?title=Как_сделать_вкладки,_без_перезагрузки_страницы%3F_(jquery)&oldid=2878»