0

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

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

4

1 回答 1

0

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

下面是一个示例，它显示了如何做到这一点。

<!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>

我希望这会有所帮助。

于 2013-04-06T09:12:38.013 回答