Техно-мир

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

Плюсы:

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

Минусы:

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

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

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

Установка:

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. Шаблон формы переключений:

Режим просмотра: Стандарт |  Список | Иконки

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

 Первый шаблон, я оставил стандартный


 Второй шаблон, в виде списка


 Третий шаблон, в виде иконок, по 4 в ряд.

Готово!

Версия DLE: 9.x-10.0

Автор: Sander Вернуться назад