<?php require_once '../lib/Kendo/Autoload.php'; ?> <div class="demo-section hidden-on-narrow k-content wide"> <div id="bike"> <div id="bike-tail"></div><div id="bike-head"></div> </div> <div class="picker-wrapper"> <h4>Tail color</h4> <?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"> <h4>Front & side color</h4> <?php $head = new \Kendo\UI\FlatColorPicker('head'); $head->attr('class', 'picker') ->preview(false) ->value('#e15613') ->change('select'); echo $head->render(); ?> </div> </div> <div class="responsive-message"></div> <script> function select(e) { $("#bike-" + this.element.attr("id")).css("background-color", e.value); } </script> <style> .demo-section { text-align: center; padding: 0 0 16px; } #bike { margin: 0 0 10px; background: url(../content/web/colorpicker/background.png); } #bike-head, #bike-tail { background: url(../content/web/colorpicker/motor.png); display: inline-block; height: 299px; width: 241px; } #bike-tail { background-color: #000; } #bike-head { background-color: #e15613; background-position: -241px 0; } .picker-wrapper { display: inline-block; text-align: left; width: 252px; margin: 0 18px; } .picker-wrapper .k-hsv-gradient { height: 140px; } .picker-wrapper h3 { padding: 13px 0 5px; text-align: left; } </style>