demos/tizen-winsets/tips/generate-elements-dynamically/generate-elements-dynamically.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5         <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
   6         <script src="../../configure.js"></script>
   7         <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8         <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                         data-framework-theme="tizen-white"
  10                         data-framework-viewport-width="device-width">
  11         </script>
  12         <script src="../../main.js"></script>
  13         <title>Tizen UI - Generate elements dynamically</title>
  14         <!-- for compatibility test -->
  15         <meta name="apple-mobile-web-app-capable" content="yes" />
  16         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  17         <link rel="apple-touch-icon" href="../../icon-tizen.png" />
  18 </head>
  19 <body>
  20 <div data-role="page" data-add-back-btn="true" id="dynamical-elements-demo">
  21         <div data-role="header" data-position="fixed">
  22                 <h1>Generate elements dynamically</h1>
  23         </div><!-- /header -->
  24
  25
  26         <div data-role="content">
  27                 <article>
  28                         <div>Example #1 Trigger Create</div>
  29                         <div>Trigger Create after append element on HTML.</div>
  30                         <div>
  31                                 <p style="padding:1em; background-color:whitesmoke; color:black;
  32                                                         border-width:3px; border-style:inset">
  33                                         $( "#checkboxItems" ).append( newhtml).trigger( "create" );<br>
  34                                 </p>
  35                         </div>
  36
  37                         <div id="checkboxItems" ></div>
  38
  39                         <fieldset class="ui-grid-b">
  40                                 <div data-role="controlgroup" data-type="horizontal">
  41                                         <a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
  42                                 </div>
  43                         </fieldset>
  44                 </article>
  45                 <article>
  46                         <div>Example #2 Call the widget Creator function.</div>
  47                         <div>
  48                                 Call the widget's creator function after append element on HTML.<br>
  49                                 Usually, creator function is same to widget name. But, "button" widget is a little bit different.
  50                                 Call buttonMarkup() or trigger "create" to the parent of button.
  51                         </div>
  52                         <div>
  53                                 <p style="padding:1em; background-color:whitesmoke; color:black;
  54                                                         border-width:3px; border-style:inset">
  55                                         /* Append new button */<br>
  56                                         var buttonTemplate = "&ltdiv data-role='button' data-inline='true' " + "data-icon='call' data-style='circle' " + "data-theme='s' class='newbutton'&gt&lt/div&gt"; <br>
  57                                         $( buttonTemplate ).buttonMarkup().appendTo( "#buttonItems" ); <br><br>
  58
  59                                         /* It's same to call ".buttonMarkup()". */<br>
  60                                         $( "#buttonItems" ).trigger( "create" );
  61                                 </p>
  62                         </div>
  63
  64                         <div id="buttonItems">
  65                         </div>
  66
  67                         <fieldset class="ui-grid-b">
  68                                 <div data-role="controlgroup" data-type="horizontal">
  69                                         <div id="ButtonAdd" data-role="button" data-icon="plus" >Add new Button item</div>
  70                                 </div>
  71                         </fieldset>
  72                 </article>
  73                 <article>
  74                         <div>Example #3 Append Listview on JQM.</div>
  75                         <div>
  76                                 To add new &ltLI&gt element on JQM listview, insert items and call "refresh" to the listview.<br>
  77                         </div>
  78                         <div>
  79                                 <p style="padding:1em; background-color:whitesmoke; color:black;
  80                                                         border-width:3px; border-style:inset">
  81                                         var listTemplate = "&ltli&gtAppended New Item&lt/li&gt";<br>
  82                                         $( "#listview" ).append( listTemplate ).listview( "refresh");<br>
  83                                 </p>
  84                         </div>
  85
  86                         <ul id="listview" data-role="listview">
  87                                 <li>Test</li>
  88                                 <li>Test</li>
  89                                 <li>Test</li>
  90                         </ul>
  91
  92                         <fieldset class="ui-grid-b">
  93                                 <div data-role="controlgroup" data-type="horizontal">
  94                                         <div id="ListAdd" data-role="button" data-icon="plus" >Add new item to Listview</div>
  95                                 </div>
  96                         </fieldset>
  97                 </article>
  98         </div>
  99         <div data-role="footer">
 100         </div>
 101         <script src="generate-elements-dynamically.js"></script>
 102 </div>
 103 </body>
 104 </html>