ПафНутиЙ-Блог » Статьи » jQuery » Компактный вид комментариев на сайте

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

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


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

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

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

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

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

Как сделать?

Очень просто!
  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. Вот и всё. Скачать и посмотреть демо можно ниже.

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

  • Воскресные сниппеты №2
  • Сообщение об отсутствии комментариев на jQuery
  • Предпросмотр комментария (jQuery edition)
  • Воскресные сниппеты №1
Закрыть

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

+

Комментарии

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

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

Информация

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