Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

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

Установка:

1. В форму добавления комментария добавим html:
Код
<i class="uPostColor"></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>


2. На страницу модуля комментариев или в общий файл js:
Код
<script>// Открываем Aa цвета для поста
$('.uPostColor').click(function() {
$('.uColor').slideToggle('slow');
$('#addcBut').click(); // Скрываем родную Кнопку отправить для замены отправки на Enter
});
// Выбираем Aa и меняем цвет поля
$('.uColor').click(function() {
$('#message').attr('class',$(this).attr('class')).removeClass('uColor');
});
// Отправить Aa по нажатию Enter
$("#message").bind("keydown",function(e) { if(e.keyCode == 13){
PoleAa = $(this).attr('class');
ColorAa = $(this).val();
if(typeof(PoleAa) === "undefined") {  
$('#addcBut').click().show(); // Отправить по Enter если нет Aa цвета
$("#message").val('');  
} else {
$(this).val('[Aa="uAdd '+PoleAa+'"]'+ColorAa+'[/Aa]');
$('#addcBut').click().show(); // Отправить по Enter если есть Aa цвет
$("#message").removeClass(PoleAa).val('');  
Aa(); // Выполняем функцию преобразования из BB в HTML
};
return false;
}});
function Aa() {
$('.cMessage').each(function(){  
$(this).html($(this).html().split('[Aa="').join('<div class="').split('"]').join('">').split('[/Aa]').join('</div>'));  
});  
}; Aa();</script>


В скрипте находим и сверяем атрибут:

1. #message - Поле ввода вашего комментария
2. #ddcBut - Кнопка отправки комментария.
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: rgb(252, 216, 114);}
.u2 {background: linear-gradient(45deg, rgb(252, 216, 114) 0%, rgb(243, 83, 105) 100%);}
.u3 {background: rgb(243, 83, 105);}
.u4 {background: linear-gradient(45deg, rgb(102, 244, 133) 0%, rgb(23, 172, 255) 100%);}
.u5 {background: rgb(74, 144, 226);}
.u6 {background: linear-gradient(45deg, rgb(252, 54, 253) 0%, rgb(93, 63, 218) 100%);}
.u7 {background: rgb(95, 102, 115);}
.uColorAdd, .uColor {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: url(//woobl.ru/itm/Aa.jpg) no-repeat center;background-size:contain;
  width: 25px;
  height: 25px;
  display: inline-block;
}


4. Поправить CSS под свой дизайн.
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 14.07.2017 в 17:45 по МСК
Категория: Другие модули
Просмотров: 223
Комментариев: 1
Эмоций:
Теги: post, ucoz, Comment, js, user, New
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Best_Studio
05.01.2018 | # |№1
Материал обновлен до версии 1.3.
Ok