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 - 2024 Infragistics, Inc. All rights reserved.