목록 항목 및 데이터 전송

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 여기에 값을 전달에 대한 자세한 내용을보실 수 있습니다 -data-between-pages-with-jquery-mobile – 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

목록 항목 및 데이터 전송

답변

관련 문제