Ignite UI™ API ヘルプ

ui.igRating

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>

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

デフォルト:

defaults

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

コードサンプル

//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
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igratinghoverchange", ".selector", 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
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igratingvaluechange", ".selector", 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' です。

Ignite UI for jQuery | API リファレンス

ui.igRating

コード サンプル

関連サンプル

関連トピック

依存関係

継承

コードサンプル