Jquery 列表项和数据传输_Jquery_Listview_Jquery Mobile_Listitem

Jquery 列表项和数据传输

jquery listview jquery-mobile

Jquery 列表项和数据传输,jquery,listview,jquery-mobile,listitem,Jquery,Listview,Jquery Mobile,Listitem,我正在使用jQuery mobile创建一个网页。我是这项技术的新手。我想通过单击列表项导航到另一页。当转到第二页时，我想传递列表项的文本值和列表项id以显示它。有人能指引我吗我的HTML代码是： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, max

我正在使用jQuery mobile创建一个网页。我是这项技术的新手。我想通过单击列表项导航到另一页。当转到第二页时，我想传递列表项的文本值和列表项id以显示它。有人能指引我吗

我的HTML代码是：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title>Demo Page</title>

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>

    function onDeviceReady() {}
    document.addEventListener("deviceready", onDeviceReady, false);

    function Button_onclick() {

    for(i=0; i < 3; i++){
            $("#numbers").append('<li id="'+i+'" ><a href="#page2#">' +i+'</a></li>' );
        $('#numbers').listview('refresh');
    }
}
</script>

</head>

<body>

    <div >
        <input id="Click_Button" type="button" value="Submit" onclick="Button_onclick()" />
    </div>

    <div id="divList" data-role="content">
        <ul id="numbers" data-role="listview" data-inset="true"> </ul>
    </div>

    </div>
    <div data-role="page" id="page2">

    <div data-role="header">
    <h1>Page Two</h1>
        </div>

        <div data-role="content">
    <p>Welcome to page 2.</p>
    </div>

    </div>

</body>

</html>


演示页
函数ondevicerady（）{}
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
功能按钮_onclick（）{
对于（i=0；i<3；i++）{
$（“#数字”）.append（“”）；
$（'数字'）.listview（'刷新'）；
}
}

第二页
欢迎来到第二页

这必须有效。我希望它会有用

index.html：

<body>
<div id="page1" data-role="page" data-theme="a" data-rockncoder-jspage="page1">
    <header data-role="header">
        <h1>Page 1</h1>
    </header>
    <section data-role="content" id="pages_list"></section>
    <div>
        <button id="send_btn">SEND</button>
    </div>
</div>

<div id="page2" data-role="page" data-theme="b" data-rockncoder-jspage="page2">
    <header data-role="header">
        <h1>Page 2</h1>
    </header>
    <div id="p2_id_selected"></div>
    <div id="p2_text_selected"></div>
</div>

<div id="page3" data-role="page" data-theme="b" data-rockncoder-jspage="page3">
    <header data-role="header">
        <h1>Page 3</h1>
    </header>
    <div id="p3_id_selected"></div>
    <div id="p3_text_selected"></div>
</div>

<script src="scripts/hideAddressBar.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>


第1页
发送
第2页
第3页

main.js：

num_pages = 3;
page_selected = 0;
text_selected = "";

$(document).delegate('.ui-page', 'pageshow', function () {
    loadList();
});

function loadList()
{   
    $("#pages_list").append("<ul><fieldset data-role='controlgroup' id='radios'></fieldset></ul>");
    $("#radios").empty();
    for (var i = 0; i < num_pages; i++)
    {
        var id = "page_id"+(i+1);
        $("#radios").append("<input type='radio' name='choice' data-theme='c' id='" + id + "' />");
        $("#radios").append("<label for='" + id + "'>"+"Page "+(i+1)+"</label>");
        $("#" + id).checkboxradio();
    }
    $("#radios").controlgroup("refresh"); 
};

$(function(){
    $( "#send_btn" ).click(function(e)
    {
        if( $('#page_id2').is(':checked') )
        {
            page_selected = 2;
            text_selected = $('input[name=choice]:checked + label').text();
            $.mobile.changePage( "#page2", {
                transition: "slide",
                role: "page",
                reverse: false,
            });
        }else if( $('#page_id3').is(':checked') )
        {
            page_selected = 3;
            text_selected = $('input[name=choice]:checked + label').text();
            $.mobile.changePage( "#page3", {
                transition: "slide",
                role: "page",
                reverse: false,
            });
        }
    });
});

$("#page2").live('pageshow', function() {
   $("#p2_id_selected").text(page_selected);
   $("#p2_text_selected").text(text_selected);
});

$("#page3").live('pageshow', function() {
   $("#p3_id_selected").text(page_selected);
   $("#p3_text_selected").text(text_selected);
});

num_pages=3；
所选页面=0；
text_selected=“”；
$（文档）.delegate（'.ui页面'，'pageshow'，函数（）{
loadList（）；
});
函数loadList（）
{   
$（“#页面列表”）。追加（“”）；
$（“#收音机”）.empty（）；
对于（变量i=0；i

您可以在此处阅读有关传递值的更多信息