ui.igRating

ui.igRating_image

igRating コントロールは HTML 5 対応 jQuery ウィジェットです。このコントロールは、隣接した選択および精度オプションとともに、各種表示オプションおよびスタイルのオプションをサポートします。この API のクラス、オプション、イベント、メソッド、およびテーマの詳細は、上記の関連するタブの下に表示されます。

次のコード スニペットは igRating コントロールの初期化方法を示しています。

この API を使用した作業方法の詳細についてはここをクリックしてください。igRating コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コード サンプル

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
	<script src="js/infragistics.core.js" type="text/javascript"></script>
	<script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
	    $("#rating").igRating({
		    voteCount: 7,
		    value: 0.4,
		    vertical: true,
		    swapDirection: true
	    });
    });
    </script>
</head>
<body>
	<div id="rating"></div>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.ui.widget.js
infragistics.ui.rating-en.js

継承

  • cssVotes

    タイプ:
    object
    デフォルト:
    null

    カスタムの CSS 投票を取得または設定します。
    オブジェクトは 2 次元配列またはインデックス付きオブジェクトである必要があります。最初のレベル項目はインデックスの票の設定を表します。
    項目の 2 番目のレベルは表を設定し、票の特定の状態のクラスを含みます。
    2 番目のインデックスの項目 [0] は標準状態の投票の css クラスに使用されます。
    2 番目のインデックスの項目 [1] は選択状態の投票の css クラスに使用されます。
    2 番目のインデックスの項目 [2] はホバー状態の投票の css クラスに使用されます。
    実例:
    { 1: { 0: "normalCss", 1: "selectedCss", 2: "hoverCss"} }
    標準状態に normalCss、ホバー状態に hoverCss、選択状態に selectedCss で 2 番目の票のみカスタマイズします。
    [[null, 's1', 'h1'], [null, 's2', 'h2'], [null, 's3', 'h3']]
    はクラス h# および s# で最初の 3 票の選択状態およびホバー状態をカスタマイズ

    コード サンプル

     
				 //Initialize
				$(".selector").igRating({
					cssVotes : customCss
				});

				//Get
				var css = $(".selector").igRating("option", "cssVotes");

				//Set
				$(".selector").igRating("option", "cssVotes", customCss);

				customCss = [
					["selected0", "selected1", "selected2"],
					["normal0", "normal1", "normal2"],
					["hovered0", "hovered1", "hovered2"]
				];

				<style type="text/css">
				.normal0 { ... }
				.normal1 { ... }
				.normal2 { ... }
				.selected0 { ... }
				.selected1 { ... }
				.selected2 { ... }
				.hovered0 { ... }
				.hovered1 { ... }
				.hovered2 { ... }
				</style>

  • focusable

    タイプ:
    bool
    デフォルト:
    true

    igRating がフォーカス可能かどうかを取得します。igRating を作成した後で、このオプションを変更することはサポートされていません。
    値 true: フォーカスを取得でき、キーイベントを処理できます。
    値 false: フォーカスを取得できません。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					focusable : false
				});

				//Get
				var focusable = $(".selector").igRating("option", "focusable");

  • language
    継承

    タイプ:
    string
    デフォルト:
    "en"

    ウィジェットのロケール言語設定を取得または設定します。

    コード サンプル

     
					//Initialize
				$(".selector").igRating({
					language: "ja"
				});

				// Get
				var language = $(".selector").igRating("option", "language");

				// Set
				$(".selector").igRating("option", "language", "ja");

  • locale
    継承

    タイプ:
    object
    デフォルト:
    null

    ウィジェットのロケール設定を取得または設定します。

    コード サンプル

     
					//Initialize
				$(".selector").igRating({
					locale: {}
				});

				// Get
				var locale = $(".selector").igRating("option", "locale");

				// Set
				$(".selector").igRating("option", "locale", {});

  • precision

    タイプ:
    enumeration
    デフォルト:
    whole

    精度を取得または設定します。値と valueHover の精度。

    メンバー

    • exact
    • タイプ:string
    • 値はマウスの場所に対応します。
    • half
    • タイプ:string
    • 値は投票の半分に丸められます。
    • whole
    • タイプ:string
    • 値は投票の数に丸められます。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					precision : "half"
				});
				//Get
				var precision = $(".selector").igRating("option", "precision");
				//Set
				$(".selector").igRating("option", "precision", "half");

  • precisionZeroVote

    タイプ:
    number
    デフォルト:
    0.25

    ゼロ値とみなされる投票サイズの部分を取得または設定します。
    これは、精度が "half" または "whole" に設定されている場合のみ有効です。
    ユーザーが最初の投票と (sizeOfVote * precisionZeroVote) の間をクリックする場合、値は 0 に設定されます。
    同じことがマウス オーバーにも適用されます。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					precisionZeroVote : 0.5
				});

				//Get
				var precisionZero = $(".selector").igRating("option", "precisionZeroVote");

				//Set
				$(".selector").igRating("option", "precisionZeroVote", 0.5);

  • regional
    継承

    タイプ:
    enumeration
    デフォルト:
    en-US

    ウィジェットの領域設定を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igRating("option", "regional");
				// Set
				$(".selector").igRating("option", "regional", "ja");

  • roundedDecimalPlaces

    タイプ:
    number
    デフォルト:
    3

    値と value-hover を丸めるために使用する小数点以下の桁数を取得または設定します。
    負の値の場合、オプションが無効になり、値は丸められません。
    注:
    精度が "whole" または "half" で roundedDecimalPlaces が 0 から 2 の範囲に設定されている場合、3 を使用します。
    valueAsPercent が有効で roundedDecimalPlaces が 0 に設定されている場合、1 を使用します。
    15 より大きい場合は、15 を使用します。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					roundedDecimalPlaces : 2
				});

				//Get
				var decimalPlaces = $(".selector").igRating("option", "roundedDecimalPlaces");

				//Set
				$(".selector").igRating("option", "roundedDecimalPlaces", 2);

  • swapDirection

    タイプ:
    bool
    デフォルト:
    false

    選択された投票またはホバー状態の投票を取得します。igRating を作成した後で、このオプションを変更することはサポートされていません。
    値 true: 左から右または上から下。
    値 false: 右から左または下から上。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					swapDirection : true
				});

				//Get
				var swap = $(".selector").igRating("option", "swapDirection");

  • theme

    タイプ:
    string
    デフォルト:
    null

    CSS クラスのセレクターを取得または設定します。
    このオプションは、すべてのデフォルト CSS スタイルをカスタム値に置き換えることを可能にします。
    アプリケーションは、"theme" セレクターを持つ CSS オプションで定義されるすべてのメンバーの CSS クラスを提供する必要があります。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					theme : "redmond"
				});

				//Get
				var theme = $(".selector").igRating("option", "theme");

				//Set
				$(".selector").igRating("option", "theme", "redmond");

				//CSS theme definition
				.redmond .ui-igrating { ... }
				.redmond .ui-igrating-active { ... }
				.redmond .ui-igrating-hover { ... }
				.redmond .ui-igrating-vote { ... }
				.redmond .ui-igrating-voteselected { ... }
				.redmond .ui-igrating-votehover { ... }
				.redmond .ui-igrating-votedisabled { ... }
				.redmond .ui-igrating-votedisabledselected { ... }

  • validatorOptions

    タイプ:
    object
    デフォルト:
    null

    igValidator でサポートされるオプションを含むオブジェクトを取得または設定します。
    onblur 検証は focusable オプションに基づきます。
    例:
    $('#rating1').igRating({ validatorOptions: { required: true, minValue: 0.2 } });。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					validatorOptions : {
						onblur: true
					}
				});

				//Get
				var validatorOptions = $(".selector").igRating("option", "validatorOptions");

				//Set
				$(".selector").igRating("option", "validatorOptions", {onblur: true});

  • value

    タイプ:
    enumeration
    デフォルト:
    null

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					value : 3
				});
				//Get
				var value = $(".selector").igRating("option", "value");
				//Set
				$(".selector").igRating("option", "value", 3);

  • valueAsPercent

    タイプ:
    bool
    デフォルト:
    true

    値と value-hover を評価するためのパーセントまたは投票数を取得または設定します。
    値 true: 値はパーセントとして評価されます (0 から 1 の範囲)。
    値 false: 値は選択された投票の数として評価されます (0 から voteCount の範囲)。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					valueAsPercent : false
				});

				//Get
				var isPercent = $(".selector").igRating("option", "valueAsPercent");

				//Set
				$(".selector").igRating("option", "valueAsPercent", false);

  • valueHover

    タイプ:
    enumeration
    デフォルト:
    null

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					valueHover : 2
				});
				//Get
				var hoverVal = $(".selector").igRating("option", "valueHover");
				//Set
				$(".selector").igRating("option", "valueHover", 2);

  • vertical

    タイプ:
    bool
    デフォルト:
    false

    投票の水平または垂直方向を取得します。
    igRating を作成した後で、このオプションを変更することはサポートされていません。

    コード サンプル

     
				$(".selector").igRating({
					vertical : true
				});

				//Get
				var isVertical = $(".selector").igRating("option", "vertical");

  • voteCount

    タイプ:
    number
    デフォルト:
    5

    投票の数を取得または設定します。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					voteCount : 3
				});

				//Get
				var count = $(".selector").igRating("option", "voteCount");

				//Set
				$(".selector").igRating("option", "voteCount", 3);

  • voteHeight

    タイプ:
    number
    デフォルト:
    0

    投票のカスタム高さ (ピクセル単位) を取得または設定します。0 の場合は、実行時のスタイル値が使用されます。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					voteHeight : 38
				});

				//Get
				var height = $(".selector").igRating("option", "voteHeight");

				//Set
				$(".selector").igRating("option", "voteHeight", 38);

  • voteWidth

    タイプ:
    number
    デフォルト:
    0

    投票のカスタム幅 (ピクセル単位) を取得または設定します。0 の場合は、実行時のスタイル値が使用されます。

    コード サンプル

     
				//Initialize
				$(".selector").igRating({
					voteWidth : 64
				});

				//Get
				var width = $(".selector").igRating("option", "voteWidth");

				//Set
				$(".selector").igRating("option", "voteWidth", 64);

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

  • hoverChange

    キャンセル可能:
    true

    ホバー値が変更される前に発生するイベント。
    アプリケーションが False を返す場合、操作はキャンセルされ、ホバー値は変更されません。
    関数は引数 evt および ui を受け取ります。
    ui.value を使用して、新しい値を取得します。
    ui.oldValue を使用して、古い値を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).delegate(".selector", "igratinghoverchange", function (evt, ui) {
					//return the triggered event
					evt;

					//the value before the igRating was hovered
					ui.oldValue;
					//the current hover value
					ui.value;
				});

				//Initialize
				$(".selector").igRating({
					hoverChange : function(evt, ui) {...}
				});

  • valueChange

    キャンセル可能:
    true

    (選択された) 値が変更される前に発生するイベント。
    アプリケーションが false を返す場合、操作はキャンセルされ、値は変更されません。
    関数は引数 evt および ui を受け取ります。
    ui.value を使用して、新しい値を取得します。
    ui.oldValue を使用して、古い値を取得します。

    コード サンプル

     
				//Bind after initialization
				$(document).delegate(".selector", "igratingvaluechange", function (evt, ui) {
					//return the triggered event
					evt;

					//gets old value of the igRating widget
					ui.oldValue;
					//gets the current selected value of the igRating widget
					ui.value;
				});

				//Initialize
				$(".selector").igRating({
					valueChange : function(evt, ui) {...}
				});

  • changeGlobalLanguage
    継承

    .igRating( "changeGlobalLanguage" );

    ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。

    コード サンプル

     
				$(".selector").igRating("changeGlobalLanguage");

  • changeGlobalRegional
    継承

    .igRating( "changeGlobalRegional" );

    ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。

    コード サンプル

     
				$(".selector").igRating("changeGlobalRegional");

  • changeLocale
    継承

    .igRating( "changeLocale", $container:object );

    ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
    注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。

    • $container
    • タイプ:object
    • オプションのパラメーター: 設定しない場合、ウィジェットの要素を $container として使用します。

    コード サンプル

     
				$(".selector").igRating("changeLocale");

  • destroy

    .igRating( "destroy" );
    返却型:
    object
    返却型の説明:
    この igRating への参照を返します。

    igRating ウィジェットを破棄します。

    コード サンプル

     
				$(".selector").igRating("destroy");

  • focus

    .igRating( "focus" );
    返却型:
    object
    返却型の説明:
    この igRating への参照を返します。

    igRating にフォーカスを設定します。これは、options.focusable が有効なときのみ効果があります。

    コード サンプル

     
				$(".selector").igRating("focus");

  • hasFocus

    .igRating( "hasFocus" );
    返却型:
    bool
    返却型の説明:
    igRating にフォーカスがある場合、true を返します。

    igRating にフォーカスがあるかどうかをチェックします。

    コード サンプル

     
				var focused = $(".selector").igRating("hasFocus");

  • validate

    .igRating( "validate" );
    返却型:
    bool
    返却型の説明:
    すべてのチェックが成功した場合は True。検証が有効になっていない場合、null 値が可能です。

    トリガーを検証します。

    コード サンプル

     
				$(".selector").igRating("validate");

  • validator

    .igRating( "validator", [destroy:bool] );
    返却型:
    object
    返却型の説明:
    igValidator への参照または null を返します。

    igRating が使用する igValidator への参照を取得します。

    • destroy
    • タイプ:bool
    • オプション
    • バリデーターの破棄を要求します。

    コード サンプル

     
				//get igValidator widget that is used by the igRating
				var validator = $(".selector").igRating("validator");

				//destroy the igValidator widget that is used by the igRating
				$(".selector").igRating("validator", "destroy");

  • value

    .igRating( "value", val:number );
    返却型:
    enumeration
    返却型の説明:
    'number|object' を返します。パラメーターが "number" でない場合、選択状態の CSS で描画される値が返されます。それ以外の場合は、igRating への参照が返されます。

    (選択された) 値を取得または設定します。
    returnType="number|object"。パラメーターが "number" でない場合、選択状態の CSS で描画される値が返されます。それ以外の場合は、igRating への参照が返されます。

    • val
    • タイプ:number
    • 選択状態の CSS で描画される新しい値。

    コード サンプル

     
				//Get
				var value = $(".selector").igRating("value");

				//Set
				$(".selector").igRating("value", 4);

  • valueHover

    .igRating( "valueHover", [val:number] );
    返却型:
    enumeration
    返却型の説明:
    'number|object' を返します。パラメーターが "number" でない場合、ホバー状態の CSS で描画される最近の値が返されます。それ以外の場合は、igRating への参照が返されます。

    ホバー値を取得または設定します。
    returnType="number|object"。パラメーターが "number" でない場合、ホバー状態の CSS で描画される最近の値が返されます。それ以外の場合は、igRating への参照が返されます。

    • val
    • タイプ:number
    • オプション
    • マウスがレーティングの上にホバーするときにホバー css で描画される新しい値。

    コード サンプル

     
				//Get
				var value = $(".selector").igRating("valueHover");

				//Set
				$(".selector").igRating("valueHover", 5);

  • ui-igrating-active

    igRating にフォーカスがあるときに DIV コンテナー要素に適用されるクラス。デフォルト値は 'ui-igrating-active' です。

  • ui-igrating-hover ui-state-hover

    ホバー状態の投票のコンテナーに適用されるクラス。デフォルト値は 'ui-igrating-hover ui-state-hover' です。

  • ui-igrating ui-state-default ui-widget-content

    DIV コンテナー要素に適用されるクラス。デフォルト値は 'ui-igrating ui-state-default ui-widget-content' です。

  • ui-igrating-selected ui-state-highlight

    ホバー状態の投票のコンテナーに適用されるクラス。デフォルト値は 'ui-igrating-selected ui-state-highlight' です。

  • ui-igrating-vote ui-icon ui-icon-star

    投票の SPAN 要素に適用されるクラス。デフォルト値は 'ui-igrating-vote ui-icon ui-icon-star' です。

  • ui-igrating-votedisabled ui-state-disabled

    無効な状態の投票の SPAN 要素に適用されるクラス。デフォルト値は 'ui-igrating-votedisabled ui-state-disabled' です。

  • ui-igrating-votedisabledselected ui-state-disabled

    igRating が無効のときに選択状態の投票の SPAN 要素に適用されるクラス。デフォルト値は 'ui-igrating-votedisabledselected ui-state-disabled' です。

  • ui-igrating-votehover

    ホバー状態の投票の SPAN 要素に適用されるクラス。デフォルト値は 'ui-igrating-votehover' です。

  • ui-igrating-voteselected

    選択状態の投票の SPAN 要素に適用されるクラス。デフォルト値は 'ui-igrating-voteselected' です。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.