Добро пожаловать, Гость
Логин: Пароль: Запомнить меня

ТЕМА: [СОВЕТ] Tabs и Accordion в шаблоне

[СОВЕТ] Tabs и Accordion в шаблоне 7 года 6 мес. назад #30

  • Dgikar
  • Dgikar аватар
  • Не в сети
  • Модератор
  • Сообщений: 230
  • Спасибо получено: 21
  • Репутация: 5
Как сделать табы с автоматическим изменением Height и минимумом кода:

В нужном Вам месте, указываете:
<ul class="tabs tabs1">
	<li class="t1 tab-current"><a>Первая вкладка</a></li>
	<li class="t2"><a>Вторая вкладка</a></li>
	<li class="t3"><a>Третья вкладка</a></li>
</ul>
 
<div class="t1">
	Первая вкладка
</div>
<div class="t2">
	Вторая вкладка
</div>
<div class="t3">
	<jdoc:include type="modules" name="myModule" style="xhtml" />
</div>
Создаем в папке /templates/myTemplate/js/ js файл (назовем его: tabs)/ В него, вписываем:
var $j = jQuery.noConflict();
 
$j(document).ready(function() {
 
$j('ul.tabs li').css('cursor', 'pointer');
 
$j('ul.tabs.tabs1 li').click(function(){
	var thisClass = this.className.slice(0,2);
	$j('div.t1').hide();
	$j('div.t2').hide();
	$j('div.t3').hide();
	$j('div.' + thisClass).show();
	$j('ul.tabs.tabs1 li').removeClass('tab-current');
	$j(this).addClass('tab-current');
	});
});
На нужной Вам странице (или в head), подключаем JavaScript:
<script src="/templates/myTemplate/js/tabs.js" type="text/javascript"></script>
После, в CSS файле шаблона, прописываете то, как Ваши табы должны выглядеть.
ul.tabs{}
 
ul.tabs li{}
 
ul.tabs li a{}
 
ul.tabs li.tab-current{}
 
div.t2,div.t3{
	display: none;
}
 
div.t1,div.t2,div.t3{}
Ну, где-то так... Если можно еще как-то сократить, подскажите как.
Только что выяснил, что этот код, продоставляет возможность, создать только 9-ть вкладок.

Если делать больше (t10, t11, t12 и т. д.), то, все вкладки, после девятой, повторяют содержимое первой (если это t1...), второй (если это t2...) и т. д.
РЕШЕНИЕ: при создании 10-й вкладки, просто поменяйте букву и начните счет по-новому
Пример:
<ul class="tabs tabs1">
	<li class="t1 tab-current">Первая вкладка</li>
	<li class="t2"><a>Вторая вкладка</a></li>
	<li class="t3"><a>Третья вкладка</a></li>
			............................
 
	<li class="t8"><a>Восьмая вкладка</a></li>
	<li class="t9"><a>Девятая вкладка</a></li>
	<li class="u1"><a>Десятая вкладка</a></li>
</ul>
Эту же процедуру, нужно повторить и для CSS и для JS кода


P. S.
    Работоспособность этих табов в SEBLOD - проверено на моем проекте -
ВСЕ ПРЕКРАСНО РАБОТАЕТ
Долог путь поучения, краток и успешен путь примеров (Сенека).
Последнее редактирование: 6 года 4 мес. назад от Dgikar.
Администратор запретил публиковать записи гостям.
Спасибо сказали: Lonya

Re: Табы в шаблоне 7 года 6 мес. назад #41

  • admin
  • admin аватар
  • Не в сети
  • Администратор
  • Сообщений: 668
  • Спасибо получено: 194
  • Репутация: 66
Спасибо! добавим в "Секреты работы". Думаю, часть наиболее интересных решений из Форума будем туда переносить
С уважением,
Юрий Посохов
www.seblod.pro
Реквизиты для поддержки проекта seblod.pro:
WMR: R244179985703, WMZ: Z130736735723, WME: E359359968529
PayPal: moscowfly(cобаCHка)gmail.сом
Яндекс.Деньги: 410011637395363

Для ваших проектов рекомендую хостинг от Beget! Стабильная работа сайтов Joomla, отличная поддержка. БЕСПЛАТНЫЙ тестовый месяц без ограничений! Регистрируясь по реферальной ссылке Вы также поддерживаете наш проект! http://beget.ru?id=21871
Администратор запретил публиковать записи гостям.

Re: Табы в шаблоне 7 года 6 мес. назад #62

  • zorojan
  • zorojan аватар
  • Не в сети
  • Давно я тут
  • Сообщений: 80
  • Спасибо получено: 23
  • Репутация: 4
спасибо очень полезное решение .
думаю таким же образом используя ствествуеши код можна решить и задацю система для сравнение контента.
Администратор запретил публиковать записи гостям.

Accordion в шаблоне 7 года 6 мес. назад #68

  • Dgikar
  • Dgikar аватар
  • Не в сети
  • Модератор
  • Сообщений: 230
  • Спасибо получено: 21
  • Репутация: 5
В нужном Вам месте, указываете:
<div>
	<span class="openIt myPlus">Первая вкладка</span>
		<div align="center" class="closeIt">
			Первая вкладка
		</div>
	<span class="openIt myPlus">Вторая вкладка</span>
		<div align="center" class="closeIt">
			Вторая вкладка
		</div>
	<span class="openIt myPlus">Третья вкладка</span>
		<div align="center" class="closeIt">
			<jdoc:include type="modules" name="myModule" style="xhtml" />
		</div>
</div>
  1. Создаем в папке /templates/myTemplate/js/ js файл (назовем его: myaccord). В него, вписываем:
    	$(document).ready(function() { 
     
    	//Скрываем все содержимое по умолчанию
    	$('.closeIt').hide();
     
    	//Обрабатываем нажатия
    	$('.openIt').toggle(function() {
    		$(this).removeClass('myPlus').addClass('myMinus');
    		$(this).next().slideDown(200); //показываем содержимое
    	},
     
    	function() {
    		$(this).removeClass('myMinus').addClass('myPlus');
    		$(this).next().slideUp(200); //скрываем содержимое при повторном нажатии
    	});
     
    	});
  2. Подключаем наш myaccord.js, между тегами <head></head>:
    <script src="/templates/myTemplate/js/myaccord.js" type="text/javascript"></script>
  3. Стиль CSS, для
    Это изображения скрыто для гостей.
    Пожалуйста, зарегистрируйтесь или войдите, чтобы увидеть его.
    и
    Это изображения скрыто для гостей.
    Пожалуйста, зарегистрируйтесь или войдите, чтобы увидеть его.
    .myPlus { padding-left: 15px; background: url('путь к фото плюс'); background-repeat: no-repeat; background-position: 1px 3px; }
    .myMinus { padding-left: 15px; background: url('путь к фото минус'); background-repeat: no-repeat; background-position: 1px 3px; }
    .openIt { cursor: pointer; display: inline-table; }
P. S.
Если по каким-то причинам, Accordion не будет работать, попробуйте заменить код в myaccord.js на этот код:
var $js = jQuery.noConflict();
 
$js(document).ready(function() {
 
$js('.closeIt').hide();
 
$js('.openIt').toggle(function() {
	$js(this).removeClass('myPlus').addClass('myMinus');
	$js(this).next().slideDown(200);
},
function() {
	$js(this).removeClass('myMinus').addClass('myPlus');
	$js(this).next().slideUp(200);
});
 
}); //end Ready
Вот собственно и все... Картинки плюса и минуса, можно скачать здесь, или использовать свои

Это сообщение содержит прикрепленные изображения.
Пожалуйста, войдите или зарегистрируйтесь, чтобы увидеть их.

Долог путь поучения, краток и успешен путь примеров (Сенека).
Последнее редактирование: 7 года 5 мес. назад от Dgikar.
Администратор запретил публиковать записи гостям.

Re: Accordion в шаблоне 6 года 7 мес. назад #3452

  • roman
  • roman аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 40
  • Спасибо получено: 2
  • Репутация: 1
Ребят, что т не получается завести табы.

При загрузке страницы отображается первая вкладка, кликаю на другую и все исчезает. Кликаю обратно на первую и не чего ...
Администратор запретил публиковать записи гостям.

Re: Accordion в шаблоне 6 года 7 мес. назад #3457

  • admin
  • admin аватар
  • Не в сети
  • Администратор
  • Сообщений: 668
  • Спасибо получено: 194
  • Репутация: 66
Ром, какие-нибудь JS ошибки на странице появляются? Попробуй если что прикрутить табы от nonumber.nl, через оверрайд. очень даже хороши
С уважением,
Юрий Посохов
www.seblod.pro
Реквизиты для поддержки проекта seblod.pro:
WMR: R244179985703, WMZ: Z130736735723, WME: E359359968529
PayPal: moscowfly(cобаCHка)gmail.сом
Яндекс.Деньги: 410011637395363

Для ваших проектов рекомендую хостинг от Beget! Стабильная работа сайтов Joomla, отличная поддержка. БЕСПЛАТНЫЙ тестовый месяц без ограничений! Регистрируясь по реферальной ссылке Вы также поддерживаете наш проект! http://beget.ru?id=21871
Администратор запретил публиковать записи гостям.

Re: Accordion в шаблоне 6 года 7 мес. назад #3458

  • roman
  • roman аватар
  • Не в сети
  • Захожу иногда
  • Сообщений: 40
  • Спасибо получено: 2
  • Репутация: 1
admin пишет:
Ром, какие-нибудь JS ошибки на странице появляются? Попробуй если что прикрутить табы от nonumber.nl, через оверрайд. очень даже хороши

Ни на что не ругается, щас загуглю что это такое тако еnonumber.nl

Юр, про это речь идет?

Вывожу табы сием способом, т.е. отображение моего контента
<div class="t1">
             <?php echo $cck->renderPosition( 'description', '', $cck->h( 'description' ) ); ?>
          </div>
 
          <div class="t2">
             <?php echo $cck->renderPosition( 'gallery', '', $cck->h( 'gallery' ) ); ?>
          </div>
 
          <div class="t3">
             <?php echo $cck->renderPosition( 'question', '', $cck->h( 'question' ) ); ?>
          </div>
 
 
          <div class="t4">
             <?php echo $cck->renderPosition( 'contact', '', $cck->h( 'contact' ) ); ?>
          </div>


Поставил на тестовый сайт, блин он кода очень много создает ((( Отдельные скрипты/ксс и т.д.
Последнее редактирование: 6 года 7 мес. назад от roman.
Администратор запретил публиковать записи гостям.

Re: [СОВЕТ] Tabs и Accordion в шаблоне 6 года 7 мес. назад #3460

  • viocassel
  • viocassel аватар
  • Не в сети
  • Модератор
  • Web Designer / Developer
  • Сообщений: 337
  • Спасибо получено: 122
  • Репутация: 26
Что много кода создает? Tabs от NoNumber? Я думаю, не больше того, что ты напишешь сам.

Так же можешь использовать Tab самого фреймворка Bootstrap (если ты работаешь с J!3+). Если же ты работаешь с J!2.5+ и при этом хочешь "табы" Bootstrap-а, то можешь установить дополнительный плагин, например JBootstrap ну и всё такое...

Пробуй Tabs от NoNumber, работает на 100%. Простота и гибкость.
Joomla! + SEBLOD + UIKit
Рекомендую хостинг IHC
Последнее редактирование: 6 года 7 мес. назад от viocassel.
Администратор запретил публиковать записи гостям.

roundtheme