PHP Kendo\UI\ColorPicker示例

示例#1

文件： keyboard-navigation.php 项目： neevan1e/Done

      </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>

示例#2

文件： events.php 项目： neevan1e/Done

<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>

示例#3

文件： index.php 项目： neevan1e/Done

    <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>

示例#4

文件： api.php 项目： neevan1e/Done

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