2016-03-26 5 views
0

derecelendirme sistemi: (yerine tıklayın edememek: Aşağıdaki alıyorum örnekte olduğu gibi Ancak http://codepen.io/rogie/pen/jgrIu5 başlangıç ​​ben bu sitede örneği izlemeye çalışıyorum

yerine istenilen sonucu elde başlangıç, in Ben gerçekten yeniyim başlangıç ​​ve baştan üst tıklanabilir çek)

enter image description here

olsun ve herhangi bir yardım bekleriz.

İşte
<html> 
<head> 
<style> 
.star-rating{ 
    font-size:0; 
    white-space:nowrap; 
    display:inline-block; 
    width:250px; 
    height:50px; 
    overflow:hidden; 
    position:relative; 
    background: 
     url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
    i{ 
opacity: 0; 
position: absolute; 
left: 0; 
top: 0; 
height: 100%; 
width: 20%; 
z-index: 1; 
background: 
     url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
background-size: contain; 
    } 
    input{ 
-moz-appearance:none; 
-webkit-appearance:none; 
opacity: 0; 
display:inline-block; 
width: 20%; 
height: 100%; 
margin:0; 
padding:0; 
z-index: 2; 
position: relative; 
&:hover + i, 
&:checked + i{ 
    opacity:1;  
} 
    } 
    i ~ i{ 
    width: 40%; 
    } 
    i ~ i ~ i{ 
width: 60%; 
    } 
    i ~ i ~ i ~ i{ 
width: 80%; 
    } 
    i ~ i ~ i ~ i ~ i{ 
width: 100%; 
    } 
} 


//just styling for the number 
.choice{ 
    position: fixed; 
    top: 0; 
    left:0; 
    right:0; 
    text-align: center; 
    padding: 20px; 
    display:block; 
} 

//reset, center n shiz (don't mind this stuff) 
*, ::after, ::before{ 
    height: 100%; 
    padding:0; 
    margin:0; 
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle; 
} 
body{ 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
    Helvetica, Arial, "Lucida Grande", sans-serif; 
    &::before{ 
height: 100%; 
content:''; 
width:0; 
background:red; 
vertical-align: middle; 
display:inline-block; 
    } 
} 
</style> 

<!-- js --> 
<script src="/js/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0 /jquery.min.js"></script> 
<script type="text/javascript" src="/js/rating.js"></script> 

</head> 

<body> 

<span class="star-rating"> 
    <input type="radio" name="rating" value="1"><i></i> 
    <input type="radio" name="rating" value="2"><i></i> 
    <input type="radio" name="rating" value="3"><i></i> 
    <input type="radio" name="rating" value="4"><i></i> 
    <input type="radio" name="rating" value="5"><i></i> 
</span> 
<strong class="choice">Choose a rating</strong> 

</body> 
</html> 

Eğer kullanımlarını LESS başvuran JS kodunun

$(':radio').change(
function(){ 
$('.choice').text(this.value + ' stars'); 
} 
) 

cevap

1

örnektir:

TEŞEKKÜRLER

Aşağıdaki kod ile html dosyası oluşturdu. Düzenli bir css içine derlemediğiniz sürece, bir web tarayıcısında çalışmayacaktır. Bu gibi:

.star-rating { 
    font-size: 0; 
    white-space: nowrap; 
    display: inline-block; 
    width: 250px; 
    height: 50px; 
    overflow: hidden; 
    position: relative; 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
} 
.star-rating i { 
    opacity: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 20%; 
    z-index: 1; 
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4='); 
    background-size: contain; 
} 
.star-rating input { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    opacity: 0; 
    display: inline-block; 
    width: 20%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    z-index: 2; 
    position: relative; 
} 
.star-rating input:hover + i, 
.star-rating input:checked + i { 
    opacity: 1; 
} 
.star-rating i ~ i { 
    width: 40%; 
} 
.star-rating i ~ i ~ i { 
    width: 60%; 
} 
.star-rating i ~ i ~ i ~ i { 
    width: 80%; 
} 
.star-rating i ~ i ~ i ~ i ~ i { 
    width: 100%; 
} 
.choice { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    padding: 20px; 
    display: block; 
} 
*, 
::after, 
::before { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle; 
} 
body { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
} 
body::before { 
    height: 100%; 
    content: ''; 
    width: 0; 
    background: red; 
    vertical-align: middle; 
    display: inline-block; 
} 
+0

Teşekkür ederim !!!! Şuan çalışıyor. Cehaletim için özür dilerim, ancak neyin az olduğunu bile bilmiyorum. CSS'de olduğunu düşündüm, aslında bu örnekte –

+0

@S. Martin: Kod profili bağlantınızın CSS bölümünün en üstünde bakarsanız, "CSS (LESS)" ifadesini görürsünüz. "View Derlenmiş" yazan bir düğme de var. Bu düğmeye tıkladığınızda, muhtemelen isteyeceğiniz şey CSS'yi verecektir. – David784

İlgili konular