PHP Kendo\UI\ColorPalette Examples

Example #1

File: palette.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<div class="demo-section">
    <div class="product-display">
        <img class="product-image" src="../content/web/colorpicker/sofa-ffcc33.jpg" alt="" width="285" height="149">

<?php 
$colorChooser = new \Kendo\UI\ColorPalette('color-chooser');
$colorChooser->tileSize(30)->change('preview')->value('#ffcc33')->palette(array('#ddd1c3', '#d2d2d2', '#746153', '#3a4c8b', '#ffcc33', '#fb455f', '#ac120f'))->change('onChange');
echo $colorChooser->render();
?>
<script>
    function onChange() {
        var colorId = this.value().substring(1);
        $(".product-image").attr("src", "../content/web/colorpicker/sofa-" + colorId + ".jpg");
    }
</script>
    </div>

    <div class="product-info">
        <h3>Natural Linen Loveseat</h3>
        <p>Add comfortable seating to your living room or den. The soft foam in the cushions make this loveseat a great place to relax.</p>
        <dl>
            <dt>Dimensions</dt>
            <dd>34" D x 52" W x 31" H</dd>

            <dt>Materials</dt>

Example #2

File: palette-presets.php Project: neevan1e/Done

    </div>


    <div class="palette-wrapper">
        <h3>Trek</h3>
<?php 
$trek = new \Kendo\UI\ColorPalette('trek');
$trek->palette(array('#ffffff', '#000000', '#fbeec9', '#4e3b30', '#f0a22e', '#a5644e', '#b58b80', '#c3986d', '#a19574', '#c17529', '#f2f2f2', '#7f7f7f', '#f7e09e', '#e1d6cf', '#fcecd5', '#eddfda', '#f0e7e5', '#f3eae1', '#ece9e3', '#f5e3d1', '#d8d8d8', '#595959', '#f3cc5f', '#c4ad9f', '#f9d9ab', '#dcc0b6', '#e1d0cc', '#e7d5c4', '#d9d4c7', '#ebc7a3', '#bfbfbf', '#3f3f3f', '#d29f0f', '#a78470', '#f6c781', '#cba092', '#d2b9b2', '#dbc1a7', '#c6bfab', '#e1ac76', '#a5a5a5', '#262626', '#694f07', '#3a2c24', '#c87d0e', '#7b4b3a', '#926255', '#a17242', '#7b7153', '#90571e', '#7f7f7f', '#0c0c0c', '#2a1f03', '#271d18', '#855309', '#523226', '#614138', '#6b4c2c', '#524b37', '#603a14'));
echo $trek->render();
?>
    </div>

    <div class="palette-wrapper">
        <h3>Verve</h3>
<?php 
$verve = new \Kendo\UI\ColorPalette('verve');
$verve->palette(array('#ffffff', '#000000', '#d2d2d2', '#666666', '#ff388c', '#e40059', '#9c007f', '#68007f', '#005bd3', '#00349e', '#f2f2f2', '#7f7f7f', '#bdbdbd', '#e0e0e0', '#ffd7e8', '#ffc6dc', '#ffb8f1', '#f1b2ff', '#c3dcff', '#b8cfff', '#d8d8d8', '#595959', '#9d9d9d', '#c1c1c1', '#ffafd1', '#ff8eba', '#ff71e4', '#e365ff', '#87baff', '#72a0ff', '#bfbfbf', '#3f3f3f', '#696969', '#a3a3a3', '#ff87ba', '#ff5597', '#ff2ad7', '#d519ff', '#4b98ff', '#2b71ff', '#a5a5a5', '#262626', '#343434', '#4c4c4c', '#e90062', '#ab0042', '#75005f', '#4e005f', '#00449e', '#002676', '#7f7f7f', '#0c0c0c', '#151515', '#333333', '#9b0041', '#72002c', '#4e003f', '#34003f', '#002d69', '#00194f'));
echo $verve->render();
?>
    </div>
</div>

<style scoped>
    .demo-section {
        overflow: hidden;
        padding: 40px 50px 15px;
    }

    .column {
        display: inline-block;
        vertical-align: top;

Example #3

File: index.php Project: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>

<div class="demo-section">
    <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>

Example #4

File: events.php Project: neevan1e/Done

?>
        </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>
        <dd>
<?php 
$flatcolorpicker = new \Kendo\UI\FlatColorPicker('flatcolorpicker');
$flatcolorpicker->change('flatcolorpickerChange');
echo $flatcolorpicker->render();
?>
        </dd>
    </dl>
</div>