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

   1 <div data-role="page" data-add-back-btn="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Generate elements dynamically</h1>
   4         </div><!-- /header -->
   5
   6
   7         <div data-role="content">
   8                 <article>
   9                         <div>Example #1 Trigger Create</div>
  10                         <div>Trigger Create after append element on HTML.</div>
  11                         <div>
  12                                 <p style="width:100%; padding:1em; background-color:whitesmoke; color:black;
  13                                                         border-width:3px; border-style:inset">
  14                                         $( "#checkboxItems" ).append( newhtml) ;<br>
  15                                         $( "#checkboxItems" ).trigger( "create" );<br>
  16                                 </p>
  17                         </div>
  18
  19                         <div id="checkboxItems" ></div>
  20
  21                         <fieldset class="ui-grid-b">
  22                                 <div data-role="controlgroup" data-type="horizontal">
  23                                         <a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
  24                                 </div>
  25                         </fieldset>
  26                 </article>
  27                 <article>
  28                         <div>Example #2 Call the widget Creator function.</div>
  29                         <div>
  30                                 Call the widget's creator function after append element on HTML.<br>
  31                                 Usually, creator function is same to widget name. But, "button" widget is a little bit different.
  32                                 Call buttonMarkup() or trigger "create" to the parent of button.
  33                         </div>
  34                         <div>
  35                                 <p style="width:100%; padding:1em; background-color:whitesmoke; color:black;
  36                                                         border-width:3px; border-style:inset">
  37                                         /* Append new button */<br>
  38                                         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>
  39                                         $( buttonTemplate ).buttonMarkup().appendTo( "#buttonItems" ); <br><br>
  40
  41                                         /* It's same to call ".buttonMarkup()". */<br>
  42                                         $( "#buttonItems" ).trigger( "create" );
  43                                 </p>
  44                         </div>
  45
  46                         <div id="buttonItems">
  47                         </div>
  48
  49                         <fieldset class="ui-grid-b">
  50                                 <div data-role="controlgroup" data-type="horizontal">
  51                                         <div id="ButtonAdd" href="#" data-role="button" data-icon="plus" >Add new Button item</div>
  52                                 </div>
  53                         </fieldset>
  54                 </article>
  55                 <article>
  56                         <div>Example #3 Append Listview on JQM.</div>
  57                         <div>
  58                                 To add new &ltLI&gt element on JQM listview, insert items and call "refresh" to the listview.<br>
  59                         </div>
  60                         <div>
  61                                 <p style="width:100%; padding:1em; background-color:whitesmoke; color:black;
  62                                                         border-width:3px; border-style:inset">
  63                                         var listTemplate = "&ltli&gtAppended New Item&lt/li&gt";<br>
  64                                         $( listTemplate ).appendTo( "#listview" );<br>
  65                                         $( "#listview" ).listview( "refresh");<br>
  66                                 </p>
  67                         </div>
  68
  69                         <ul id="listview" data-role="listview">
  70                                 <li>Test</li>
  71                                 <li>Test</li>
  72                                 <li>Test</li>
  73                         </ul>
  74
  75                         <fieldset class="ui-grid-b">
  76                                 <div data-role="controlgroup" data-type="horizontal">
  77                                         <div id="ListAdd" href="#" data-role="button" data-icon="plus" >Add new item to Listview</div>
  78                                 </div>
  79                         </fieldset>
  80                 </article>
  81         </div>
  82 </div>