Jquery-Mobile:如何使用ID调用另一个页面

时间:2011-12-13 06:09:42

标签: jquery-mobile

我在容器页面中有2个不同ID的页面。第一页有一个按钮,如果你点击它然后它会调用一个java脚本函数。我想实现以下一个。在java脚本函数中,条件为true,然后只使用id重定向到下一页。否则不要重定向。如何做到这一点请任何人帮助我。很清楚吗?

CODE

< !DOCTYPE html> 

< html> 

< head> 

    < meta charset="utf-8"> 
    < meta name="viewport" content="width=device-width, initial-scale=1"> 
    < title>Single page template</title>

      < link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
     < script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
     < script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

< /head> 

< body>

< !-- BMR Screen page -->

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

  < div data-role="header" data-theme="e" id="hdrBMRScreen">

  < h1> BMR Screen< /h1>
  < /div>

  < div data-role="content" id="contentBMRScreen"> 

        < div data-role="fieldcontain">  

             < label for="BMR_age">Age(in years):</label> 

             < input type="text" id="BMR_age" /> 

        < /div> 

        < a href="#BMR_Result" onclick="BMR_Cal()"  data-role="button">submit</a> 

  < /div>

 < /div>

 < !-- End BMR Screen -->

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

       < div data-role="header" data-theme="b" >

            < a data-role="button" data-rel="back" data-icon="back">back</a>

            <h1>BMR Result</h1> 

       < /div>

        < div data-role="content">      

          < p id="W_Range">Weight Range:</p>   

        < /div>
    < /div>

  < script type="text/javascript"> 

  var agevar;


  $(document).ready(function () {   
    // Initialize variables 
    ageVar = $('#BMR_age');     
  });

  function BMR_Cal()
  {    
    if(ageVar.val() > 0)
    {       
        // then only it will redirect to the next page i.e, BMR_Result          
    }

  }
  < /script>
  < /body> 
< /html>

2 个答案:

答案 0 :(得分:1)

在jQuery mobile中,您不应该使用ready事件。使用mobileinit事件,因为jQuery移动的初始代码在DOM准备好之前运行。 See

另外,请考虑使用$.mobile.changePage method在javascript中执行页面更改,因为它更安全,更易于配置。

答案 1 :(得分:0)

好的问题是你在页面加载时(在用户输入任何内容之前)分配变量。

让我们准备好在文档中弹出所有内容。

 $(document).ready(function () {
// Initialize the variable by declaring it
var ageVar ;

function BMR_Cal() {
//then tie it to the input element AFTER the user has inputted .
ageVar = $('#BMR_age');
if(ageVar.val() > 0) {

document.location.href="yourpagename#BMR_Result";
}
});