Question

我正在尝试使用

链接到以下html页面

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

然而，它不起作用。页面将加载，但带有旋转cirlce和“加载”消息的警报框永远不会消失，页面永远不会完全加载其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>

Answer 1

$.mobile.changePage API已经从jQuery Mobile的1.0版alpha 4和1.0.1进行了一些更改。您使用选项对象的语法属于较新版本的jQuery Mobile（至少从1.0.1开始）。

jQuery Mobile changePage无法正常工作

1 个答案: