widgets/day-selector.html

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