mobile.igRating

モバイル igRating コントロールを使用すると、指定された値の範囲から項目を選択し評価できます。このコントロールはモバイル デバイスのためにデザインされます。評価は整数です。コントロールは読み取り専用モードの場合、値は半値に四捨五入されます。
以下のコードは、igRating コントロールの初期化方法を示します。
この API を使用した作業方法の詳細については、ここをクリックしてください。igRating コントロールに必要なスクリプトおよびテーマの参照方法については、 Ignite UI for jQuery でモバイル リソースの使用を参照してください。コード サンプル
<!doctype html> <html> <head> <!-- jQuery Core --> <script src= "js/jquery.js" type= "text/javascript" ></script> <!-- jQuery Mobile --> <script src= "js/jquery.mobile.js" type= "text/javascript" ></script> <!-- Moderznizr --> <script src= "js/modernizr.js" type= "text/javascript" ></script> <!-- Infragistics Loader Script --> <script src= "js/infragistics.loader.js" type= "text/javascript" ></script> <!-- Infragistics Loader Initialization --> <script type= "text/javascript" > $.ig.loader({ scriptPath: "js/" , cssPath: "css/" , resources: "igmRating" }); $.ig.loader( function () { $( "#igRating2" ).igRating({ value: 1 }); }); </script> </head> <body> <div id= "igRating1" data-role= "igrating" data-value= "2" > </div> <div id= "igRating2" ></div> </body> </html> |
関連サンプル
関連トピック
依存関係
-
inputName
- タイプ:
- string
- デフォルト:
- null
MVC が値をサーバーへ渡すために使用する非表示入力の名称を取得または設定します。
コード サンプル
//Initialize
$(
".selector"
).igRating({
inputName :
"hdnInput"
});
//Get
var
inputName = $(
".selector"
).igRating(
"option"
,
"inputName"
);
-
readOnly
- タイプ:
- bool
- デフォルト:
- false
レーティングが編集可能かどうかを取得または設定します。
コード サンプル
//Initialize
$(
".selector"
).igRating({
readOnly :
true
});
//Get
var
isReadOnly = $(
".selector"
).igRating(
"option"
,
"readOnly"
);
//Set
$(
".selector"
).igRating(
"option"
,
"readOnly"
,
true
);
-
value
- タイプ:
- number
- デフォルト:
- null
値 (選択された投票) を取得または設定します。
コード サンプル
//Initialize
$(
".selector"
).igRating({
value : 4
});
//Get
var
value = $(
".selector"
).igRating(
"option"
,
"value"
);
//Set
$(
".selector"
).igRating(
"option"
,
"value"
, 4);
-
voteCount
- タイプ:
- number
- デフォルト:
- 5
投票の数を取得または設定します。
コード サンプル
//Initialize
$(
".selector"
).igRating({
voteCount : 7
});
//Get
var
voteCount = $(
".selector"
).igRating(
"option"
,
"voteCount"
);
//Set
$(
".selector"
).igRating(
"option"
,
"voteCount"
, 7);
-
voteHeight
- タイプ:
- number
- デフォルト:
- 0
投票のカスタム高さ (ピクセル単位) を取得または設定します。0 の場合は、実行時のスタイル値が使用されます。
コード サンプル
//Initialize
$(
".selector"
).igRating({
voteHeight : 20
});
//Get
var
height = $(
".selector"
).igRating(
"option"
,
"voteHeight"
);
//Set
$(
".selector"
).igRating(
"option"
,
"voteHeight"
, 20);
-
voteWidth
- タイプ:
- number
- デフォルト:
- 0
投票のカスタム幅 (ピクセル単位) を取得または設定します。0 の場合は、実行時のスタイル値が使用されます。
コード サンプル
//Initialize
$(
".selector"
).igRating({
voteWidth : 20
});
//Get
var
width = $(
".selector"
).igRating(
"option"
,
"voteWidth"
);
//Set
$(
".selector"
).igRating(
"option"
,
"voteWidth"
, 20);
Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。
-
hoverChange
- キャンセル可能:
- true
ホバー値が変更される前に発生するイベント。
アプリケーションが False を返す場合、操作はキャンセルされ、ホバー値は変更されません。
関数は引数 evt および ui を取得します。
ui.value を使用して、新しい値を取得します。
ui.oldValue を使用して、古い値を取得します。コード サンプル
//Bind after initialization
$(document).delegate(
".selector"
,
"igratinghoverchange"
,
function
(evt, ui) {
//return the triggered event
evt;
//gets old value of the igRating widget
ui.oldValue;
//gets the current hovered value of the igRating widget
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) {...}
});
-
destroy
- .destroy( );
- 返却型:
- object
- 返却型の説明:
- この igRating への参照を返します。
igRating を破棄します。
コード サンプル
$(
".selector"
).igRating(
"destroy"
);
-
value
- .value( val:number );
- 返却型:
- enumeration
- 返却型の説明:
- 'number|object' を返します。 パラメーターが "number" でない場合、選択状態の CSS で描画される現在の値が返されます。それ以外の場合は、igRating への参照が返されます。
(選択された) 値を取得または設定します。
- val
- タイプ:number
- 選択状態の CSS で描画される新しい値。
コード サンプル
$(
".selector"
).igRating(
"value"
);
-
ui-igrating-hovered
- ホバー状態の投票のコンテナーに適用されるクラス。デフォルト値は "ui-igrating-hovered" です。
-
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-votehover
- ホバー状態の投票の SPAN 要素に適用されるクラス。デフォルト値は "ui-igrating-votehover" です。
-
ui-igrating-votereadonly
- readOnly 状態の投票の SPAN 要素に適用されるクラス。デフォルト値は "ui-igrating-votereadonly" です。
-
ui-igrating-votereadonlyselected
- igRating が readOnly のときに選択状態の投票の SPAN 要素に適用されるクラス。デフォルト値は "ui-igrating-votereadonlyselected" です。
-
ui-igrating-voteselected
- 選択状態の投票の SPAN 要素に適用されるクラス。デフォルト値は "ui-igrating-voteselected" です。