jube-fork/Jube.App/wwwroot/kendo/examples/ripplecontainer/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Basic Usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Information</h4>
            In order to preview the example, make sure that the "Sass Material" theme is selected from the "Change Theme" menu in the top-right corner of the demo page.
        </div>
    </div>
    <div class="demo-section k-content wide">
        <div class="itmes">
            <div class="row-box">
                <h4>Ripple on Buttons</h4>
                <button class="k-button">Default Button</button><br />
                <button class="k-button k-primary">Primary Button</button><br />
            </div>
            <div class="row-box">
                <h4>Ripple on Checkboxes</h4>
                <p style="line-height: 2.5em;">
                    <input type="checkbox" id="c1" class="k-checkbox" />
                    <label class="k-checkbox-label" for="c1">Checkbox 1</label><br />
                    <input type="checkbox" id="c2" class="k-checkbox" />
                    <label class="k-checkbox-label" for="c2">Checkbox 2</label><br />
                    <input type="checkbox" id="c3" class="k-checkbox" />
                    <label class="k-checkbox-label" for="c3">Checkbox 3</label>
                </p>
            </div>
            <div class="row-box">
                <h4>Ripple on Radio Buttons</h4>
                <p style="line-height: 2.5em;">
                    <input type="radio" id="r1" name="rg" class="k-radio" checked />
                    <label class="k-radio-label" for="r1">Radio 1</label><br />
                    <input type="radio" id="r2" name="rg" class="k-radio" />
                    <label class="k-radio-label" for="r2">Radio 2</label><br />
                    <input type="radio" id="r3" name="rg" class="k-radio" />
                    <label class="k-radio-label" for="r3">Radio 3</label>
                </p>
            </div>
        </div>
        <div class="itmes">
            <div>
                <h4>Ripple on List Items</h4>
                <select id="optional">
                    <option>Steven White</option>
                    <option>Nancy King</option>
                    <option>Nancy Davolio</option>
                    <option>Robert Davolio</option>
                    <option>Michael Leverling</option>
                    <option>Andrew Callahan</option>
                    <option>Michael Suyama</option>
                </select>
                <select id="selected"></select>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#optional").kendoListBox({
            connectWith: "selected",
            toolbar: {
                tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
            }
        });

        $("#selected").kendoListBox();
        // Initialize ripple container
        if (selectedTheme == "material-v2") {
            $(".itmes").kendoRippleContainer();
            $(".demo-section").show();
        } else {
            $(".demo-section").hide();
        }
    });
</script>

<style>
    .itmes {
        width: 100%;
        float: left;
        margin-bottom: 30px;
    }

    .itmes button,
    .itmes input {
        margin: 1em 0;
    }

    .itmes > .row-box {
        float: left;
        width: 30%;
    }

    .itmes .k-listbox {
        width: 236px;
        height: 310px;
    }

    .itmes .k-listbox:first-of-type {
        width: 270px;
        margin-right: 1px;
    }
</style>

    
</body>
</html>