demos/tizen-gray/widgets/listviewcontrols.html

   1 <!DOCTYPE html>
   2   <div data-role="page" data-add-back-btn="true" id="listviewcontrols-demo" data-add-back-btn="true">
   3             <div data-role="header">
   4                 <h1>Listview controls</h1>
   5                 <fieldset data-role="controlgroup">
   6                 <div data-role="fieldcontain">
   7                     <label for="listviewcontrols-demo-toggler">listviewcontrols mode:</label>
   8                     <select id="listviewcontrols-demo-toggler" data-role="slider">
   9                         <option value="edit">edit</option>
  10                         <option value="view">view</option>
  11                     </select>
  12                  </div>
  13                  </fieldset>
  14             </div>
  15             <div class="content" data-role="content" data-scroll="y">
  16                 <form id="listviewcontrols-demo-control-panel"
  17                       style="padding-bottom: 14px;"
  18                       data-listviewcontrols-show-in="edit">
  19                     <p>These are the controls which can operate over all of
  20                     the items in the listview. Note that if you filter the
  21                     list, these controls will only affect the currently-visible
  22                     items. Also note that we're using autodividers here too :)</p>
  23
  24                     <fieldset data-role="controlgroup">
  25                         <input type="checkbox" id="listviewcontrols-demo-checkbox-uber" />
  26                         <label for="listviewcontrols-demo-checkbox-uber">Select all</label>
  27                     </fieldset>
  28                 </form>
  29
  30                   <ul data-role="listview"
  31                     data-listviewcontrols="#listviewcontrols-demo-control-panel"
  32                     data-listviewcontrols-options='{"mode":"edit"}'
  33                     id="listviewcontrols-demo-listview"
  34                     data-filter="true"
  35                     data-autodividers="alpha"
  36                     data-autodividers-selector="span">
  37                     <li>
  38                         <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
  39                             <input type="checkbox" id="listviewcontrols-demo-checkbox-1" />
  40                             <label for="listviewcontrols-demo-checkbox-1">Greg</label>
  41                         </fieldset>
  42                         <span data-listviewcontrols-show-in="view">Greg</span>
  43                     </li>
  44                     <li>
  45                         <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
  46                             <input type="checkbox" id="listviewcontrols-demo-checkbox-2" />
  47                             <label for="listviewcontrols-demo-checkbox-2">Greta</label>
  48                         </fieldset>
  49                         <span data-listviewcontrols-show-in="view">Greta</span>
  50                     </li>
  51                     <li>
  52                         <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
  53                             <input type="checkbox" id="listviewcontrols-demo-checkbox-3" />
  54                             <label for="listviewcontrols-demo-checkbox-3">Pete</label>
  55                         </fieldset>
  56                         <span data-listviewcontrols-show-in="view">Pete</span>
  57                     </li>
  58                     <li>
  59                         <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
  60                             <input type="checkbox" id="listviewcontrols-demo-checkbox-4" />
  61                             <label for="listviewcontrols-demo-checkbox-4">Phil</label>
  62                         </fieldset>
  63                         <span data-listviewcontrols-show-in="view">Phil</span>
  64                     </li>
  65                     <li>
  66                         <fieldset data-role="controlgroup" data-listviewcontrols-show-in="edit">
  67                             <input type="checkbox" id="listviewcontrols-demo-checkbox-5" />
  68                             <label for="listviewcontrols-demo-checkbox-5">Sue</label>
  69                         </fieldset>
  70                         <span data-listviewcontrols-show-in="view">Sue</span>
  71                     </li>
  72                 </ul>
  73             </div>
  74             <div data-role="footer">
  75                 <h4>Web UI Framework - Widgets gallery</h4>
  76             </div>
  77         </div>
  78 <!-- /page -->
  79