Как сделать вкладки, без перезагрузки страницы? (jquery) — различия между версиями
Cmac (обсуждение | вклад) |
м (переименовал «Как сделать вкладки, без перезагрузки страницы? (AJAX)» в «Как сделать вкладки, без перезагрузки страницы? (jquery)»: Содержи) |
||
| (не показана 1 промежуточная версия 1 участника) | |||
| Строка 175: | Строка 175: | ||
Здесь <b>%test1% %test2%</b> и <b>%test3%</b> это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.<br/> | Здесь <b>%test1% %test2%</b> и <b>%test3%</b> это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.<br/> | ||
Осталось только добавить этот шаблон в настройках модуля "Структура". | Осталось только добавить этот шаблон в настройках модуля "Структура". | ||
| − | + | [[Категория:Верстка в TPL]] | |
Текущая версия на 08:22, 25 мая 2016
Вероятно, Вы видели, как на некоторых страницах реализована функция переключения между различными вкладками без перезагрузки страницы.
Это удобно и часто облегчает навигацию по странице.
Ниже описано, как подключить похожий функционал к 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% это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.
Осталось только добавить этот шаблон в настройках модуля "Структура".
