[HTML & CSS General] CSS と jQuery を利用した Star Rating
memo.
[markdown]
## CSS
CSS のみの実装例。IE 9+。
> * [Pure CSS Star Rating Input | Everything Frontend](http://everythingfrontend.com/posts/star-rating-input-pure-css.html)
“`haml
/ star
%span.rating
%input#rating-input-1-5.rating-input(type=”radio” name=”rating-input-1″ value=”5″)
%label.rating-star(for=”rating-input-1-5″)
%input#rating-input-1-4.rating-input(type=”radio” name=”rating-input-1″ value=”4″)
%label.rating-star(for=”rating-input-1-4″)
%input#rating-input-1-3.rating-input(type=”radio” name=”rating-input-1″ value=”3″)
%label.rating-star(for=”rating-input-1-3″)
%input#rating-input-1-2.rating-input(type=”radio” name=”rating-input-1″ value=”2″)
%label.rating-star(for=”rating-input-1-2″)
%input#rating-input-1-1.rating-input(type=”radio” name=”rating-input-1″ value=”1″)
%label.rating-star(for=”rating-input-1-1″)
“`
Cmpass CSS Sprites で用意した画像を利用した場合、こんな形で機能しました。
“`scss
.rating {
overflow: hidden;
display: inline-block;
font-size: 0;
position: relative;
}
.rating-input {
float: right;
width: 29px;
height: 25px;
padding: 0;
margin: 0 0 0 -29px;
@include opacity(0);
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
@extend .sprites_star–on;
}
.rating-star,
.rating:hover .rating-star {
position: relative;
float: right;
display: block;
@extend .sprites_star–off;
}
“`
また、一般兄弟セレクタ (general sibling selectors) 、`~ (チルダ)` を使うよう。
> * [一般兄弟セレクタ – CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_selectors)
> * [General sibling | CSS-Tricks](http://css-tricks.com/almanac/selectors/g/general-sibling/)
ただし、`:checked` セレクタを利用しているため、触れられているとおり IE 7/8 で機能しない。
> * [Can I use… Support tables for HTML5, CSS3, etc](http://caniuse.com/#search=%3Achecked)
## CSS + jQuery
IE 8 以下に対応するには、`.checked` という Class を用意し、jQuery で `.addClass`, `.removeClass` するようだ。
> * [Integrating CSS star rating into an HTML form – Stack Overflow](http://stackoverflow.com/questions/8118266/integrating-css-star-rating-into-an-html-form)
HTML はそのまま。
CSS は、`:checked` の部分を `.checked` へ変更する。
“`scss
.rating-input.checked ~ .rating-star {
“`
jQuery で以下を用意する。
“`JavaScript
$(document).ready(function(){
‘use strict’;
// Star Rating
$(‘.rating input:radio’).attr(‘checked’, false);
$(‘.rating input’).click(function () {
$(‘.rating .rating-input’).removeClass(‘checked’);
$(this).addClass(‘checked’);
});
$(‘input:radio’).change(
function(){
var userRating = this.value;
alert(userRating);
});
});
“`
後半は、選択された value を確認するダイアログ表示用。
## 補遺
> * [html – How to add a images in select list – Stack Overflow](http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list)
[/markdown]