1

我正在使用 JQuery Mobile 构建一个应用程序，其中我显示了一个进度条，以根据已完成的步骤向用户指示他们的进度。

对于进度条，我使用的是易于实现的 JQuery UI

<script>
   $(document).ready(function(){     

        var currentStep = $("#formNumber").val(); //get the the current step from form  
    var totalSteps = 8;
    var formProgress = 0;

        // determine overall form progress after step is completed  
    if (currentStep >1) {         
        formProgress = (currentStep-1)/totalSteps*100;
        }   

    // Set progress value
    $("#progressbar").progressbar({value: formProgress});
    $('#percentage').text(formProgress);

   });// End function

</script>

但是，由于 JQuery Mobile 中的页面是通过 Ajax 加载的，因此不会显示进度条。我猜这是因为“#progressbar” div 是空的。

如果页面在没有 Ajax 的情况下加载，它将显示进度条。任何人都知道我可以通过允许进度条显示页面何时通过 Ajax 加载来解决这个问题

4

1 回答 1

1

绑定到 pageinit 没有 dom 准备好，或者在这种情况下我绑定到 pageshow。在 JQM ajax 应用程序中，dom 就绪只在第一页上发生一次。因此，任何带入 dom 的新内容都不会从您编写的代码中受益。当第二页被带入dom时也是如此。第一页没有去任何它只是隐藏的地方。因此，在每个页面中使用相同的 id 会导致问题。习惯于使用类。如果您需要从当前页面中选择某些内容，请使用 .ui-page-active 类来帮助您选择适当的元素。

类似的东西$('.ui-page-active .formNumber')会为您选择正确的输入。所以这是我根据你给我的信息修改的第一步。

索引.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Step 1</title>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css" rel="stylesheet" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript">
            function getProgress(){
                var currentStep = $(".ui-page-active .formNumber").val(); //get the the current step from form  
                var totalSteps = 4;
                var formProgress = 0;

                // determine overall form progress after step is completed  
                if (currentStep >1) {         
                    formProgress = (currentStep-1)/totalSteps*100;
                }
                $(".ui-page-active .progressbar").progressbar({value: formProgress});
            }

            $(document).on('pageshow',function(){
                getProgress();
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="step1">

            <div data-role="header">
                <h1>Step 1</h1>
            </div><!-- /header -->

            <div data-role="content">
                <input type="hidden" class="formNumber" value="1" />
                <div class="progressbar"></div>
                <a href="step2.html" data-role="button">Step 2</a>        
            </div><!-- /content -->

        </div>


    </body>
</html>

step2.html

<div data-role="page" id="step2">

    <div data-role="header">
        <h1>Step 2</h1>
    </div><!-- /header -->

    <div data-role="content">
        <input type="hidden" class="formNumber" value="2" />
        <div class="progressbar"></div>
        <a href="step3.html" data-role="button">Step 3</a>        
    </div><!-- /content -->

</div>

step3.html

<div data-role="page" id="step3">

    <div data-role="header">
        <h1>Step 3</h1>
    </div><!-- /header -->

    <div data-role="content">
        <input type="hidden" class="formNumber" value="3" />
        <div class="progressbar"></div>         
        <a href="step4.html" data-role="button">Step 4</a>        
    </div><!-- /content -->

</div>

......等等等等

如果您有兴趣，我制作了一个样品供您查看。http://starwebservices.net/so/

于 2012-05-21T00:33:42.627 回答