jube-fork/Jube.App/wwwroot/kendo/examples/floatingactionbutton/alignment.html

<!DOCTYPE html>
<html>
<head>
    <title>Alignment</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 class="configurator">
    <div class="header">Configurator</div>
    <div class="box-col">
        <h4>Alignment Settings relative to the container</h4>
        <input id="alignment" name="layout" style="width:300px;" />
    </div>
    <div class="box-col">
        <h4>Position Settings</h4>
        <input id="position" name="layout" />
    </div>
    <div class="box-col">
        <h4>Alignment Offset Settings</h4>
        <ul class="options">
            <li>
                <label for="offsetX">Offset X</label>
                <input id="offsetX" type="number" title="numeric" value="50" max="100" step="10" />
            </li>

            <li>
                <label for="offsetY">Offset Y</label>
                <input id="offsetY" type="number" title="numeric" value="50" max="100" step="10" />
            </li>
        </ul>
    </div>
</div>
<div class="demo-section k-content wide" style="height:300px; position:relative;">
    <button id="fab"></button>
</div>

<script>
    $(document).ready(function () {        
        // Configurator
        $("#offsetX").kendoNumericTextBox({
            change: onChange
        });
        $("#offsetY").kendoNumericTextBox({
            change: onChange
        });
        $("#alignment").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            autoWidth: true,
            dataSource: [
                { value: "top start", text: "top left" },
                { value: "top center", text: "top center" },
                { value: "top end", text: "top right" },
                { value: "middle start", text: "middle left" },
                { value: "middle end", text: "middle right" },
                { value: "bottom start", text: "bottom left" },
                { value: "bottom center", text: "bottom center" },
                { value: "bottom end", text: "bottom right" }
            ],
            change: onChange
        });

        $("#position").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            autoWidth: true,
            dataSource: [
                { value: "absolute", text: "absolute" },
                { value: "fixed", text: "fixed" }
            ],
            change: onChange
        });        

        function getConfiguratorOptions() {
            var alignment = $("#alignment").data("kendoDropDownList").dataItem(),
                position = $("#position").data("kendoDropDownList").dataItem(),
                offsetX = $("#offsetX").data("kendoNumericTextBox").value(),
                offsetY = $("#offsetY").data("kendoNumericTextBox").value();

            return {
                positionMode: position.value,
                alignment: alignment.value,
                alignOffsetX: offsetX,
                alignOffsetY: offsetY
            }
        }

        function onChange(ev) {
            var fab = $("#fab").getKendoFloatingActionButton(),
                options = getConfiguratorOptions();

            ev.preventDefault();

            fab.setOptions({
                positionMode: options.positionMode,
                align: options.alignment,
                alignOffset: {
                    x: options.alignOffsetX,
                    y: options.alignOffsetY
                },
            });
        };

        // FAB
        var initFloatingActionButton = function () {
            var options = getConfiguratorOptions();

            $("#fab").kendoFloatingActionButton({
                icon: "share",
                positionMode: options.positionMode,
                align: options.alignment,
                alignOffset: {
                    x: options.alignOffsetX,
                    y: options.alignOffsetY
                },
                themeColor: "primary",
                size: "medium",
                items: [{
                    label: "Download",
                    icon: "download",
                    click: function () {
                        kendo.alert("download action");
                    }
                }, {
                    label: "Print",
                    icon: "print",
                    click: function () {
                        kendo.alert("print action");
                    },
                }, {
                    label: "Email",
                    icon: "email",
                    click: function () {
                        kendo.alert("email action");
                    }
                }]
            });
        };

        initFloatingActionButton();
    });
</script>

<style>
    .k-fab.k-pos-fixed {
        z-index: 999999;
    }
</style>


    
</body>
</html>