widgets/colorpicker.html

   1 <html>
   2         <head></head>
   3         <body>
   4                 <div data-role="page" id="colorwidgets-demo" data-add-back-btn="true">
   5                         <div data-role="header" data-position="fixed">
   6                                 <h1>Color widgets</h1>
   7                         </div>
   8                         <div data-role="content">
   9                                 <div style="padding-right: 20px;">
  10                                         <div>
  11                                                 <div>
  12                                                         Color title widget
  13                                                 </div>
  14                                                 <div data-role="colortitle" id="colortitle"></div>
  15                                         </div>
  16                                         <div>
  17                                                 <div>
  18                                                         Color palette widget
  19                                                 </div>
  20                                                 <div data-role="colorpalette" id="colorpalette" data-show-preview="true"></div>
  21                                         </div>
  22                                         <div>
  23                                                 <div>
  24                                                         Color picker button
  25                                                 </div>
  26                                                 <div data-role="colorpickerbutton" data-inline="true" id="colorpickerbutton-noform"></div>
  27                                         </div>
  28                                         <div>
  29                                                 <div>
  30                                                         Color picker button (form element)
  31                                                 </div>
  32                                                 <form action="#" method="get">
  33                                                         <div role="fieldcontain">
  34                                                                 <label for="colorpickerbutton" class="colorpickerbutton_label">Pick Colour:</label>
  35                                                                 <input type="color" data-inline="true" id="colorpickerbutton" value="#dfddc3" />
  36                                                         </div>
  37                                                 </form>
  38                                         </div>
  39                                         <div>
  40                                                 <form action="#" method="get">
  41                                                         <div role="fieldcontain">
  42                                                                 <input type="checkbox" id="checkHideInput" checked="" />
  43                                                                 <label for="checkHideInput">Hide Input</label>
  44                                                         </div>
  45                                                 </form>
  46                                         </div>
  47                                 </div>
  48                                 <div>
  49                                         <div data-role="label">
  50                                                 Hue-Saturation-Value picker widget
  51                                         </div>
  52                                         <div data-role="hsvpicker" id="hsvpicker"></div>
  53                                 </div>
  54                                 <div>
  55                                         <div data-role="label">
  56                                                 Hue-Saturation-Lightness picker widget
  57                                         </div>
  58                                         <div data-role="colorpicker" id="colorpicker"></div>
  59                                 </div>
  60                         </div>
  61                         <!-- /content -->
  62                         <div data-role="footer"></div>
  63                 </div>
  64                 <!-- /page -->
  65         </body>
  66 </html>