Kendoui switch

根本沒有那麼簡單

by wales

HTML

<script src="https://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/prettify.js"></script>
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.bootstrap.min.css">
<link rel="stylesheet" href="https://demos.telerik.com/kendo-ui/content/shared/styles/examples.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.mobile.min.css">
        <dl>
            <dt>Notifications</dt><dd><input type="checkbox" id="notifications-switch" checked="checked" /></dd>
            <dt>Send notifications via mail</dt><dd><input id="mail-switch" /></dd>
            <dt>Always visible to everyone</dt><dd><input id="visible-switch" /></dd>
            <dt>Display real name</dt><dd><input id="name-switch" /></dd>
        </dl>

JavaScript

$(function() {
        $("#notifications-switch").kendoMobileSwitch();
        $("#mail-switch").kendoMobileSwitch({
            onLabel: "YES",
            offLabel: "NO"
        });
        $("#visible-switch").kendoMobileSwitch({
            checked: true
        });
        $("#name-switch").kendoMobileSwitch();
    });