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

<!DOCTYPE html>
<html>
<head>
    <title>API</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>API Functions</h4>
        <ul class="options">
            <li>
                <button id="enable">Enable</button> <button id="disable">Disable</button>
            </li>
            <li>
                <button id="show">Show</button> <button id="hide">Hide</button>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Appearance</h4>
        <ul class="options">
            <li>
                <button id="getIcon">Get Icon</button> <button id="setIcon">Set Icon</button><input id="icon" value="gear" />
            </li>
            <li>
                <button id="getText">Get Text</button> <button id="setText">Set Text</button><input id="text" value="Settings" />
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Theme Color</h4>
        <ul class="options">
            <li>
                <input id="themeColor" name="themeColor" />
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Shape</h4>
        <ul class="options">
            <li>
                <input id="shapes" name="shapes" />
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Size</h4>
        <ul class="options">
            <li>
                <input id="size" name="size" />
            </li>
        </ul>
    </div>
</div>

<div class="demo-section k-content wide" style="height:300px">
    <button id="fab"></button>
</div>

<script>
    $(document).ready(function () {
        // Configurator
        $("#shapes").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Pill", value: "pill" },
                { text: "Rectangle", value: "rectangle" },
                { text: "Rounded", value: "rounded" }
            ],
            change: onShapeSelectionChange
        });

        $("#size").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Small", value: "small" },
                { text: "Medium", value: "medium" },
                { text: "Large", value: "large" }
            ],
            index:2,
            change: onSizeSelectionChange
        });

        $("#themeColor").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text:"Default"  , value: "default"  },
                { text:"Primary"  , value: "primary"  },
                { text:"Secondary", value: "secondary"},
                { text:"Tertiary" , value: "tertiary" },
                { text:"Info"     , value: "info"     },
                { text:"Success"  , value: "success"  },
                { text:"Warning"  , value: "warning"  },
                { text:"Error"    , value: "error"    },
                { text:"Dark"     , value: "dark"     },
                { text:"Light", value: "light" },
            ],
            change:onThemeColorSelectionChange
        })

        // FAB
        var fab = $("#fab").kendoFloatingActionButton({
            icon: "home",
            text: "Home",
            positionMode: "absolute",            
            align: "bottom center",
            alignOffset: {
                x: 0,
                y: 100
            },
            themeColor: "primary",            
            size: "large",
            
        }).data("kendoFloatingActionButton");

        $("#enable").click(function () {
            fab.enable(true);
        });
        $("#disable").click(function () {
            fab.enable(false);
        });
        $("#show").click(function () {
            fab.show();
        });
        $("#hide").click(function () {
            fab.hide();
        });
        $("#getIcon").click(function () {
            kendo.alert(fab.icon());
        });
        $("#setIcon").click(function () {
            fab.icon($("#icon").val());
        });
        $("#getText").click(function () {
            kendo.alert(fab.text());
        });
        $("#setText").click(function () {
            fab.text($("#text").val());
        });
        $("#getThemeColor").click(function () {
            kendo.alert(fab.themeColor());
        });
        $("#setThemeColor").click(function () {
            fab.themeColor($("#themeColor").val());
        });
        $("#getShape").click(function () {
            kendo.alert(fab.shape());
        });
    });

    function onShapeSelectionChange(e){
        var fab = $("#fab").getKendoFloatingActionButton();

        fab.shape(e.sender.value());
    };
    function onThemeColorSelectionChange(e){
        var fab = $("#fab").getKendoFloatingActionButton();

        fab.themeColor(e.sender.value());
    };
    function onSizeSelectionChange(e) {
        var fab = $("#fab").getKendoFloatingActionButton();
       
        fab.setOptions({ size: e.sender.value() });
    };
</script>



    
</body>
</html>