mobile.igRating

mobile.igRating_image

モバイル igRating コントロールを使用すると、指定された値の範囲から項目を選択し評価できます。このコントロールはモバイル デバイスのためにデザインされます。評価は整数です。コントロールは読み取り専用モードの場合、値は半値に四捨五入されます。

以下のコードは、igRating コントロールの初期化方法を示します。

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

コード サンプル

 
<!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>

    

関連サンプル

関連トピック

依存関係

jquery-1.7.2.js
jquery.mobile-1.2.0.js
  • 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 でイベントを使用するを参照してください。

注: 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;
                
                //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" です。

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