jube-fork/Jube.App/wwwroot/kendo/examples/tabstrip/ajax.html

<!DOCTYPE html>
<html>
<head>
    <title>Loading content with AJAX</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="wrapper">
        <div id="tabstrip">
            <ul>
                <li class="k-state-active">Dimensions &amp; Weights</li>
                <li>Engine</li>
                <li>Chassis</li>
            </ul>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        var ts = $("#tabstrip").kendoTabStrip({
            animation: { open: { effects: "fadeIn"} },
            contentUrls: [
                        '../content/web/tabstrip/ajax/ajaxContent1.html',
                        '../content/web/tabstrip/ajax/ajaxContent2.html',
                        '../content/web/tabstrip/ajax/ajaxContent3.html'
                    ]
        }).data('kendoTabStrip');
    });
</script>

<style>
    .wrapper {
        height: 455px;
        margin: 20px auto;
        padding: 20px 0 0 0;
        background: url('../content/web/tabstrip/bmw.png') no-repeat center 60px transparent;
    }
    #tabstrip {
        max-width: 400px;
        float: right;
        margin-bottom: 20px;
    }
    #tabstrip .k-content
    {
        height: 320px;
        overflow: auto;
    }
    .specification {
        max-width: 670px;
        margin: 10px 0;
        padding: 0;
    }
    .specification dt, dd {
        max-width: 140px;
        float: left;
        margin: 0;
        padding: 5px 0 8px 0;
    }
    .specification dt {
        clear: left;
        width: 100px;
        margin-right: 7px;
        padding-right: 0;
        opacity: 0.7;
    }
    .specification:after, .wrapper:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
</style>


    
        <div class='demo-section'>
            <h3>Note:</h3>
            <p>
                Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol).
                If the demo is not working as expected, please host the Kendo folder on a web server.
            </p>
        </div>
    
</body>
</html>