jube-fork/Jube.App/wwwroot/kendo/examples/floatingactionbutton/basic-usage.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 class="k-d-flex k-justify-content-around">
    <div class="k-card k-card-vertical">
        <img src="https://demos.telerik.com/kendo-ui/content/shared/images/photos/4.jpg" class="k-card-media" />
        <div class="k-card-body">
            <button id="fab-text"></button>
            <h2 class="k-card-title">Summer Mix 2020</h2>
            <p class="k-card-subtitle">DJ Peril</p>
        </div>
    </div>

    <div class="notes-wrap">
        <h2>Notes: </h2>
        <textarea id="notes" style="width: 100%;"></textarea>
        <div id="notes-overlay" class="k-overlay"></div>
        <button id="fab-speed-dial"></button>        
    </div>
</div>

<script>
    $(document).ready(function () {
        $("#fab-text").kendoFloatingActionButton({                
            text: "Add to Queue",
            positionMode: "absolute",
            align: "top end",
            alignOffset: {                
                y: 237
            },                
            click: function (ev) {
                kendo.alert("Added to Queue");
            }
        });

        $("#fab-speed-dial").kendoFloatingActionButton({
            icon: "cog",
            positionMode: "absolute",                
            items: [{
                label: "Save",
                icon: "save",
                click: function (ev) {
                    kendo.alert("Save clicked");
                }
            }, {
                label: "Share",
                icon: "share",
                click: function (ev) {
                    kendo.alert("Share clicked");
                }
            }],
            expand: function (ev) {
                toggleNotesOverlay(true);
                ev.sender.icon("close");
            },
            collapse: function (ev) {
                toggleNotesOverlay(false);
                ev.sender.icon("share");
            }
        });

        $("#notes").kendoTextArea({
            rows: 6,
            value: "DevReach 2019 Day 2 Morning Keynote: 'Technical Leadership: Lessons Learned at NASA'"
        });
    });

    function toggleNotesOverlay(visible) {
        var overlay = $("#notes-overlay");

        overlay.toggle(visible);
    }
</script>

<style>
    .k-fab {
        z-index: 10002;
    }
    
    .k-card {
        width: 350px;
        height: auto;
        position: relative;
    }

    .k-card-image, .k-card-media {
        flex-shrink: 0;
    }

    #notes-overlay {
        display: none;
        position: absolute;
    }

    .notes-wrap {
        width: 350px;
        padding: 50px 20px 50px 20px;
        border: 1px solid #dedede;
        position: relative;
    }

    .notes-wrap > h2 {
        font-size: 18px;
        color: #656565;
    }
</style>


    
</body>
</html>