列表項目和數據傳輸

我正在使用jQuery mobile.i創建一個網頁，這個技術是新手。我想通過點擊列表項目導航到另一個頁面。而去第二頁，我想傳遞來自列表項和列表項的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>

來源

2012-11-01 Jesbin MJ

你可以閱讀更多有關在這裏傳遞值http://stackoverflow.com/questions/10671092/passing - 數據之間的頁面與 - jQuery的移動 – Taifun

這必須工作。我希望它會有用。

的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>

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); 
});

來源

2013-02-03 16:16:20 gpalomar

列表項目和數據傳輸

回答

相關問題