Question

我正在使用Tolito Progress Bar 1.0.2 https://github.com/tolis-e/jQuery-Mobile-Progress-Bar-with-Percentage在我的jQuery Mobile应用程序中显示一个带百分比计数器的进度条。

我想在Tolito进度条完成时显示一个按钮，我该怎么做？

Answer 1

进度条完成后，会触发一个事件。因此，您可以附加事件处理程序。

以下是一个展示如何操作的示例。

<!DOCTYPE html>
<html>

    <head>
        <title>Tolito Progress Bar for jQuery Mobile</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <link rel="stylesheet" type="text/css" href="../src/css/tolito-1.0.3.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="../src/js/tolito-1.0.3.js"></script>
        <script>

            $(document)
                .on('pageinit', "#home-page", function () {

                var tolito = TolitoProgressBar('progressbar')
                    .setOuterTheme('b')
                    .setInnerTheme('e')
                    .isMini(true)
                    .setMax(100)
                    .setStartFrom(0)
                    .setInterval(10)
                    .showCounter(true)
                    .logOptions()
                    .build()
                    .run();
            });

            $(document)
                .on('complete', '#progressbar', function () {
                $('#msg').parent().find('.ui-btn-inner .ui-btn-text').text('Completed');
            });
        </script>
    </head>

    <body>
        <!-- /page -->
        <div data-role="page" id="home-page">
            <!-- /header -->
            <div data-role="header" data-theme="c">
                 <h1>Tolito Progress Bar for jQuery Mobile</h1>

            </div>
            <!-- /content -->
            <div data-role="content">
                <div id="progressbar"></div>
                <input type="button" id="msg" value="In Progress"/>
            </div>
        </div>
    </body>

</html>

我希望有所帮助。

当Tolito Progress Bar完成时，如何执行jQuery函数？

1 个答案: