mobile.igList

mobile.igList_image

igList は、モバイル環境でリスト機能を提供する jQuery コントロールです。コントロールは、テンプレート、フィルタリング,並べ替え/グループ化および ロードオンデマンド機能があります。

igList コントロールはフラット リストを表示し、igListView コントロールのベースとして使用されます。

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

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

コード サンプル

 
        <!doctype html>
        <html>
        <head>
            <!-- jQuery Mobile Styles -->
            <link rel="stylesheet" href="../content/jqm/jquery.mobile.structure.min.css" />
            <!-- jQuery Core -->
            <script type="text/javascript" src="js/jquery.js"></script>
            <!-- jQuery Mobile Core -->
            <script type="text/javascript" src="js/jquery.mobile.js"><script>
            <!-- Infragistics mobile loader -->
            <script type="text/javascript" src="js/infragistics.mobile.loader.js"></script>
            <script type="text/javascript">
                var northwindEmployees = [
                    { "ID": 1, "Name": "Davolio, Nancy", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/1.png", "Phone": "(206) 555-9857", "PhoneUrl": "tel:(206) 555-9857" },
                    { "ID": 2, "Name": "Fuller, Andrew", "Title": "Vice President, Sales", "ImageUrl": "../content/images/nw/employees/2.png", "Phone": "(206) 555-9482", "PhoneUrl": "tel:(206) 555-9482" },
                    { "ID": 3, "Name": "Leverling, Janet", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/3.png", "Phone": "(206) 555-3412", "PhoneUrl": "tel:(206) 555-3412" },
                    { "ID": 4, "Name": "Peacock, Margaret", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/4.png", "Phone": "(206) 555-8122", "PhoneUrl": "tel:(206) 555-8122" },
                    { "ID": 5, "Name": "Buchanan, Steven", "Title": "Sales Manager", "ImageUrl": "../content/images/nw/employees/5.png", "Phone": "(71) 555-4848", "PhoneUrl": "tel:(71) 555-4848" },
                    { "ID": 6, "Name": "Suyama, Michael", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/6.png", "Phone": "(71) 555-7773", "PhoneUrl": "tel:(71) 555-7773" },
                    { "ID": 7, "Name": "King, Robert", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/7.png", "Phone": "(71) 555-5598", "PhoneUrl": "tel:(71) 555-5598" },
                    { "ID": 8, "Name": "Callahan, Laura", "Title": "Inside Sales Coordinator", "ImageUrl": "../content/images/nw/employees/8.png", "Phone": "(206) 555-1189", "PhoneUrl": "tel:(206) 555-1189" },
                    { "ID": 9, "Name": "Dodsworth, Anne", "Title": "Sales Representative", "ImageUrl": "../content/images/nw/employees/9.png", "Phone": "(71) 555-4444", "PhoneUrl": "tel:(71) 555-4444" }
                ];
            </script>
            <script type="text/javascript">
                $.ig.loader({
                    scriptPath: "../../js/",
                    cssPath: "../../css/",
                    resources: "igmList",
                    theme: "ios"
                });
                $.ig.loader(function() {
                    $("#igList").igList({
                        iconMode: "thumbnail",
                        dataSource: northwindEmployees,
                        bindings: {
                            headerKey: "Name",
                            primaryKey: "ID",
                            textKey: "Phone",
                            imageUrlKey: "ImageUrl"
                        }
                    });
                });
            </script>
        </head>
        <body>
        <div id="igList"></div>
        </body>
        </html>
    

関連サンプル

関連トピック

依存関係

jquery-1.7.2.js
jquery.mobile-1.2.0.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.util.js
  • bindings

    タイプ:
    object
    デフォルト:
    {}

    データ バインド プロパティとキーを指定します。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    dataSource: northwindEmployees,
                    bindings: {
                        countKey: "count",
                        countXPath: "@count",
                        descriptionKey: "description",
                        descriptionXPath: "@description",
                        detailsTitleKey: "title",
                        detailsTitleXPath: "@title",
                        headerKey: "header",
                        headerXPath: "@header",
                        imageUrlKey: "imageurl",
                        imageUrlXPath: "@imageurl",
                        isDividerKey: "isdivider",
                        navigateUrlKey: "navigateurl",
                        navigateUrlXPath: "@navigateurl",
                        primaryKey: "ID",
                        textKey: "text",
                        textXPath: "@text",
                        customBindings: [
                            {
                                fieldName: "CategoryName",
                                dataType: "string"
                            }
                        ]
                    }
                });
                
                //Get
                var bindings = $(".selector").igListView("option", "bindings");
          
    • countKey

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

      その値がノードのカウントとして使用される、data source プロパティの名前を指定します。

    • countXPath

      タイプ:
      string
      デフォルト:
      "@Count"

      ノード カウントへの XPath を指定します。クライアントのみのXML への直接バインディングで使用されます。

    • customBindings

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      カスタム バインディングのオブジェクト リスト。これによって追加データが item または details テンプレートで使用されることになります。
      各項目は、"fieldName"、"dataType"、および "format" のキー/値のペアを含むオブジェクトになります。

    • descriptionKey

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

      その値がノードのカウントとして使用される、data source プロパティの名前を指定します。

    • descriptionXPath

      タイプ:
      string
      デフォルト:
      "@Description"

      クライアントのみの XML への直接バインディングで使用されるリスト項目記述への XPath を指定します。

    • detailsTitleKey

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

      その値がノードのサブ ページのタイトルになる、data source プロパティの名前を指定します。

    • detailsTitleXPath

      タイプ:
      string
      デフォルト:
      "@Title"

      タイトル属性/ノードへの XPath を指定します。クライアントのみのXML への直接バインディングで使用されます。

    • headerKey

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

      その値がノードのカウントとして使用される、data source プロパティの名前を指定します。

    • headerXPath

      タイプ:
      string
      デフォルト:
      "@Header"

      リスト項目ヘッダーへの XPath を指定します。クライアントのみのXML への直接バインディングで使用されます。

    • imageUrlKey

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

      データ ソース プロパティの名前を指定します。
      このプロパティの値が当該のノードの画像 URL として使用されることになります。

    • imageUrlXPath

      タイプ:
      string
      デフォルト:
      "@ImageUrl"

      画像 URL 属性/ノードへの XPath を指定します。クライアントのみのXML への直接バインディングで使用されます。

    • isDividerKey

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

      項目が読み取り専用のリスト ディバイダーを表すかどうかを決定するために使用される data source プロパティの名前を指定します。

    • navigateUrlKey

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

      データ ソース プロパティの名前を指定します。
      このプロパティの値がノード アンカーの href 属性として使用されることになります。

    • navigateUrlXPath

      タイプ:
      string
      デフォルト:
      "@NavigateUrl"

      ナビゲート URL 属性/ノードへの XPath を指定します。クライアントのみのXML への直接バインディングで使用されます。

    • primaryKey

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

      データ ソース プロパティの名前を指定します。
      このプロパティの値が当該のデータのプライマリ キー属性になります。このプロパティは、ロードオンデマンドが有効なときに使用されます。このプロパティを使用すると、ノード パスはインデックスではなく
      プライマリ キーに基づいて生成されることになります。

    • textKey

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

      その値がノード テキストになる、data source プロパティの名前を指定します。

    • textXPath

      タイプ:
      string
      デフォルト:
      "@Text"

      テキスト属性/ノードへの XPath を指定します。クライアントのみのXML への直接バインディングで使用されます。

  • countTheme

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

    カウント バブルに適用する見本 (ある場合) 。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    countTheme: "c"
                });
                
                //Get
                var countTheme = $(".selector").igListView("option", "countTheme");
          
  • createSubPagesOnInit

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

    このオプションを True に設定すると、ローカル データのサブ ページは、リスト ビューが最初にバインドされるときに作成されます。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    createSubPagesOnInit: true
                });
                
                //Get
                var toCreateSubPagesOnInit = $(".selector").igListView("option", "createSubPagesOnInit"); 
          
  • dataSource

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

    $.ig.DataSource が受け入れる有効なデータ ソースまたは $.ig.DataSource 自体のインスタンスが可能です。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    dataSource: northwindEmployees
                });
                
                //Get
                var dataSource = $(".selector").igListView("option", "dataSource");
          
  • dataSourceType

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

    データ ソースのタイプ ("json" など) を明示的に設定します。$.ig.DataSource とそのタイプ プロパティのドキュメントを参照してください。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    dataSourceType: "json"
                });
                
                //Get
                var dataSourceType = $(".selector").igListView("option", "dataSourceType");
          
  • dataSourceUrl

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

    リモート URL をデータ ソースとして指定します。そこから AJAX コール ($.ajax) を使用してデータが取得されます。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    dataSourceUrl: "/Products"
                });
                
                //Get
                var dataSourceUrl = $(".selector").igListView("option", "dataSourceUrl");
          
  • enableUtcDates

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

    UTC として日付の書式を有効にします。注: UTC としてエンコードし、日付がバックエンドから場合に望ましい場合があります。日付がクライアント ( ブラウザー) で作成される場合、enableUTCDates を false に設定することが望ましいです。

  • features

    タイプ:
    object
    デフォルト:
    []

    並べ替え、フィルタリングなどのリスト機能の定義のリスト。各機能はそれぞれ別のオプションを使用します。オプションについては機能ごとに文書化されています。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    features: [
                        {
                            name: "Sorting"
                        }
                    ]
                });
                
                //Get
                var features = $(".selector").igListView("option", "features");
          
  • imageMode

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

    画像、アイコンまたはサムネイルを表示するかどうか。

    メンバー

    • none
    • タイプ:string
    • icon
    • タイプ:string
    • thumbnail
    • タイプ:string

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    imageMode: "icon"
                });
                
                //Get
                var imageMode = $(".selector").igListView("option", "imageMode");
          
  • inset

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

    リスト表示がページにインセットで現れるかどうか。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    inset: true
                });
                
                //Get
                var inset = $(".selector").igListView("option", "inset");
          
  • itemDetailsTemplate

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

    サブ ページ内のリスト項目の詳細を描画するために使用される、IG templating スタイル テンプレート。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    itemDetailsTemplate: "<div><h2>${Title}</h2><p>${Description}</p></div>"
                });
                
                //Get
                var itemDetailsTemplate = $(".selector").igListView("option", "itemDetailsTemplate");
          
  • itemHeaderSize

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

    LI に見出しタグを表示するかどうか。値に基づいて H1 から H6 に設定できます。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    itemHeaderSize: "h3"
                });
                
                //Get
                var itemHeaderSize = $(".selector").igListView("option", "itemHeaderSize");
          
  • itemTemplate

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

    リスト項目を描画するために使用される、IG templating スタイル テンプレート。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    itemTemplate: "<div><h2>${Name}</h2><p>${Phone}</p></div>"
                });
                
                //Get
                var itemTemplate = $(".selector").igListView("option", "itemTemplate");
          
  • itemTheme

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

    リスト項目に適用される見本。null の場合、親から決定されるか、"c" はデフォルト値です。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    itemTheme: "c"
                });
                
                //Get
                var itemTheme = $(".selector").igListView("option", "itemTheme");
          
  • listDividerTheme

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

    リスト区分線に適用される見本。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    listDividerTheme: "b"
                });
                
                //Get
                var listDividerTheme = $(".selector").igListView("option", "listDividerTheme");
          
  • localSchemaTransform

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

    このオプションが False の場合、リストがバインドされるデータは、バインディングに基づく追加の変換なく「そのまま」で使用されます。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    localSchemaTransform: true
                });
                
                //Get
                var localSchemaTransform = $(".selector").igListView("option", "localSchemaTransform");
          
  • numberedList

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

    ol または ul がデータバインドされたリストの主要な要素として使用されるかどうかを示します。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    numberedList: false
                });
                
                //Get
                var numberedList = $(".selector").igListView("option", "numberedList");
          
  • responseDataKey

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

    $.ig.DataSource を参照してください。応答がラップされる場合、これは基本的に、データ レコードが保持される応答内のプロパティです。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    responseDataKey: "Products"
                });
                
                //Get
                var responseDataKey = $(".selector").igListView("option", "responseDataKey");
          
  • responseDataType

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

    応答のタイプ ("json" など) を明示的に設定します。$.ig.DataSource とそのタイプ プロパティのドキュメントを参照してください。

  • responseTotalRecCountKey

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

    $.ig.DataSource を参照してください。サーバー上のレコードの総数を指定する応答内のプロパティ。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    responseTotalRecCountKey: "totalCount"
                });
                
                //Get
                var responseTotalRecCountKey = $(".selector").igListView("option", "responseTotalRecCountKey");
          
  • searchFooterTheme

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

    検索 (フィルター/並べ替え) トレー フッターに適用する見本。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    searchFooterTheme: "d"
                });
                
                //Get
                var searchFooterTheme = $(".selector").igListView("option", "searchFooterTheme");
          
  • searchTheme

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

    検索 (フィルター/並べ替え) トレーに適用する見本。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    searchTheme: "c"
                });
                
                //Get
                var searchTheme = $(".selector").igListView("option", "searchTheme");
          
  • searchTrayExpandLabel

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

    縮小されてすべての状態がデフォルトの時に検索トレイのフッターに表示されるテキスト。
    null の場合、$.ig.mobileListView.locale.searchTrayExpandLabel を使用します。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    searchTrayExpandLabel: "Expand/Collapse"
                });
                
                //Get
                var searchTrayExpandLabel = $(".selector").igListView("option", "searchTrayExpandLabel");
          
  • showCount

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

    カウント バブルを表示するかどうか。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    showCount: true
                });
                
                //Get
                var showCount = $(".selector").igListView("option", "showCount");
          
  • subPageHeaderTheme

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

    サブ ページのヘッダーに適用される見本。

    コード サンプル

     
                //Initialize
                $(".selector").igListView({
                    subPageHeaderTheme: "b"
                });
                
                //Get
                var subPageHeaderTheme = $(".selector").igListView("option", "subPageHeaderTheme");
          

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

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

詳細の表示
  • dataBinding

    キャンセル可能:
    true

    データ バインドの実行前に発生するイベント。
    データ バインディングをキャンセルするには、false を返します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igList への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistdatabinding", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                });
    
                //Initialize
                $(".selector").igListView({
                    dataBinding : function (evt, ui) {...}
                });
          
  • dataBound

    キャンセル可能:
    false

    データ バインドが完了した後に発生するイベント。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igList への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistdatabound", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                });
    
                //Initialize
                $(".selector").igListView({
                    dataBound : function (evt, ui) {...}
                });
          
  • dataRendered

    キャンセル可能:
    false

    イベントは、リストが完全に描画される前に発生します。
    ui.owner を使用して、igList への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistdatarendered", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                });
    
                //Initialize
                $(".selector").igListView({
                    dataRendered : function (evt, ui) {...}
                });
          
  • dataRendering

    キャンセル可能:
    true

    イベントは、UL/OL をクリーンアップし、新しい項目をレンダリングする前に発生します。
    ui.owner を使用して、igList への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistdatarendering", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                });
    
                //Initialize
                $(".selector").igListView({
                    dataRendering : function (evt, ui) {...}
                });
          
  • footerRendered

    キャンセル可能:
    false

    イベントは、リスト表示フッターの描画後に発生します。
    ui.owner を使用して、igList への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistfooterrendered", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                });
    
                //Initialize
                $(".selector").igListView({
                    footerRendered : function (evt, ui) {...}
                });
          
  • footerRendering

    キャンセル可能:
    true

    イベントは、リストに対してフッターが描画される前に発生します。コンテンツをフッターに追加するために使用します。
    ui.owner を使用して、igList への参照を取得します。
    ui.footerContents を使用して footerContents (最初に空) への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistfooterrendering", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return reference to footer contents
                    ui.footerContents;
                });
    
                //Initialize
                $(".selector").igListView({
                    footerRendering : function (evt, ui) {...}
                });
          
  • itemRendered

    キャンセル可能:
    false

    リスト項目を表す html-string が生成された後に発生するイベント。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igList への参照を取得します。
    dataSource によって定義されるリスト項目への参照を取得するために ui.item を使用します。
    ui.item を使用して項目のインデックスを取得します。
    ui.bindings を使用して描画で使用されるバインディングへの参照を取得します。
    ui.html を使用してリスト項目の HTML を取得します。メンバーが変更され、元の HTML の代わりにカスタム値は使用されます。

  • itemRendering

    キャンセル可能:
    true

    新しいリスト項目を描画する前に発生されるイベント。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igList への参照を取得します。
    dataSource によって定義されるリスト項目への参照を取得するために ui.item を使用します。オブジェクトのメンバーが変更され、描画はカスタム値を使用します。
    ui.item を使用して項目のインデックスを取得します。
    ui.bindings を使用して描画で使用されるバインディングへの参照を取得します。

  • itemsRendered

    キャンセル可能:
    false

    イベントは、リスト項目が作成され、DOM に追加された後に発生します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igList への参照を取得します。
    ui.hasSubPages を使用して、リスト項目にサブ ページがあるかどうかを示すブール値を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistitemsrendered", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return boolean indicating if any list item has sub pages
                    ui.hasSubPages;
                });
    
                //Initialize
                $(".selector").igListView({
                    itemsRendered : function (evt, ui) {...}
                });
          
  • itemsRendering

    キャンセル可能:
    true

    イベントは、新しいリスト項目の描画前に発生します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igList への参照を取得します。
    ui.items を使用して、最後に描画される html を表す文字列への参照を取得します。
    ui.index を使用して、レンダリングを開始するデータ ビューのインデックスを取得または設定します。
    ui.dataView を使用して、レンダリングに使用されるデータ ビューへの参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistitemsrendering", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return reference to string representing html that will be rendered at end
                    ui.items;
                    //get or set the index in the data view where rendering should begin
                    ui.index;
                    //return reference to the data view that is being used for rendering
                    ui.dataView;
                });
    
                //Initialize
                $(".selector").igListView({
                    itemsRendering: function (evt, ui) {...}
                });
          
  • renderedTray

    キャンセル可能:
    false

    イベントは、リストに対して検索トレーが描画される後に発生します。
    ui.owner を使用して、igList への参照を取得します。
    ui.tray を使用して、実際のトレイへの参照を取得します。
    ui.needTray を使用して、トレイが必要かどうかを設定します。持続トレイは 1。フッターが展開/縮小するトレイは 2。
    ui.css を使用して、トレイが描画されると割り当てられる css クラスへの参照を取得または設定します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistrenderedtray", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return reference to the actual tray
                    ui.tray;
                    //set whether a tray is needed
                    // 1 for persistent tray
                    // 2 for tray with footer to collapse/expand
                    ui.needTray;
                    // get or set the reference to the css class that will be assigned to the tray once rendered
                    ui.css;
                });
    
                //Initialize
                $(".selector").igListView({
                    renderedTray: function (evt, ui) {...}
                });
          
  • renderedTrayFooterBar

    キャンセル可能:
    false

    イベントは、リストに対して検索トレーのフッター バーが描画された後に発生します。
    ui.owner を使用して、igList への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistrenderedtrayfooterbar", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                });
    
                //Initialize
                $(".selector").igListView({
                    renderedTrayFooterBar: function (evt, ui) {...}
                });
          
  • renderingTray

    キャンセル可能:
    true

    イベントは、リストに対して検索トレーが描画される前に発生します。
    ui.owner を使用して、igList への参照を取得します。
    ui.tray を使用して、実際のトレイへ (初期値は null で設定する必要があります) の参照を取得します。
    ui.needTray を使用して、トレイが必要かどうかを設定します。持続トレイは 1。フッターが展開/縮小するトレイは 2。
    ui.css を使用して、トレイが描画されると割り当てられる css クラスへの参照を取得または設定します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistrenderingtray", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return reference to the actual tray
                    ui.tray;
                    //set whether a tray is needed
                    // 1 for persistent tray
                    // 2 for tray with footer to collapse/expand
                    ui.needTray;
                    // get or set the reference to the css class that will be assigned to the tray once rendered
                    ui.css;
                });
    
                //Initialize
                $(".selector").igListView({
                    renderingTray: function (evt, ui) {...}
                });
          
  • renderingTrayFooterBar

    キャンセル可能:
    true

    イベントは、リストに対して検索トレーのフッター バーが描画される前に発生します。
    ui.owner を使用して、igList への参照を取得します。
    ui.trayFooter を使用してトレイ フッター バーになる div への参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistrenderingtrayfooterbar", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return reference to the div that will be the tray footer bar
                    ui.trayFooter;
                });
    
                //Initialize
                $(".selector").igListView({
                    renderingTrayFooterBar: function (evt, ui) {...}
                });
          
  • requestError

    キャンセル可能:
    false

    リストがリモート操作 (データのバインディング、ロードオンデマンド、並べ替えなど) をしている時に、
    リクエストにエラーがある場合に発生するイベント。
    ui.owner を使用して igList への参照を取得します。
    ui.message を使用して、サーバーからのエラー メッセージを取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistrequesterror", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return error message coming from the server
                    ui.message;
                });
    
                //Initialize
                $(".selector").igListView({
                    requestError: function (evt, ui) {...}
                });
          
  • schemaGenerated

    キャンセル可能:
    false

    修正する必要がある場合に、$.ig.DataSource スキーマが生成された後に発生するイベント。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、igList への参照を取得します。
    ui.schema を使用して、データ ソース スキーマへの参照を取得します。
    ui.dataSource を使用して、データ ソースへの参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistschemagenerated", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return reference to the data source schema
                    ui.schema;
                    //return reference to the data source
                    ui.dataSource;
                });
    
                //Initialize
                $(".selector").igListView({
                    schemaGenerated: function (evt, ui) {...}
                });
          
  • subPageCreated

    キャンセル可能:
    false

    イベントは、子リストおよび/または詳細が作成されるときにページの後で発生します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、サブ ページを作成した igList への参照を取得します。
    ui.subPage を使用して、ナビゲーションされる新しい Page オブジェクトへの参照を取得します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistsubpagecreated", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //return reference to the new 'Page' object that will be navigated to
                    ui.subPage;
                });
    
                //Initialize
                $(".selector").igListView({
                    subPageCreated: function (evt, ui) {...}
                });
          
  • subPageCreating

    キャンセル可能:
    true

    イベントは、子リストおよび/または詳細のページが作成される前に発生します。
    関数は引数 evt および ui を取得します。
    ui.owner を使用して、サブ ページを作成する igList への参照を取得します。
    サブ ページに表示されるタイトルを取得または設定するために ui.subPageTitle を使用します。
    詳細および子リストの後に表示する追加コンテンツを取得または設定するために ui.extraContents を使用します。

    コード サンプル

     
                //Delegate
                $(document).delegate(".selector", "iglistsubpagecreating", function (evt, ui) {
                    //return reference to igListView object
                    ui.owner;
                    //get or set the title that will be displayed in the sub page
                    ui.subPageTitle;
                    //get or set any extra contents that should be displayed after details and child list
                    ui.extraContents;
                });
    
                //Initialize
                $(".selector").igListView({
                    subPageCreating: function (evt, ui) {...}
                });
          
  • container

    .container( );
    返却型:
    domelement

    リスト ウィジェットの最上位のコンテナーである DIV を返します。

    コード サンプル

     
          var container = $(".selector").igListView("container");
          
  • dataBind

    .dataBind( );

    リストをデータ バインドします。

    コード サンプル

     $(".selector").igListView("dataBind"); 
  • destroy

    .destroy( );

    要素から属性および css クラスを削除し、機能を削除し、リスト要素を空になると、リストを破棄します。

    コード サンプル

     $(".selector").igListView("destroy"); 
  • toggleSearchArea

    .toggleSearchArea( );

    検索トレーがある場合、フッターにクリックをトリガーして検索トレーの表示状態を切り替えます。

    コード サンプル

     $(".selector").igListView("toggleSearchArea"); 
  • ui-listview ui-group-theme-{0}

    項目を含まれるリスト要素に割り当てられるクラス。
  • ui-li

    リスト項目の要素に割り当てられるクラス。
  • ui-li-count ui-btn-up-{0} ui-btn-corner-all ui-btn

    リスト項目にバブルをカウントするために割り当てられるクラス。
  • ui-iglist-details

    項目の詳細テンプレートのコンテナーに適用するクラス。
  • ig-listview

    igList であることを示すためにメイン要素に割り当てられるクラス。
  • ui-li-icon ui-li-thumb

    アイコンの場合、リスト項目の画像要素に割り当てられるクラス。
  • ui-li-thumb

    サムネイルの場合、リスト項目の画像要素に割り当てられるクラス。
  • ui-listview-inset ui-corner-all ui-shadow

    リストがインセットの場合、リスト要素に割り当てられるクラス。
  • ui-listview-filter-inset

    リストがインセットの場合、検索領域のフォーム要素に割り当てられるクラス。
  • ui-listview-filter-inset

    リストがインセットの場合、検索オプションを含む div に割り当てられるクラス。
  • ui-iglist-tray-footer-inset

    リストがインセットの場合、検索領域のフッターに割り当てられるクラス。
  • ui-li-last

    インセットされていないリストの最後の li に適用されるクラス。
  • ui-li-has-count

    カウント バブルがある場合、リスト項目要素に割り当てられるクラス。
  • ui-li-has-icon

    アイコン画像がある場合、リスト項目要素に割り当てられるクラス。
  • ui-li-has-thumb

    サムネイル画像がある場合、リスト項目要素に割り当てられるクラス。
  • ui-btn-icon-right ui-li-has-arrow ui-icon-carat-r

    右側 (子または URL) にアイコンがある場合、リスト項目要素に割り当てられるクラス。
  • ui-li ui-li-divider ui-bar-{0} ui-li-has-count

    区分線項目に適用されるクラス。{0} は listDividerTheme によって置き換えます。
  • ui-li ui-li-static ui-body-{0}

    読み取り専用の場合、リスト項目要素に割り当てられるクラス。
  • ui-listview-filter ui-bar-{0}

    検索領域を含まれるフォーム要素に割り当てられるクラス。{0} は searchTheme によって置き換えます。
  • ui-iglist-tray

    プリセットおよびキーワード検索の入力を含む検索領域の div に割り当てられるクラス。
  • ui-iglist-tray-collapse ui-bar-{0}

    検索トレーの縮小領域に割り当てられるクラス。縮小ボタンを含みます。
  • ui-iglist-tray-collapsed

    縮小された検索領域に割り当てられるクラス。
  • ui-icon ui-icon-arrow-u

    検索トレーを縮小するアイコンに割り当てられるクラス。
  • ui-iglist-tray-collapse-open

    トレーが開いたときに検索トレーの縮小領域に割り当てられるクラス。
  • ui-icon ui-icon-arrow-d ui-iglist-tray-footer-empty-icon

    検索トレーを展開するアイコンに割り当てられるクラス。
  • ui-iglist-tray-footer-empty

    適用されている並べ替え/フィルター条件がない場合に表示されるフッターのテキストを含む要素に割り当てられるクラス。
  • ui-iglist-tray-footer ui-bar-{0}

    検索トレーのフッター要素に割り当てられるクラス。検索条件を説明するテキストを表示します。
    {0} は searchFooterTheme によって置き換えます。
  • ui-iglist-tray-footer-collapsed

    トレーが縮小したときに検索トレーのフッター要素に割り当てられるクラス。

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