एक HTML फॉर्म

Question

में सीएसएस स्टार रेटिंग को एकीकृत करना मैंने एक ट्यूटोरियल ऑनलाइन देखा है - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - एक सीएसएस स्टार रेटिंग सिस्टम बनाने के लिए।

<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"> 

Answer 1

यह उपयोग करने के लिए बहुत आसान है, बस कोड को कॉपी-पेस्ट करें। आप पृष्ठभूमि में अपनी खुद की स्टार छवि का उपयोग कर सकते हैं।

मैंने एक चर var 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; 
} 

एचटीएमएल

<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> 

जावास्क्रिप्ट

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(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); 
    }); 
}); 
</script> 

Answer 2

मैं सही बल्ले है कि आप देखो सख्ती से सीएसएस के साथ वे रेडियो बटन के साथ प्राप्त करने के लिए सक्षम नहीं होगा बंद कहने के लिए जा रहा हूँ।

हालांकि, आप उदाहरण आप पोस्ट में सूची शैली से चिपके और क्लिक करने योग्य spans साथ anchors है कि एक जावास्क्रिप्ट घटना को ट्रिगर करेगा की जगह सकता है कि ajax के माध्यम से अपने डेटाबेस के लिए है कि रेटिंग को बचाने बदले में होगा।

यदि आप उस मार्ग पर गए तो शायद आप कुकी मशीन को उपयोगकर्ता मशीन पर भी सहेजना चाहते हैं ताकि वे आपके डेटाबेस पर बार-बार सबमिट न कर सकें। इससे उन्हें कम से कम एक से अधिक बार सबमिट करने से रोक दिया जाएगा जब तक कि वे अपनी कुकी हटा नहीं देते।

लेकिन निश्चित रूप से इस समस्या को हल करने के कई तरीके हैं। यह सिर्फ उनमें से एक है। उम्मीद है की वो मदद करदे।

Answer 3

यहां solution है।

HTML:

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

सीएसएस:

.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; 
} 

आशा इस मदद करता है।

Source

Answer 4

कैसे इस बारे में? मुझे एक ही चीज़ की ज़रूरत थी, मुझे स्क्रैच से एक बनाना था। यह शुद्ध सीएसएस है, और आईई 9 + में काम करता है इस पर सुधार करने के लिए महसूस करें।

डेमो: http://www.d-k-j.com/Articles/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> 

सीएसएस:

.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; 
} 

Answer 5

सीएसएस:

.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> 

Answer 6

यहाँ जावास्क्रिप्ट का उपयोग कर (केवल HTML और सीएसएस) के बिना एक HTML फ़ॉर्म में सीएसएस स्टार रेटिंग एकीकृत करने की विधि है:

सीएसएस:

.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; 
} 

एचटीएमएल:

<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> 

की जांच करें demo