1 <div class="colorSelector"

     2 	 tal:attributes="id string:${view/id}_selector">

     3 	<input type="hidden"

     4 		   tal:attributes="id view/id;

     5 						   name view/name;

     6 						   lang view/lang;

     7 						   value view/value;" />

     8 	<div></div>

     9 	<script type="text/javascript" tal:content="string:

    10 		$$(document).ready(function() {

    11 			$$('DIV[id=${view/id}_selector] div').css('backgroundColor', '#${view/value}');

    12 			$$('DIV[id=${view/id}_selector]').ColorPicker({

    13 				color: '#${view/value}',

    14 				onShow: function (colpkr) {

    15 					$$(colpkr).fadeIn(500);

    16 					return false;

    17 				},

    18 				onHide: function (colpkr) {

    19 					$$(colpkr).fadeOut(500);

    20 					return false;

    21 				},

    22 				onChange: function (hsb, hex, rgb) {

    23 					$$('DIV[id=${view/id}_selector] div').css('backgroundColor', '#' + hex);

    24 					$$('INPUT[id=${view/id}]').val(hex);

    25 				},

    26 				onSubmit: function() {

    27 					$$('DIV[id=${view/id}_selector]').ColorPickerHide();

    28 				}

    29 			});

    30 		});

    31 	"></script>

    32 </div>