Интеграция CSS рейтинга в форме HTML - PullRequest
Новая
       7

Интеграция CSS рейтинга в форме HTML

12 голосов
/ 14 ноября 2011

Я видел онлайн-учебник - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - по созданию системы звездных рейтингов CSS.

На странице у них есть этот код: 

<ul class="rating">
   <li><a href="#" title="1 Star">1</a></li> 
   <li><a href="#" title="2 Stars">2</a></li>
   <li><a href="#" title="3 Stars">3</a></li>
   <li><a href="#" title="4 Stars">4</a></li>
   <li><a href="#" title="5 Stars">5</a></li>
</ul>

Насколько я могу судить, это всего лишь список.Как бы я интегрировал это в свою форму, чтобы информация из звездного рейтинга могла быть представлена ​​в базу данных.Мой текущий код для формы ниже: 

 <p>Quality</p>
 <input type="radio" name="ratingquality" value="1"> 
 <input type="radio" name="ratingquality" value="2"> 
 <input type="radio" name="ratingquality" value="3"> 
 <input type="radio" name="ratingquality" value="4"> 
 <input type="radio" name="ratingquality" value="5">

Ответы [ 6 ]

23 голосов
/ 20 января 2014

Это очень легко использовать, просто скопируйте и вставьте код.Вы можете использовать свое собственное изображение звезды в фоновом режиме.

Я создал переменную var userRating.Вы можете использовать эту переменную, чтобы получить значение от звезд.

Наслаждайтесь !!:) 

$(document).ready(function(){
    // Check Radio-box
    $(".rating input:radio").attr("checked", false);

    $('.rating input').click(function () {
        $(".rating span").removeClass('checked');
        $(this).parent().addClass('checked');
    });

    $('input:radio').change(
      function(){
        var userRating = this.value;
        alert(userRating);
    }); 
});
.rating {
    float:left;
    width:300px;
}
.rating span { float:right; position:relative; }
.rating span input {
    position:absolute;
    top:0px;
    left:0px;
    opacity:0;
}
.rating span label {
    display:inline-block;
    width:30px;
    height:30px;
    text-align:center;
    color:#FFF;
    background:#ccc;
    font-size:30px;
    margin-right:2px;
    line-height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
    background:#F90;
    color:#FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
    <span><input type="radio" name="rating" id="str5" value="5"><label for="str5"></label></span>
    <span><input type="radio" name="rating" id="str4" value="4"><label for="str4"></label></span>
    <span><input type="radio" name="rating" id="str3" value="3"><label for="str3"></label></span>
    <span><input type="radio" name="rating" id="str2" value="2"><label for="str2"></label></span>
    <span><input type="radio" name="rating" id="str1" value="1"><label for="str1"></label></span>
</div>
4 голосов
/ 07 июля 2013

Как насчет этого? Мне нужно было то же самое, я должен был создать его с нуля. Это ЧИСТЫЙ CSS, и он работает в IE9 + Не стесняйтесь улучшать его.

Демо: http://www.d -k-j.com / Статьи / Web_Development / Pure_CSS_5_Star_Rating_System_with_Radios / 

<ul class="form">
    <li class="rating">
        <input type="radio" name="rating" value="0" checked /><span class="hide"></span>
        <input type="radio" name="rating" value="1" /><span></span>
        <input type="radio" name="rating" value="2" /><span></span>
        <input type="radio" name="rating" value="3" /><span></span>
        <input type="radio" name="rating" value="4" /><span></span>
        <input type="radio" name="rating" value="5" /><span></span>
    </li>
</ul>

CSS: 

.form {
    margin:0;
}

.form li {
    list-style:none;
}

.hide {
    display:none;
}

.rating input[type="radio"] {
    position:absolute;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
    cursor:pointer;
    width:17px;
}

.rating span {
    width:24px;
    height:16px;
    line-height:16px;
    padding:1px 22px 1px 0; /* 1px FireFox fix */
    background:url(stars.png) no-repeat -22px 0;
}

.rating input[type="radio"]:checked + span {
    background-position:-22px 0;
}

.rating input[type="radio"]:checked + span ~ span {
    background-position:0 0;
}
3 голосов
/ 27 июля 2016

Вот как интегрировать рейтинг звездочек CSS в форму HTML без использования JavaScript (только HTML и CSS):

CSS: 

.txt-center {
    text-align: center;
}
.hide {
    display: none;
}

.clear {
    float: none;
    clear: both;
}

.rating {
    width: 90px;
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
    position: relative;
}

.rating > label {
    float: right;
    display: inline;
    padding: 0;
    margin: 0;
    position: relative;
    width: 1.1em;
    cursor: pointer;
    color: #000;
}

.rating > label:hover,
.rating > label:hover ~ label,
.rating > input.radio-btn:checked ~ label {
    color: transparent;
}

.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating > input.radio-btn:checked ~ label:before,
.rating > input.radio-btn:checked ~ label:before {
    content: "\2605";
    position: absolute;
    left: 0;
    color: #FFD700;
}

HTML: 

<div class="txt-center">
    <form>
        <div class="rating">
            <input id="star5" name="star" type="radio" value="5" class="radio-btn hide" />
            <label for="star5">☆</label>
            <input id="star4" name="star" type="radio" value="4" class="radio-btn hide" />
            <label for="star4">☆</label>
            <input id="star3" name="star" type="radio" value="3" class="radio-btn hide" />
            <label for="star3">☆</label>
            <input id="star2" name="star" type="radio" value="2" class="radio-btn hide" />
            <label for="star2">☆</label>
            <input id="star1" name="star" type="radio" value="1" class="radio-btn hide" />
            <label for="star1">☆</label>
            <div class="clear"></div>
        </div>
    </form>
</div>

Пожалуйста, проверьте демо

2 голосов
/ 11 августа 2015

CSS: 

.rate-container > i {
    float: right;
}

.rate-container > i:HOVER,
.rate-container > i:HOVER ~ i {
    color: gold;
}

HTML: 

<div class="rate-container">
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
    <i class="fa fa-star "></i>
</div>
0 голосов
/ 07 мая 2013

Вот решение .

HTML: 

<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

CSS: 

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

Надеюсь, это поможет.

Источник

0 голосов
/ 06 марта 2012

Я сразу скажу, что вы не сможете добиться того, чтобы они выглядели, используя радиокнопки со строгим CSS.

Однако вы можете придерживаться стиля списка вНапример, вы разместили и заменили anchors на кликабельный spans, который вызовет событие javascript, которое, в свою очередь, сохранит этот рейтинг в вашей базе данных через ajax.

Если вы пошли по этому пути, вы, вероятно, также захотите сохранить куки на компьютере пользователя, чтобы они не могли снова и снова отправлять данные в вашу базу данных.Это помешало бы им отправлять сообщения хотя бы несколько раз, пока они не удалили свои файлы cookie.

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

...