OSS で利用できる機能
レーティング - カスタム項目
このサンプルは cssVotes プロパティを使用して jQuery レーティングの外観を変更する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
カスタム項目
1 つの項目のみを選択する
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このコントロールは、任意の項目に異なるスタイルを適用します。各項目の次のステートに異なるスタイルを設定することも可能です。normal、selected、hovered。2 つ目のサンプルは、cssVotes プロパティを使用して (jQuery レーティング コントロールでサポートされていません) 項目を 1 つだけ選択する方法を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<p>カスタム項目</p>
<div id="igRating1"></div>
<br/>
<p>1 つの項目のみを選択する</p>
<div id="igRating2"></div>
<script>
$(function () {
var customCss = {},
cssSnail,
cssCheetah,
cssRocket;
customCss[0] = { 0: "normal0", 1: "selected0", 2: "hovered0" };
customCss[1] = { 0: "normal1", 1: "selected1", 2: "hovered1" };
customCss[2] = { 0: "normal2", 1: "selected2", 2: "hovered2" };
$("#igRating1").igRating({
voteCount: 3,
valueAsPercent: false,
precision: "whole",
value: 0,
voteWidth: 64,
voteHeight: 38,
cssVotes: customCss
});
cssSnail = [
["selected0", "selected0", "selected0"],
["normal1", "normal1", "normal1"],
["normal2", "normal2", "normal2"]
];
cssCheetah = [
["normal0", "normal0", "normal0"],
["selected1", "selected1", "selected1"],
["normal2", "normal2", "normal2"]
];
cssRocket = [
["normal0", "normal0", "normal0"],
["normal1", "normal1", "normal1"],
["selected2", "selected2", "selected2"]
];
$("#igRating2").igRating({
voteCount: 3,
valueAsPercent: false,
precision: "whole",
precisionZeroVote: 0,
value: 1,
voteWidth: 64,
voteHeight: 38,
cssVotes: cssSnail,
valueChange: function (evt, ui) {
var style;
switch (parseInt(ui.value, 10)) {
case 1: style = cssSnail; break;
case 2: style = cssCheetah; break;
case 3: style = cssRocket; break;
}
$(this).igRating("option", "cssVotes", style);
}
});
});
</script>
<!-- Sample Styles -->
<style>
#igRating1 .normal0 { background: transparent url("/images/samples/rating/slowempty.png") no-repeat !important; }
#igRating1 .normal1 { background: transparent url("/images/samples/rating/fastempty.png") no-repeat !important; }
#igRating1 .normal2 { background: transparent url("/images/samples/rating/fastestempty.png") no-repeat !important; }
#igRating1 .selected0 { background: transparent url("/images/samples/rating/slow.png") no-repeat !important; }
#igRating1 .selected1 { background: transparent url("/images/samples/rating/fast.png") no-repeat !important; }
#igRating1 .selected2 { background: transparent url("/images/samples/rating/fastest.png") no-repeat !important; }
#igRating1 .hovered0 { background: transparent url("/images/samples/rating/slow.png") no-repeat !important; }
#igRating1 .hovered1 { background: transparent url("/images/samples/rating/fast.png") no-repeat !important; }
#igRating1 .hovered2 { background: transparent url("/images/samples/rating/fastest.png") no-repeat !important; }
#igRating2 .normal0 { background: transparent url("/images/samples/rating/slowempty.png") no-repeat !important; }
#igRating2 .normal1 { background: transparent url("/images/samples/rating/fastempty.png") no-repeat !important; }
#igRating2 .normal2 { background: transparent url("/images/samples/rating/fastestempty.png") no-repeat !important; }
#igRating2 .selected0 { background: transparent url("/images/samples/rating/slow.png") no-repeat !important; }
#igRating2 .selected1 { background: transparent url("/images/samples/rating/fast.png") no-repeat !important; }
#igRating2 .selected2 { background: transparent url("/images/samples/rating/fastest.png") no-repeat !important; }
#igRating2 .hovered0 { background: transparent url("/images/samples/rating/slow.png") no-repeat !important; }
#igRating2 .hovered1 { background: transparent url("/images/samples/rating/fast.png") no-repeat !important; }
#igRating2 .hovered2 { background: transparent url("/images/samples/rating/fastest.png") no-repeat !important; }
</style>
</body>
</html>