Как сделать вкладки, без перезагрузки страницы? (jquery) — различия между версиями
Kirill (обсуждение | вклад) |
Cmac (обсуждение | вклад) |
||
| Строка 54: | Строка 54: | ||
Теперь нужно подключить основные стили и скрипты: | Теперь нужно подключить основные стили и скрипты: | ||
Скачать необходимые стили для css и картикиоформления можно здесь [[Файл:Cms-tabs.zip]]. Этот архив необходимо распаковать в папку "\css\cms\". Как вариант, Вы можете скачать стили и оформление здесь: http://flowplayer.org/tools/css/tabs-no-images.css и http://flowplayer.org/tools/img/tabs/tabs.zip. Но тогда надо будет самостоятельно подправить пути в файле стиля, до нужных картинок. В шаблоне эти скрипты подключаются записью | Скачать необходимые стили для 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=" | + | <source lang=""> |
<link rel="stylesheet" type="text/css" href="/css/cms/tabs.css" /> | <link rel="stylesheet" type="text/css" href="/css/cms/tabs.css" /> | ||
</source> | </source> | ||
| Строка 64: | Строка 64: | ||
Скачать этот скрипт можно здесь [[Файл:Jquery.tools.min.zip]] или на сайте http://flowplayer.org/tools/download/index.html. Только нужно в вариантах скачки оставить галочку только напротив Tabs,иначе скачаются лишние функции и могут стать недоступны некоторые функции EIP.<br/><br/> | Скачать этот скрипт можно здесь [[Файл:Jquery.tools.min.zip]] или на сайте http://flowplayer.org/tools/download/index.html. Только нужно в вариантах скачки оставить галочку только напротив Tabs,иначе скачаются лишние функции и могут стать недоступны некоторые функции EIP.<br/><br/> | ||
Итоговый вид tpl-шаблона может выглядеть примерно так | Итоговый вид tpl-шаблона может выглядеть примерно так | ||
| − | <source lang=" | + | <source lang="html4strict"> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | <!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" > | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" > | ||
Версия 14:30, 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% это идентификаторы полей в административной панели, значения которых буду подставляться в соответствующую вкладку. Разумеется, этих полей может быть несколько.
Осталось только добавить этот шаблон в настройках модуля "Структура".
