1 Тема от HiS (2015-07-23 12:06:34 отредактировано HiS)

  • HiS
  • Участник
  • Неактивен
  • Зарегистрирован: 2015-05-26
  • Сообщений: 55
  • Репутация : [ 2 | 0 ]

Тема: Like rating

http://screenshot.ru/upload/images/2015/07/23/3112312I-2dbb56.png

Плагин основал, даже не основан, а это и есть Плагин StarRating измененный за 5 минут big_smile
Идея заключалась в том чтобы при нажатии на кнопку в виде сердечка отображалось количество проголосовавших.

Баги / недостатки:
Нету оповещения что вы проголосовали или что вам уже нельзя голосовать.
Форма не ajax, а это обидно sad

И так сам плагин:

стили: делал под себя

.like {position: relative; line-height: 25px;}
.like .result {position: absolute; top: 5px; left: 55px; padding: 2px 15px; background: #eee; border-radius: 3px;}
.like .result::after {content: ''; position: absolute; left: -17px; top: 8px; border: 7px solid transparent; border-right: 10px solid #eee;  }
.like > button {outline: none; border: none; background: #C77B93; width: 40px; height: 40px; color: #fff;}
.like > button:hover {background: #C7587B;}
.like > button, .like > button:hover {-webkit-transition: all 0.5s; transition: all 0.5s;}

Код вставки:

Скачать:
https://yadi.sk/d/7OyFJ2Pti3T96


P.s: сердечко у вас не будет отображаться из-за того что нету:
http://fontawesome.io/icon/heart-o/

Поделиться

2 Ответ от HiS (2015-07-23 12:18:56 отредактировано HiS)

  • HiS
  • Участник
  • Неактивен
  • Зарегистрирован: 2015-05-26
  • Сообщений: 55
  • Репутация : [ 2 | 0 ]

Re: Like rating

Не много не те стили дал ))

.like .result {
    float: left;
    position: relative;
    height: 25px;
    line-height: 25px;
    padding: 0 15px;
    background: #eee;
    top: 8px;
    margin-left: 15px;
    border-radius: 5px;
}
.like .result::after {
    content: ''; 
    position: absolute;
    left: -20px; 
    top: 3px;
    border: 10px solid transparent; 
    border-right: 15px solid #eee; 
}
.like > button { 
    float: left;
    border: none; 
    outline: none;
    width: 40px; 
    height: 40px;  
    color: #fff;
    background: #C77B93;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.like > button:hover {
    background: #C7587B;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

В принципе оба работают, просто не много разные (поправил под стандартный шаблон)

Поделиться