• Автор:

    Flesha
  • Добавлено:

    авг 27, 2013
  • Комментариев:

    0
  • Просмотров:

    1 750

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

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

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

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

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

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

Вот примерно так и будет выглядеть нижеописанное:
Хак Переключение шаблонов shortstory

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


Установка:

CSS вствляем в style.css:

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


JS в любой файл, например libs.js:

$(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;
});
})


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

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


И шаблон короткой новости:
<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>


С Уважением,
Олег Александрович a.k.a. Sander
Источник: SanDev.pro dle
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.