demos/tizen-gray/widgets/day-selector.html

   1 <div data-role="page" id="day-selector-demo" data-add-back-btn="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Day selector</h1>
   4         </div>
   5
   6 <div data-role="content">
   7         <h2>With a legend (also API demo)</h2>
   8         <fieldset id="dayselector1" data-role="dayselector" data-type="horizontal">
   9                 <legend>Choose some days</legend>
  10         </fieldset>
  11
  12         <div><a id="day-selector-check-all" data-role="button" data-inline="true">Check all</a></div>
  13         <div><a id="day-selector-get-days" data-role="button" data-inline="true">Get Days</a></div>
  14         <p>The day(s) you selected are:
  15                 <span class="selectedDay">
  16                         <em>(select a day first)</em>
  17                 </span>
  18         </p>
  19         <hr/>
  20
  21         <h2>With a legend, with custom swatch</h2>
  22         <fieldset id="dayselector1" data-role="dayselector" data-theme="a">
  23                 <legend>Choose some days</legend>
  24         </fieldset>
  25         <hr/>
  26
  27         <h2>Without a legend</h2>
  28         <fieldset data-role="dayselector">
  29         </fieldset>
  30         <hr/>
  31
  32         <h2>Without a legend, vertical layout</h2>
  33
  34         <p>Note that the checkboxes are visible as icons
  35         (this is the default behaviour for vertical checkbox
  36         controlgroups in jQuery Mobile).</p>
  37
  38         <fieldset data-role="dayselector" data-type="vertical">
  39         </fieldset>
  40
  41         <hr/>
  42
  43         <h2>With a legend, vertical layout</h2>
  44
  45         <fieldset data-role="dayselector" data-type="vertical">
  46         <legend>Choose some days</legend>
  47         </fieldset>
  48
  49         </div>
  50 </div> <!-- /page -->
  51
  52
  53