PHP Kendo\UI\RangeSlider 예제들

예제 #1

파일: keyboard-navigation.php 프로젝트: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
$slider = new \Kendo\UI\Slider('slider');
$slider->attr('class', 'temperature')->min(0)->max(30)->smallStep(1)->largeStep(10)->value(18);
echo $slider->render();
?>
<br/><br/><br/>
<?php 
$rangeslider = new \Kendo\UI\RangeSlider('rangeslider');
$rangeslider->attr('class', 'humidity')->min(0)->max(10)->smallStep(1)->largeStep(2)->tickPlacement('both');
echo $rangeslider->render();
?>
<script>
$(document.body).keydown(function(e) {
    if (e.altKey && e.keyCode == 87) {
        $(".temperature .k-draghandle")[0].focus();
    } else if (e.altKey && e.keyCode == 81) {
        $(".humidity .k-draghandle").first()[0].focus();
    }
});
</script>

<ul class="keyboard-legend" style="padding-top: 25px">
    <li>
        <span class="button-preview">
            <span class="key-button leftAlign">Alt</span>
            +
            <span class="key-button">W</span>
        </span>

예제 #2

파일: right-to-left-support.php 프로젝트: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
$slider = new \Kendo\UI\Slider('slider');
$slider->min(0)->max(30)->smallStep(1)->largeStep(10)->value(18);
$rangeslider = new \Kendo\UI\RangeSlider('rangeslider');
$rangeslider->min(0)->max(10)->smallStep(1)->largeStep(2)->tickPlacement('both');
?>
<div class="k-rtl">
    <?php 
echo $slider->render();
?>
    <br/><br/><br/>
    <?php 
echo $rangeslider->render();
?>
</div>
<?php 
require_once '../include/footer.php';

예제 #3

파일: api.php 프로젝트: neevan1e/Done

<?php

require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div id="climateCtrl">
<?php 
$slider = new \Kendo\UI\Slider('slider');
$slider->attr('class', 'temperature');
echo $slider->render();
$rangeslider = new \Kendo\UI\RangeSlider('rangeslider');
$rangeslider->attr('class', 'humidity');
echo $rangeslider->render();
?>
</div>
<script>
    $(document).ready(function() {
        var slider = $("#slider").data("kendoSlider"),
            rangeSlider = $("#rangeslider").data("kendoRangeSlider"),
            setValue = function(e) {
                if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
                    var value = parseInt($("#newValue").val(), 10);

                    if (isNaN(value) || value < 0 || value > 10) {
                        alert("Value must be a number between 0 and 10");
                        return;
                    }

                    slider.value(value);
                }
            },