</div> <div class="picker-wrapper inline-block"> <h3 class="title">Tail color</h3> <?php $tail = new \Kendo\UI\FlatColorPicker('tail'); $tail->attr('class', 'picker')->preview(false)->value('#000')->change('select'); echo $tail->render(); ?> </div> <div class="picker-wrapper inline-block"> <h3 class="title">Front & side color</h3> <?php $head = new \Kendo\UI\FlatColorPicker('head'); $head->attr('class', 'picker')->preview(false)->value('#e15613')->change('select'); echo $head->render(); ?> </div> </div> <script> function select(e) { $("#bike-" + this.element.attr("id")).css("background-color", e.value); } </script> <style scoped> .demo-section { text-align: center;
<dt>ColorPalette:</dt> <dd> <?php $palette = new \Kendo\UI\ColorPalette('palette'); $palette->change('paletteChange'); echo $palette->render(); ?> </dd> <dt>FlatColorPicker:</dt> <dd> <?php $flatcolorpicker = new \Kendo\UI\FlatColorPicker('flatcolorpicker'); $flatcolorpicker->change('flatcolorpickerChange'); echo $flatcolorpicker->render(); ?> </dd> </dl> </div> <script> function pickerSelect(e) { kendoConsole.log("Select in picker #" + this.element.attr("id") + " :: " + e.value); } function pickerChange(e) { kendoConsole.log("Change in picker #" + this.element.attr("id") + " :: " + e.value); } function pickerOpen() {