jQuery Rating コントロールまたは igRating を使用すると、指定された値の範囲から項目を選択し評価できます。簡単なコントロールに見えますが、igRating は非常に柔軟です。外観と動作を変更する豊富な API を備えていて、クライアント操作に応じてコントロールを動的に変更できます。このトピックでは、すべての機能をリストし、簡単な igRating コントロールを作成する方法を説明します。
jQuery Rating コントロールは、クライアント側専用のコントロールを含む Ignite UI for jQuery パッケージの一部です。これによって、開発者は、jQuery Rating を使用して開発の際に複数の実装オプションを柔軟に選択できます。レーティング コントロールは、特定のサーバー バックエンドを使用せずに構成できる豊富な jQuery API を公開します。また、Microsoft® ASP.NET MVC フレームワークを使用する開発者は、レーティングのサーバー側ラッパーを活用して、好きな .NET™ 言語を使ってコントロールを構成できます。
jQuery Rating はそれ自体をスタイルできるので、コントロールのルック アンド フィールを変更できます。jQuery Rating をスタイリングすることによって、すべてのサポート対象のブラウザーに一貫性のある外観を提供できます。jQuery Rating は、既存のスタイル シートを活用でき、さらに jQuery UI の ThemeRoller を使用してスタイルすることもできます。
以下の手順は、jQuery クライアント コードまたは ASP.NET MVC サーバー コードを使用して Web ページに jQuery Rating の基本的な実装を作成する方法を示しています。
どの実装を選択するかについて詳細は、「Ignite UI for jQuery の概要」を参照してください。次のスクリーンショットはデフォルトの Rating ビューを示しています。
ご自分の HTML ページまたは ASP.NET MVC View で、必要な JavaScript ファイル、CSS ファイル、および ASP.NET MVC アセンブリを参照してください。
HTML の場合:
<link type="text/css" href="/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/structure/infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.core.js"></script><script type="text/javascript" src="/Scripts/Samples/infragistics.lob.js"></script>
ASPX の場合:
<%@ Import Namespace="Infragistics.Web.Mvc" %>
<link type="text/css" href="<%= Url.Content("~/css/themes/infragistics/infragistics.theme.css") %>" rel="stylesheet" />
<link type="text/css" href="<%= Url.Content("~/css/structure/infragistics.css") %>" rel="stylesheet" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.4.min.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui.min.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/Samples/infragistics.core.js") %>"></script><script type="text/javascript" src="<%= Url.Content("~/Scripts/Samples/infragistics.lob.js") %>"></script>
Razor の場合:
@using Infragistics.Web.Mvc;
<link type="text/css" href="@Url.Content("~/css/theme/infragistics/infragistics.theme.css")" rel="stylesheet" />
<link type="text/css" href="@Url.Content("~/css/structure/infragistics.css")" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.core.js")"></script><script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.lob.js")"></script>
jQuery の実装では、HTML 内のターゲット要素として div を定義します。ASP.NET MVC の実装では、この手順はオプションです。
HTML の場合:
<div id="igRating1"></div>
上の手順が完了したら、ID、投票の高さ、値の表示などのオプションの設定を開始します。ASP.NET MVC View では、すべてのその他のオプションを設定した後で Render メソッドを呼び出す必要があります。
jQuery の場合:
<script type="text/javascript">
$("#igRating1").igRating({
voteCount: 10,
valueAsPercent: false,
value: 4,
precision: "exact"
});
</script>
ASPX の場合:
<%= Html.Infragistics().Rating()
.ID("igRating1")
.VoteCount(10)
.ValueAsPercent(false)
.Value(4)
.Precision(RatingPrecision.Exact)
.Render() %>
Razor の場合:
@( Html.Infragistics().Rating()
.ID("igRating1")
.VoteCount(10)
.ValueAsPercent(false)
.Value(4)
.Precision(RatingPrecision.Exact)
.Render()
)
Web ページを実行すると、基本的なレーティング コントロールが表示されます。
オンラインで表示: GitHub