1

JQuery Mobileを利用してアプリを構築しています。このアプリでは、完了した手順に基づいて進行状況をユーザーに示すための進行状況バーが表示されています。

プログレスバーには、実装が簡単なJQueryUIを使用しています。

<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

DOM の準備ができていない pageinit にバインドするか、この場合は pageshow にバインドします。JQM ajax アプリでは、dom ready は最初のページで 1 回だけ発生します。そのため、dom に持ち込まれた新しいコンテンツは、作成したコードのメリットを享受できません。また、2 番目のページが dom に持ち込まれたとき。最初のページはどこにも行きません。このため、すべてのページで同じ ID を使用すると問題が発生します。代わりにクラスを使用することに慣れてください。現在のページから何かを選択する必要がある場合は、適切な要素を選択するのに役立つ .ui-page-active クラスを使用します。

のようなもの$('.ui-page-active .formNumber')が正しい入力を選択します。だから、あなたが私に与えた情報によると、ここに私の修正された最初のステップがあります.

index.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 に答える