Форум CMS NetCat, общие вопросы - Как реализовать в Инетрнет магазине в карточке товара Табы (Вкладки)?

← на Главную / Разработчикам / Форум / Общие вопросы

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

		14.02.2012, 13:46
	Гость Гость	Хотелось бы чтобы описание товара делилось на вкладки в целях экономии места например: Характеристика/Документация/Видео/Скачать. Каким способом это можно реализовать?
		14.02.2012, 17:13
	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 Зарегистрирован: 2008-07-15 Сообщений: 666	В суффикс компонента, например, или в макет дизайна. Но только не забудьте экранировать двойные кавычки Ксю доставляет...