简体   繁体   English

jQuery mobile,可处理多个页面

[英]Jquery mobile, working with multiple pages

suppose I've following html along with jquery mobile linked: 假设我跟随html和jQuery mobile链接在一起:

<section id="firstpage" data-role="page">

<label for="a">Enter a</label>
<input id="a" type="number"/>

<label for="b">Enter b</label>
<input id="b" type="number"/>

<label for="c">Enter c</label>
<input id="c" type="number"/>

<a href="#secondpage" data-role="button" data-transition="flip">Show Them!</a>
    </section>

    <section id="secondpage" data-role="page">
<!--I want to show the three values of a,b,c here -->
    </section>

As you can see the first page will have a button, and when I'll press that it'll direct me to the second page. 如您所见,第一页将有一个按钮,当我按该按钮时,它将带我到第二页。 Now, suppose I'm saving the input field values to three variables in my script. 现在,假设我将输入字段值保存到脚本中的三个变量中。 How to show them in the second page, I'm getting stucked at that? 如何在第二页中显示它们,我对此感到困惑?

If you just write a simple jquery script that will take these three values in the first page and show them when directed in the second page in its inner html, that'll work for me. 如果您只编写一个简单的jquery脚本,它将在第一页中使用这三个值并在第二页中以其内部html进行显示时显示它们,那么这对我有用。

Place the following code within the <head> tag after loading up jQuery and jQuery mobile within the $(document).ready(function(){ ... }); $(document).ready(function(){ ... });加载jQuery和jQuery mobile之后,将以下代码放在<head>标记中$(document).ready(function(){ ... }); call: 呼叫:

$("#secondpage").on("pagebeforeshow", function(e, data) {
    data.prevPage.find('input').each(function(index) {
        $('#secondpage').append('<div>' + $(this).val() + '</div>');
    });
});

Note, since you have your input fields type set to number it will only output numbers, anything else will be blank output. 注意,由于您将输入字段的类型设置为number ,因此只会输出数字,其他所有内容都将为空白输出。

jsFiddle jsFiddle

just give the button element an id like : 只需给button元素一个id即可:

 <a href="#secondpage" id="mybutton" data-role="button" data-transition="flip">Show Them!</a>

and then use jquery to do the rest, 然后使用jquery来完成其余的工作,

 $('#mybutton').tap(function(){

 var a = $('#a').val();

 var b = $('#b').val();

 var c = $('#c').val();

 var total= 'a is '+ a + ',b is' + b + ',c is' + c;
 $('#secondpage').html(total);
 });

that should do the work 应该做的工作

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM