public/javascripts/jqplot/examples/colorpicker/index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html>
   3     <head>
   4         <title>jqcp</title>
   5                 <!-- jQuery/jQueryUI (hosted) -->
   6                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
   7                 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   8                 <script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
   9                 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
  10                 <!--link href="aristo/Aristo.css" rel="stylesheet" type="text/css"/-->
  11         <style>
  12                         body {
  13                                 font-family:    'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
  14                                 font-size:              62.5%;
  15                         }
  16
  17                         #switcher {
  18                                 float:                  right;
  19                                 display:                inline-block;
  20                         }
  21         </style>
  22                 <script src="jquery.colorpicker.js"></script>
  23                 <link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
  24         <script>
  25                 $( function() {
  26                                 $('#switcher').themeswitcher();
  27
  28                 $('#cp1').colorpicker({
  29                                         onClose: function(hex, rgba, inst) {
  30
  31                                                         },
  32                                         onSelect: function(hex, rgba, inst) {
  33                                                                 //console.log(hex);
  34                                                                 //console.log(rgba);
  35                                                                 //console.log(inst);
  36                                                         },
  37                                         showOn: 'both',
  38                                         showHeader: true,
  39                                         showSwatches: true,
  40                                         buttonColorize: true,
  41                                         altField: '.cp1-alt',
  42                                         altProperties: 'background-color,color'
  43                                 });
  44
  45                 $('#cp2').colorpicker({
  46                                         alpha: true,
  47                                         showButtonPanel: true
  48                                 });
  49
  50                 var cpb = $('#cp-buttons').colorpicker({
  51                                         showOn: '',
  52                                         parts: ['bar', 'map']
  53                                 });
  54                                 $('#cp-button-open').click( function() {
  55                                         cpb.colorpicker('open');
  56                                 });
  57                                 $('#cp-button-close').click( function() {
  58                                         cpb.colorpicker('close');
  59                                 });
  60                                 $('#cp-button-disable').click( function() {
  61                                         cpb.colorpicker('disable');
  62                                 });
  63             });
  64         </script>
  65     </head>
  66     <body>
  67         <div id="switcher"></div>
  68
  69         Color: <input type="color" id="cp1" value="ff9900"/>
  70                 <div class="cp1-alt" style="border: 1px inset; width: 180px; height: 60px;">
  71                         <div style=" background-color: white; border: 1px solid black; margin: 5px; padding: 5px; font-size: 20px; font-weight: bold;">Text</div>
  72                 </div>
  73
  74                 <hr/>
  75
  76                 Inline:<div id="cp2"></div>
  77
  78                 <hr/>
  79
  80                 Activated by buttons: <input type="color" id="cp-buttons" value="927abc"/>
  81                 <br/><button id="cp-button-open">Open</button>
  82                 <br/><button id="cp-button-close">Close</button>
  83                 <br/><button id="cp-button-disable">Disable</button>
  84     </body>
  85 </html>