Exemplo n.º 1
0
    <div id="bike">
        <div id="bike-tail" class="inline-block"></div><div id="bike-head" class="inline-block"></div>
    </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 &amp; 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>
Exemplo n.º 2
0
?>
        </dd>

        <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);
    }