» » » Компактный вид комментариев на сайте

Компактный вид комментариев на сайте

2.06
13
16 891
Компактный вид комментариев на сайте


Сегодня я поделюсь с вами небольшим, но возможно полезным, примером кастомизации внешнего вида сайта и спообом добавления ему интерактивности.
А именно: дадим пользователю возможность выбирать представление комментариев (компактный и обычный режимы просмотров).

Для нетерпеливых: наглядная демонстрация.

Для остальных изложу суть.

Для чего это нужно?

Для того, чтобы дать возможность комфортного времяпрепровождения на вашем сайте тем пользователям, которым не очень интересно разглядывать аватарки и читать подписи юзербарами и разноцветными ссылками.

Как сделать?

Очень просто!
  1. Потребуются:
    - Плагин jquery.cookie.js (для лёгкой и непринуждённой работы с куками)
    - Прямые руки.
  2. Конечно же главное - это js. Поэтому сразу привожу код:
    	$(".comment").addClass($.cookie("small_comments"));

    $(".compact-mode").click(function () {
    $.cookie("small_comments", "small");
    $(".comment").removeClass("normal").removeClass("small").addClass($.cookie("small_comments"));
    return false;
    });

    $(".normal-mode").click(function () {
    //comCook.text="";
    $.cookie("small_comments", "normal");
    $(".comment").removeClass("normal").removeClass("small").addClass($.cookie("small_comments"));
    return false;
    });

    Где $.cookie("small_comments") - это имя переменной, в которой будут записываться cookies, что бы при повторном обращении к странице пользователь видел выбранное представление комментариев.
    Суть в следующем:
    - При загрузке страницы всем блокам с классом comment присваивается класс с именем значения cookies (если пользователь зашёл на сайт первый раз, то ничего не добавится и ничего не поменяется).
    - При клике на ссылку с классом compact-mode в куки записывается значение "small" и это же значение присваивается ко всем блокам comment
    - При клике на ссылку с классом normal-mode в куки записывается значение "normal" и это же значение присваивается ко всем блокам comment
    - Проще некуда.
  3. Осталось подточить немного стили.
    Если сократить, то таблица стилей выглядит вот так:
    .comment {...}
    .comment.small {...}
    .inner {...}
    .small .inner {...}

    Т.е. мы просто добавили в тех местах, где это необходимо модификатор в виде класса small, тем самым изменили внешний вид комментариев.
  4. Вот и всё. Скачать и посмотреть демо можно ниже.

Похожие материалы

Комментарии

bratoz
bratoz 4 июня 2012 00:10
Отличная простенькая штука!!

Правда у меня и так уже простой вид стоит у комментов))
Danil
Danil 6 января 2013 21:01
Скажите, как сделать сразу компактный вид комментариев? Какой код должен быть?
ПафНутиЙ
ПафНутиЙ 6 января 2013 21:32
дописать к классу comment класс small
Danil
Danil 6 января 2013 21:47
А вы не могли бы сбросить, как это полностью будет
ПафНутиЙ
ПафНутиЙ 7 января 2013 00:20
в примере нажмите кнопку "компактный режим" и посмотрите исходный код.
Eoy
Eoy 26 января 2013 21:41
так а как установить их???? what
ПафНутиЙ
ПафНутиЙ 26 января 2013 23:06
js положить в js-файл, css - в css, а html в шаблон comments.tpl
Eoy
Eoy 26 января 2013 23:07
скопировать просто туда??? а потом они сами появятся?? winked
ПафНутиЙ
ПафНутиЙ 26 января 2013 23:15
Лучше ничего не делайте )) правда. Для начала почитайте htmlbook.ru там много полезного. не забывайте сложными вещами голову, начинайте с простого.
Eoy
Eoy 26 января 2013 23:16
да уж ((( печально recourse
Daiv
Daiv 27 января 2013 00:10
ПафНутиЙ,
а могли бы вы показать пример на шаблоне Gemini что бы наглядно увидить.
ПафНутиЙ
ПафНутиЙ 27 января 2013 10:12
Суть способа в добавлении/удалении нужного класса у всех комментариев с запоминанием куков. От того, что я покажу пример на шаблоне Gemini или чисотй вёрстке не изменится ничего.
Вот пример на живом сайте.
cudi
cudi 6 марта 2014 12:29
Не могу найти в файле comments.tpl и addcomments.tpl
Или ваши стили предназначены для стандартных комментариев из шаблонов?

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.