Регистрация
Вход через соцсети
Восстановление пароля

Как реализовать в Инетрнет магазине в карточке товара Табы (Вкладки)?

Новый топик
14.02.2012, 13:46
Ответить | Цитировать
Гость
Гость

Хотелось бы чтобы описание товара делилось на вкладки в целях экономии места
например: Характеристика/Документация/Видео/Скачать.
Каким способом это можно реализовать?
Изображение
14.02.2012, 17:13
Ответить | Цитировать
Denis
Denis

Зарегистрирован:
2008-07-15
Сообщений: 666

Посмотрите в сторону jquery ui tabs - очень просто получится сделать

Ксю доставляет...
14.02.2012, 20:12
Ответить | Цитировать
Thoth

Зарегистрирован:
2008-08-14
Сообщений: 3

Выше ответили, но дополню.

jqueryui Очень удобная библиотека. (http://jqueryui.com/demos/ )

Кроме табов там еще Accordion, Autocomplete (использована в стандартной поставке Неткэт). Все можно оформить одной из тем (варианты css стилей) и скачать java библиотеку только нужных частей, не утяжеляя страницу загрузкой неиспользуемых.

Пример табов: табы на jqueryui

оформляется так: <div id="tabs">
<ul>
<li><a href="#tabs-1">Вкладка1</a></li>
<li><a href="#tabs-2">Вкладка2</a></li>
<li><a href="#tabs-3">Вкладка3</a></li>
</ul>
<div id="tabs-1">
.
.Текст описания...
.
.
</div>
<div id="tabs-2">
.
.Текст описания...
.
.
</div>
<div id="tabs-3">
.
.Текст описания...
.
.
</div>
</div>
17.02.2012, 14:08
Ответить | Цитировать
Бузник Андрей Анатольевич

Зарегистрирован:
2012-02-14
Сообщений: 1

Цитата:
Выше ответили, но дополню.

jqueryui Очень удобная библиотека. (http://jqueryui.com/demos/ )

Кроме табов там еще Accordion, Autocomplete (использована в стандартной поставке Неткэт). Все можно оформить одной из тем (варианты css стилей) и скачать java библиотеку только нужных частей, не утяжеляя страницу загрузкой неиспользуемых.

Пример табов: табы на jqueryui

оформляется так: <div id="tabs">
<ul>
<li><a href="#tabs-1">Вкладка1</a></li>
<li><a href="#tabs-2">Вкладка2</a></li>
<li><a href="#tabs-3">Вкладка3</a></li>
</ul>
<div id="tabs-1">
.
.Текст описания...
.
.
</div>
<div id="tabs-2">
.
.Текст описания...
.
.
</div>
<div id="tabs-3">
.
.Текст описания...
.
.
</div>
</div>

Не могу настроить табы.
Качаю табы с http://jqueryui.com/download
Распаковываю скачанный архив. Содержимое — это 3 папки: js, css, development-bundle и документ html index.html.
Копирую на сервер файлы *.css, *.js и папку images
В header моей темы вставляем следующий код:
Код:
<link type='text/css' rel='stylesheet' href='/images/template2/css/redmond/jquery-ui-1.8.17.custom.css'/>

Код:
<script type='text/javascript' src='/images/js/jquery-1.7.1.min.js'></script>

Код:
<script type='text/javascript' src='/images/js/jquery-ui-1.8.17.custom.min.js'></script>

В странице товара в подробном описании вставляю:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Вкладка1</a></li>
<li><a href="#tabs-2">Вкладка2</a></li>
<li><a href="#tabs-3">Вкладка3</a></li>
</ul>
<div id="tabs-1">
.
.Текст описания...
.
.
</div>
<div id="tabs-2">
.
.Текст описания...
.
.
</div>
<div id="tabs-3">
.
.Текст описания...
.
.
</div>
</div>
Получается просто список и внизу текст.
Может еще что-то не учел при настройке?
17.02.2012, 15:57
Ответить | Цитировать
Гость
Гость

Код:
< script >
$(function() {
$( "#tabs" ).tabs();
});
< /script >
17.02.2012, 16:41
Ответить | Цитировать
Гость
Гость

Куда этот скрипт прописывать?

< script >

$(function() {

$( "#tabs" ).tabs();

});

< /script >
17.02.2012, 18:48
Ответить | Цитировать
Denis
Denis

Зарегистрирован:
2008-07-15
Сообщений: 666

В суффикс компонента, например, или в макет дизайна. Но только не забудьте экранировать двойные кавычки

Ксю доставляет...
198 196 2012-02-17 18:48:48 11900
Описание проекта