wwwroot/examples/callbacks.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>toturial.js | Working with callbacks</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
    <link href="../css/tutorial.css" rel="stylesheet" />
    <style>
        .icon-block .material-icons {
            font-size: inherit;
        }
    </style>
</head>
<body>
    <nav class="transparent z-depth-0" role="navigation">
        <div class="nav-wrapper container">
            <ul class="left hide-on-med-and-down">
                <li>
                    <a class="waves-effect waves-purple btn-flat blue-grey-text" href="#how-to-use-it">How to use it</a>
                </li>
                <li>
                    <a class="waves-effect waves-purple btn-flat blue-grey-text" href="#how-it-works">How it works</a>
                </li>
                <li>
                    <a class="waves-effect waves-purple btn-flat blue-grey-text" href="#examples">Examples</a>
                </li>
                <li>
                    <a class="waves-effect waves-purple btn-flat blue-grey-text" href="#documentation">Documentation</a>
                </li>                
            </ul>
        </div>
    </nav>
    <div class="container">
        <br>
        <br>
        <h1 class="center blue-grey-text">tutorial.js</h1>
        <p class="center">
            The best step-by-step feature introduction for your web sites, that's a promise!
        </p>
    </div>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="../js/tutorial.js"></script>
    <script>
        $(function() {
            var title = $(".container h1");
            var output = $(".container p");

            tutorial([{
                target: ".container h1",
                html: "In this callback example we will be<br>using <b>onCreate</b> and <b>onNext</b> callbacks.",
                position: "bottom"
            }, {
                target: ".container h1",
                html: "You can notice that we have changed<br>the content and size of the current target.<br>For that we used <b>onCreate</b> callback.",
                position: "bottom",
                onCreate: function(index, step, result) {
                    $(step.target)
                        .css("display", "inline-block")
                        .html("step " + (index + 1));
                }
            }, {
                target: ".container h1",
                html: "Now we will do some async stuff. The next step<br>will be invoked after the job is done.",
                position: "right",
                onNext: function(index, step, resolve) {
                    $(step.target).html("loading...");
                    setTimeout(function() {
                        $(step.target).html("...done");
                        resolve();
                    }, 3000);
                }
            }, {
                target: ".container h1",
                html: "That's it.<br><br>Remember that you can end each tutorial<br>by pressing the <b>Esc</b> key."
            }])
                .start()
                .then(function() {
                    output.html("Tutorial ended succesfully");
                });
        });
    </script>
</body>
</html>