demos/tizen-winsets/widgets/grid/virtualgrid-x.html

   1 <div id="virtualgrid_x_page" data-role="page" class="virtualgrid_x_demo_page" data-add-back-btn="true">
   2         <div id="normal" data-role="header" data-position="fixed">
   3                 <h1>Virtual Grid - X</h1>
   4         </div>
   5         <div data-role="content" data-scroll="none">
   6                 <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
   7                         <div class="ui-demo-rotation-x-namecard">
   8                                 <div class="ui-demo-namecard-pic">
   9                                         <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}"  />
  10                                 </div>
  11                                 <div class="ui-demo-namecard-contents-x">
  12                                         <span class="name ui-li-text-main ui-demo-namecard-span-x">${NAME}</span>
  13                                 </div>
  14                         </div>
  15                 </script>
  16                 <div id="virtualgrid-demo" data-direction="x" data-role="virtualgrid" data-template="tizen-demo-namecard">
  17                 </div>
  18         </div>
  19         <div data-role="footer">
  20         </div>
  21         <script>
  22                 $("#virtualgrid-demo").bind("select", function(event, data){
  23                         //alert("item :: " + $(data).find(".ui-demo-namecard-contents").text());
  24                 });
  25         </script>
  26         <script>
  27                 $( ".virtualgrid_x_demo_page" ).one( "pagecreate", function() {
  28                         $.getScript( "./js/virtualgrid-db-demo.js", function( data, textStatus ) {
  29                                 $( ".virtualgrid_demo_page" ).die();
  30                                 $( ":jqmData(role='virtualgrid')" ).virtualgrid( "create", {
  31                                         itemData: function ( idx ) {
  32                                                 return JSON_DATA[ idx ];
  33                                         },
  34                                         numItemData: JSON_DATA.length,
  35                                         cacheItemData: function ( minIdx, maxIdx ) {
  36                                         }
  37                                 });
  38                                 $( ".virtualgrid_x_demo_page" ).unbind("pagecreate");
  39                         });
  40                 });
  41         </script>
  42 </div>