dav/colorpicker/demo.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4
   5 <head>
   6 <title>Really Simple Color Picker</title>
   7
   8 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   9 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  10 <script type="text/javascript" src="jquery.colorPicker.min.js"></script>
  11
  12 <script type="text/javascript">
  13   //Run the code when document ready
  14   $(function() {
  15    //use this method to add new colors to pallete
  16    //$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
  17
  18    $('#color1').colorPicker();
  19
  20    $('#color2').colorPicker();
  21
  22    $('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true});
  23
  24    //fires an event when the color is changed
  25    //$('#color1').change(function(){
  26     //alert("color changed");
  27    //});
  28
  29    $("#button1").click(function(){
  30     $("#color1").val("#ffffff");
  31     $("#color1").change();
  32    });
  33
  34    $("#button2").click(function(){
  35     $("#color2").val("#000000");
  36     $("#color2").change();
  37    });
  38
  39   });
  40 </script>
  41
  42 <style type="text/css">
  43 /* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
  44 /* General styles */
  45 body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
  46 h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
  47 p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
  48
  49 /* Form styles */
  50 div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
  51
  52 p.legend { margin-bottom: 1em; }
  53 p.legend em { color: #C00; font-style: normal; }
  54
  55 div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
  56
  57 div.form-container div.controlset label,
  58 div.form-container div.controlset input,
  59 div.form-container div.controlset div { display: inline; float: left; }
  60
  61 div.form-container div.controlset label { width: 100px;}
  62 </style>
  63 <link rel="stylesheet" href="colorPicker.css" type="text/css" />
  64 </head>
  65
  66 <body>
  67
  68 <div id="wrapper">
  69
  70         <h2>Really Simple Color Picker (jQuery)</h2>
  71
  72         <p>More information about this can be found in <a href="http://www.laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
  73         <div class="form-container">
  74         <form action="#" method="post">
  75                 <fieldset>
  76                         <div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
  77                         <div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
  78                         <div class="controlset"><label for="color3">Color 3 (customized with options)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
  79
  80                 </fieldset>
  81
  82     <div class="buttonrow">
  83       <div><button type="button" id="button1">Set Color 1 to #FFF</button></div>
  84       <div><button type="button" id="button2">Set Color 2 to #000</button></div>
  85     </div>
  86
  87         </form>
  88 </div>
  89
  90 </body>
  91
  92 </html>
  93