</span> <span class="button-descr">select current color</span> </li> <li> <span class="button-preview"> <span class="key-button leftAlign wider">escape</span> </span> <span class="button-descr">cancel the selection</span> </li> </ul> <div class="demo-section"> <label for="hsv">HSV picker:</label> <?php $hsv = new \Kendo\UI\ColorPicker('hsv'); $hsv->value('#00ccff')->opacity(true)->attr('accesskey', 'h'); echo $hsv->render(); ?> </div> <ul class="keyboard-legend"> <li> <span class="button-preview"> <span class="key-button leftAlign wider"><a target="_blank" href="http://en.wikipedia.org/wiki/Access_key">Access key</a></span> + <span class="key-button">h</span> </span> <span class="button-descr">Focuses the HSV selector</span>
<div class="demo-section"> <dl> <dt><label for="palette-picker">ColorPicker (palette):</label></dt> <dd> <?php $palettePicker = new \Kendo\UI\ColorPicker('palette-picker'); $palettePicker->value('#cc2222')->palette('basic')->select('pickerSelect')->change('pickerChange')->open('pickerOpen')->close('pickerClose'); echo $palettePicker->render(); ?> </dd> <dt><label for="hsv-picker">ColorPicker (HSV):</label></dt> <dd> <?php $hsvPicker = new \Kendo\UI\ColorPicker('hsv-picker'); $hsvPicker->value('#22cc22')->select('pickerSelect')->change('pickerChange')->open('pickerOpen')->close('pickerClose'); echo $hsvPicker->render(); ?> </dd> <dt>ColorPalette:</dt> <dd> <?php $palette = new \Kendo\UI\ColorPalette('palette'); $palette->change('paletteChange'); echo $palette->render(); ?> </dd> <dt>FlatColorPicker:</dt>
<div id="background"> <div class="column"> <h3 class="title">Select Wall Paint</h3> <?php $palette = new \Kendo\UI\ColorPalette('palette'); $tileSize = new \Kendo\UI\ColorPickerTileSize(); $tileSize->width(34)->height(19); $palette->columns(4)->tileSize($tileSize)->change('preview')->palette(array('#f0d0c9', '#e2a293', '#d4735e', '#65281a', '#eddfda', '#dcc0b6', '#cba092', '#7b4b3a', '#fcecd5', '#f9d9ab', '#f6c781', '#c87d0e', '#e1dca5', '#d0c974', '#a29a36', '#514d1b', '#c6d9f0', '#8db3e2', '#548dd4', '#17365d')); echo $palette->render(); ?> </div> <div class="column"> <h3 class="title">Choose Custom Color</h3> <?php $picker = new \Kendo\UI\ColorPicker('picker'); $picker->value('#ffffff')->buttons(false)->select('preview'); echo $picker->render(); ?> </div> </div> </div> <script> function preview(e) { $("#background").css("background-color", e.value); } </script> <style scoped>
</div> <div class="config-section"> <span class="configHead">Open/Close</span> <ul class="options"> <li> <button id="open" class="k-button">Open</button> <button id="close" class="k-button">Close</button> </li> </ul> </div> </div> <div class="demo-section"> <label for="colorpicker">ColorPicker:</label> <?php $colorPicker = new \Kendo\UI\ColorPicker('colorpicker'); $colorPicker->value('#00f')->toolIcon('k-foreColor'); echo $colorPicker->render(); ?> </div> <script> $(document).ready(function() { var colorpicker = $("#colorpicker").data("kendoColorPicker"); $("#enable").click(function(){ colorpicker.enable(); }); $("#disable").click(function(){ colorpicker.enable(false);