jPicker examples

HTML

<script src="http://jpicker.googlecode.com/svn/trunk/jpicker-1.1.3.js"></script>
<input id="Binded" type="text" value="e2ddcf" />

CSS

@media all 
{
    #LeftTop a { font-size: 15px; font-weight: bold; }
#LeftMiddle div.SVG { background: #fff; border: 1px solid #000; font-size: 11px; height: 360px; margin: 0px 10px; padding: 5px; text-align: left; width: 130px; }
#LeftBottom { display: none; }
#jPicker { margin: 0px 8px; text-align: left; }
#jPicker ul { font-size: 13px; margin: 0px 0px 0px 15px; padding: 0px; }
#jPicker p { font-size: 13px; padding: 0px 10px; }
#jPicker hr { clear: both; }
#jPicker h2 { font-size: 16px; }
#jPicker code { color: #468; font-size: 14px; font-weight: bold; }
#jPicker pre { background: #eee; border: 1px solid #000; display: block; font-size: 11px; margin: 10px 5px; padding: 5px; }
#jPicker span { font-size: 13px; text-align: center; }
}
.jPicker .Icon {
    display: inline-block;
    height: 24px; /* change this value if using a different sized color picker icon */
    position: relative; /* make this element an absolute positioning container */
    text-align: left; /* make the zero width children position to the left of container */
    width: 25px; /* change this value if using a different sized color picker icon */
}
.jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
    background-position: 2px 2px;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}
.jPicker .Icon span.Image {
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}
.jPicker.Container {
    display: none;
    z-index: 10; /* make sure container draws above color picker icon in Firefox/Safari/Chrome/Opera/etc. -
    IE calculates z-index so this won't work - we will hide all color picker icons placed after the selected one in code when shown in IE */
}
table.jPicker {
    background-color: #efefef;
    border: 1px outset #666;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px !important;
    margin: 0px;
   ...

JavaScript

$(document).ready(
    function()
    {
      $('#Binded').jPicker();
    });