mobile.igListView
igListView は、モバイル環境でリスト機能を提供する jQuery コントロールです。このコントロールには、テンプレート化、フィルタリング、並べ替え、グループ化、ロード オン デマンド、および階層ナビゲーション機能があります。
igListView コントロールは igList コントロールを拡張し、階層機能を追加します。
igListView コントロールは、標準 jQuery 初期化とともにマークアップ ベース初期化と構成を使用する jQuery Mobile アプローチを順守します。igListView コントロールの HTML data-* 属性の詳細については、igListView データ属性リファレンスを参照してください。
以下のコードは、igListView コントロールの初期化方法を示します。
この API を使用した作業方法の詳細についてはここをクリックしてください。igListView コントロールに必要なスクリプトおよびテーマの参照方法については、 Ignite UI for jQuery での JavaScript リソースの使用および Ignite UI for jQuery のスタイルとテーマの設定を参照してください。コード サンプル
<!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" }); </script></head><body> <ul id="contactsListView" data-role="iglistview" data-icon-mode="thumbnail" data-data-source="northwindEmployees" data-bindings-header-key="Name" data-bindings-primary-key="ID" data-bindings-text-key="Phone" data-bindings-image-url-key="ImageUrl"> </ul></body></html> |
関連サンプル
関連トピック
依存関係
jquery-1.7.2.js
jquery.mobile-1.2.0.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.util.js