demos/tizen-gray/widgets/colorpicker.html

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