Цветные посты

3976
9.4 из 10
Проголосовало: 47





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

Установка:
1. В форму добавления комментария добавим html:
Код
<div contenteditable="true" class="uHide uAd u2">Color Post Add</div>
<i class="uPostColor">Aa</i><div class="uColor u1"></div>
<div class="uColor u2"></div>
<div class="uColor u3"></div>
<div class="uColor u4"></div>
<div class="uColor u5"></div>
<div class="uColor u6"></div>
<div class="uColor u7"></div>
<div class="uColor u8"></div>
<div class="uColor u9"></div>
<div class="uColor u10"></div>
<div class="uColor u11"></div>
<div class="uColor u12"></div>
<div class="uColor u13"></div>
<div class="uColor u14"></div>
<div class="uColor u15"></div>
<div class="uColor u16"></div>
<div class="uColor u17"></div>
<div class="uColor u18"></div>


2. На страницу модуля комментариев или в общий файл js:
Код
<script>$('.uPostColor').click(function() {
$('.uHide, .uColor').slideToggle('slow');
});
$('.uColor').click(function() {
uColors = $(this).attr('class');
$('.uAd').removeAttr('class').addClass('uHide uAd '+uColors+'').removeClass('uColor');
$('.uHide').show();
});
$(".uHide").bind("keydown",function(e) { if(e.keyCode == 13){
$('.uHide, .uColor').slideToggle('slow');
uColoBB = $('.uAd').attr('class');
uColoBB = uColoBB.replace('uHide','').replace('uAd','uAdd');
uColoText = $('.uAd').html();
$('textarea#message').val('[uColor="'+uColoBB+'"]'+uColoText+'[/uColor]');
$('input#send').click();
return false
}});
function uColorit() {
$('.cMessage').each(function(){  
$(this).html($(this).html().split('[uColor="').join('<div class="').split('"]').join('">').split('[/uColor]').join('</div>'));  
});  
}; uColorit();</script>


В скрипте находим и сверяем атрибут:
1. textarea#message - Поле ввода вашего комментария
2. input#send - Кнопка отправки комментария.
3. .cMessage - Общий DIV в который обернуты все ваши комментарии.

3. Добавить CSS:
Код
.uColor {width: 20px;height: 20px;display: inline-block;border-radius: 50%;margin: 0px 5px;float:left; position: relative;
  top: 6px;}
.u1 {background-color: rgb(252, 216, 114);}
.u2 {background-image: linear-gradient(45deg, rgb(252, 216, 114) 0%, rgb(243, 83, 105) 100%);}
.u3 {background-color: rgb(243, 83, 105);}
.u4 {background-image: linear-gradient(45deg, rgb(102, 244, 133) 0%, rgb(23, 172, 255) 100%);}
.u5 {background-color: rgb(74, 144, 226);}
.u6 {background-image: linear-gradient(45deg, rgb(252, 54, 253) 0%, rgb(93, 63, 218) 100%);}
.u7 {background-color: rgb(95, 102, 115);}
.u8 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18309289_127281221175543_27870364906291200_n.jpg?oh=092df3e13bb9b594bdd884f229af7b4f&oe=59F5C522); background-size: cover;}
.u9 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18508529_373215599741793_4110353877742649344_n.jpg?oh=71cdfa5ef7b352318326591ad5b0489b&oe=5A0CC51F); background-size: cover;}
.u10 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18316491_1372847866113832_8579386684896968704_n.jpg?oh=a71e904b803ec262a107f54134a12cba&oe=59C42896); background-size: cover;}
.u11 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18553430_1872549626347024_5629736332940017664_n.jpg?oh=b2dfabdefe51b5134e2942f2355804e7&oe=5A051755); background-size: cover;}
.u12 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18553343_1421927967874386_4098389992936570880_n.jpg?oh=eb9a09d6cc5e52f3de92ab23cab5efc1&oe=59F96878); background-size: cover;}
.u13 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18554185_294151671029285_3415657511913521152_n.jpg?oh=99e3617b295674d7a33b094efc12ae23&oe=59FF3587); background-size: cover;}
.u14 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18900309_118306792098285_206637795802873856_n.jpg?oh=51ed2c4a3a6c653d183ced262622bb61&oe=59C6A58D) bottom; background-size: cover;}
.u15 {background: url(https://scontent.fhen2-1.fna.fbcdn.net/v/t39.10873-6/18405796_1192421064216862_5292923657557901312_n.jpg?oh=c3b15bdc95e9e2816686e9e9b979c1f4&oe=5A013D56) bottom; background-size: cover;}
.u16 {background-color: rgb(17, 17, 17);}
.u17 {background-color: red;}
.u18 {background-color: #e9ebee;color: #515e8c !important;}
.uColorAdd, .uColor, .uHide {display:none}
.uAdd, .uAd {font-family: Helvetica, Arial, sans-serif;color: rgb(255, 255, 255);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2em;
  padding: 100px 27px;text-align: center;outline-style: none;}
i.uPostColor {
  background: palegreen;
  font-size: 13px !important;
  border-radius: 50%;
  font-style: normal;
  color: #3b5998 !important;
  padding: 5px;
  font-family: serif;
  display: inline-block;
  margin-top: 4px;
}


4. Поправить CSS под свой дизайн\вид.
Автор публикации: Загрузка
Загрузка
Marishka, это его n материал
Источник: http://mybeststudio.ru
  • Всего комментариев: 2

Marishka
0
Marishka написал: в материале Написано 02 Января 2018 в 22:10
Комментарий №2
Upd 1.4 Кому лень https://jsfiddle.net/7js6tfp1/5/

Marishka
0
Marishka написал: в материале Написано 02 Января 2018 в 21:45
Комментарий №1
Мы обновили код и упростили его установку:
Что нового:
1. Новый легкий js код.
2. Отправка по Enter если есть или нет Aa цвета.
3. Простая установка.

Принцип работы:
Используется родное поле ввода текста с выбором цвета, родная кнопка отправки скрывается позволяя отправить форму по Enter.

Демо: https://jsfiddle.net/7js6tfp1/4/

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 432
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • geleson2222 написал:
  • ?
  • Doc120 написал:
  • /* Скрывает каперайт ucoz */
    .banner_u {
    opacity:0.2 ;
    }
    /* ----------------- */
    opacity:0.1 ; это легальное скрытее $POWERED_BY$
    ставим в ccs не ставте 0.0 тоже за банят 1.1 можно сам пользуюсь.
  • Doc120 написал:
  • Ставим в ccs и все
    /* Скрывает каперайт ucoz */
    .banner_u {
    opacity:0.2 ;
    }
    /* ----------------- */
  • topkalife написал:
  • Было бы лучше если бы данный скрипт работал)
  • k43 написал:
  • Возможно из-за капчи для пользователей
    Последние темы
    Опрос
    537
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей:
    • Обратная связь
    • Правила
    • RSS
    • +18
    • Мобильная версия
    • Хостинг от uCoz
    • Хостинг от uCoz
    • Copyright - webo4ka.ru © 2010-2024 г.
    • Design by Вовчик
      Администратор:)