0

を使用して次のhtmlページにリンクしようとしています

$.mobile.changePage( "myPage.html", { transition: "slide"} );

しかし、それは機能していません。ページは読み込まれますが、回転する円と「読み込み中」メッセージを含む警告ボックスが消えることはなく、ページが CSS コンテンツに完全に読み込まれることもありません。上記の呼び出しと以下の html に基づいて、誰でもその理由を理解できますか? ありがとう

HTML ページ

<!DOCTYPE html> 
<html> 
  <head> 
  <title>Sign up</title> 

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
  <link rel="stylesheet" href="./signup.css">
  <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

  <script>   
   // Global declarations - assignments made in $(document).ready() below
    var hdrMainvar = null;
    var contentMainVar = null;
    var ftrMainVar = null;
    var contentTransitionVar = null;
  </script>

</head> 
<body> 

<!-- Page starts here -->
    <div data-role="page" data-theme="b" id="page1">

      <div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
        <h1>Classroom Tempo</h1>
      </div>

          <div data-role="navbar">
          <ul>
            <li><a href="" data-icon="" data-transition="fade" class="ui-btn-active ui-state-persist">Sign-In</a></li>
            <li><a href="survey_SignUp.html" rel="external" data-icon="" data-transition="fade">Sign-Up</a></li>
          </ul>
        </div>


      <div data-role="content" id="contentMain" name="contentMain"> 

      <form id="form1">

      <div id="optionSliderDiv" data-role="fieldcontain">
        <label for="optionSlider">How Many Options?</label>
        <input type="range" name="optionSlider" id="optionSlider" value="2" min="2" max="25" data-highlight="true" />
      </div>

      <fieldset data-role="controlgroup">
      <legend>Numbers or Letters?:</legend>
          <input type="radio" name="numbersOrLetters" id="Numbers" value="Numbers" checked="checked" />
          <label for="Numbers">Numbers</label>

          <input type="radio" name="numbersOrLetters" id="Letters" value="Letters"  />
          <label for="Letters">Letters</label>
    </fieldset>

      <script>

        $(document).ready(function() {
        // Assign global variables
           hdrMainVar = $('#hdrMain');
          contentMainVar = $('#contentMain');
          ftrMainVar = $('#ftrMain');
          contentTransitionVar = $('#contentTransition');

          sliderValue = $('#optionSlider');
          surveyDescriptionVar = $('#SurveyDescription')

          form1Var = $('#form1');
          confirmationVar = $('#confirmation');
          contentDialogVar = $('#contentDialog');

          hdrConfirmationVar = $('#hdrConfirmation');
          contentConfirmationVar = $('#contentConfirmation');
          ftrConfirmationVar = $('#ftrConfirmation'); 
          inputMapVar = $('input[name*="_r"]');

          hideContentDialog();
          hideContentTransition();
          hideConfirmation();
        }); 

        $('#buttonOK').click(function() {
          hideContentDialog();
          //hidePasswordMisMatch();
          showMain();
          return false;      
        });


        $('#form1').submit(function() {
            var err = false;
            var passwordError = false;

            // Hide the Main content
            hideMain();

            console.log(sliderValue.val());


            // If validation fails, show Dialog content
            if(err == true){  

            console.log("we've got an issue");
              showContentDialog();

              return false;
            }        

            $('input[name=OnOff]').each(function() { 
                onOffValue = $('input[name=OnOff]:checked').val();
            })

            $('input[name=numbersOrLetters]').each(function() { 
                numbersOrLetters = $('input[name=numbersOrLetters]:checked').val();
            })

            console.log(onOffValue);
            console.log(numbersOrLetters);
            // If validation passes, show Transition content
            showContentTransition();

            // Submit the form
            $.post("http://url", form1Var.serialize(), function(data){

              console.log(data);

              hideContentTransition();
              showConfirmation();
            });        
            return false;      
        });   


      </script>
    </div> <!-- page1 -->

<!-- Page ends here -->
</body>
</html>
4

1 に答える 1

3

$.mobile.changePageAPI は、jQuery Mobile のバージョン 1.0 alpha 4 および 1.0.1 からいくつかの変更を受けています。オプションオブジェクトで使用している構文は、jQuery Mobile の新しいバージョン (少なくとも 1.0.1 以降) のものです。

于 2012-07-23T05:06:36.683 に答える