27.08.13, 13:06
0 комментарий
  DLE Хаки

Переключение шаблонов shortstory

На многих сайтах, в частности каталогах, встречается функция смены оформления коротких новостей, например: списком, маленькими иконками, большими иконками и т.п.
В DLE такой опции нету, возможно будет добавлена, но пока постараемся обойтись простым методом на JS и костылях :)

Суть метода заключается в том, что выводятся сразу все варианты оформления новости, но не нужные скрытые в display:none;
Для работы нам понадобится дополнительно подключить только плагин jQuery Cookie, чтобы запоминать выбранный тип оформления при переходе по страницам навигации.

Плюсы:
[+] Простая установка
[+] Быстрота работы

Минусы:
[-]Пока страница не загрузится будет отображаться первый тип шаблона
[-]Большой вес страницы, много скрытого не используемого текста

Вот примерно так и будет выглядеть нижеописанное:

Переключение шаблонов shortstory


Переключение шаблонов shortstory


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

Установка:
1. CSS:

.templater .current{color:#c00;}
.templtes{display:none;}
.templtes.current{display:block;}



2. javascript:

$(function(){
	if($.cookie('short_template')){
		$(".templtes").removeClass('current');
		$(".templater a[data-template]").removeClass('current').each(function(){
			if($(this).data('template')==$.cookie('short_template')){
				$(this).addClass('current');
				$(".template-"+$.cookie('short_template')).addClass('current');
			}
		});
	}
	$(".templater a[data-template]").click(function(){
		if($(this).hasClass('current')) return false;
		$(this).addClass('current').siblings().removeClass('current');
		$(".templtes").removeClass('current');
		$(".template-"+$(this).data('template')).addClass('current');
		$.cookie('short_template', $(this).data('template'),{path:'/'});
		return false;
	});
})



3. Не забудьте подключить jquery.cookie.js.

4. Шаблон формы переключений:

<div class="templater">Режим просмотра: <a href="#" class="current" data-template="default">Стандарт</a> |  <a href="#" data-template="list">Список</a> | <a href="#" data-template="icons">Иконки</a></div>



5. Шаблон короткой новости:

<div class="templtes template-default current">
 Первый шаблон, я оставил стандартный
</div>
<div class="templtes template-list">
 Второй шаблон, в виде списка
</div>
<div class="templtes template-icons" style="float:left;width:25%;">
 Третий шаблон, в виде иконок, по 4 в ряд.
</div>


Готово!

Версия DLE: 9.x-10.0
Автор: Sander

Напишите своё мнение