» » » Смена вида краткой новости с помощью скрипта.
21 0  

Смена вида краткой новости с помощью скрипта.

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

Код кнопок:

<div class="templater">
	Режим просмотра: 
	<a href="#" data-tpl="tpl_main" class="current">Стандарт</a>
	<a href="#" data-tpl="tpl_list">Список</a>
	<a href="#" data-tpl="tpl_tile">Плитка</a>
</div>
<div class="container">
<div class="news-1"></div>
<div class="news-1"></div>
<div class="news-1"></div>
</div>

Описание:
После клика на кнопку "Список" она получит клас current, а контейнер с новостями получит клас tpl_list:
<div class="templater">
	Режим просмотра: 
	<a href="#" data-tpl="tpl_main" class="">Стандарт</a>
	<a href="#" data-tpl="tpl_list" class="current">Список</a>
	<a href="#" data-tpl="tpl_tile" class="">Плитка</a>
</div>
<div class="container tpl_list">
<div class="news-1"></div>
<div class="news-1"></div>
<div class="news-1"></div>
</div>


Код скрипта:

<script type="text/jаvascript">
function templateSwitcherBySander(target) {
	var targetClass = $(target).attr('class');

	function setTpl(tpl) {
		if (tpl) {
			$(target).attr('class', targetClass).addClass(tpl);
			$('[data-tpl=' + tpl + ']').addClass('current').siblings().removeClass('current');
		}
	}

	setTpl(localStorage.getItem('short_tpl'));

	$(document).on('click', '.templater a', function(e){
		e.preventDefault();
		if (!$(this).hasClass('current')) {
			var tpl = $(this).data('tpl')
			setTpl(tpl);
			localStorage.setItem('short_tpl', tpl);
		}
	})
}

$(function(){
	templateSwitcherBySander('.container');
})
</script>

Как работает?

При клике на одну из трех кнопок ей присваивается клас - current

А контейнеру где все новости, или самой новости если она будет иметь клас .container
будут присвоиины по кликах класы:

  • tpl_list
  • tpl_main
  • tpl_list

* клас  .container   может быть у всх кратких ностях и им всем присвоятся новые класы.

---

Подсмотрено у Сандкра - смотреть его сайт


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019