Jquery Mobile List點擊

我用Jquery創建了一個移動列表視圖，它的渲染效果很好。我想要一些幫助的是當你點擊一個特定的列表元素 - 現在我已經設置它進入一個新的頁面，它顯示了resterunt id。我想要做的就是在新頁面上顯示被點擊的特定列表視圖條目的相同信息，這意味着我之前在單擊的列表元素中的所有信息都將在新頁面上呈現，簡單的段落。這是我試圖讓我的頭在這個動態listviews是我有麻煩的地方。任何人都可以幫忙嗎？我真的很感激它 - 數據庫信息正在完美地讀取！Jquery Mobile List點擊

<html> 
<head> 
<meta charset="utf-8" /> 
<title>Find A Deal</title> 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <style> 
     img.fullscreen { 
      max-height: 100%; 
      max-width: 100%; 
     } 
     </style> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script type="text/javascript"> 
    $(document).on('pagebeforeshow', '#index', function(){ 
     $("#list").empty(); 
     var url="http://localhost/test/json3.php"; 
     $.getJSON(url,function(json){ 
      //loop through deals 
      $.each(json.deals,function(i,dat){ 
       $("#list").append("<li><a id='"+dat.restaurantid+"'><h1>"+dat.name+"</h1><p>"+dat.dname+"</p></a></li>"); 
       $(document).on('click', '#'+dat.restaurantid, function(event){ 
        if(event.handled !== true) // This will prevent event triggering more then once 
        { 
         listObject.itemID = $(this).attr('id'); 
         $.mobile.changePage("#index2", { transition: "slide"}); 
         event.handled = true; 
        } 
       });    
      }); 
      $("#list").listview('refresh'); 
     }); 
    }); 

    $(document).on('pagebeforeshow', '#index2', function(){  
     $('#index2 [data-role="content"]').html('You have selected Link' + listObject.itemID); 
    }); 

    var listObject = { 
     itemID : null 
    }  
</script> 
</head>  
<body>  
<div data-role="page" id="index"> 
    <div data-role="header" data-position="fixed"> 
     <h1>Current Deals</h1> 
    </div> 

    <div data-role="content"> 
     <div class="content-primary"> 
      <ul id="list" data-role="listview" data-filter="true"></ul> 
     </div> 
    </div> 

    <div data-role="footer" data-position="fixed"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li> 
       <li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<!--New Page --> 

<div data-role="page" id="index2"> 
<div data-role="header"> 
     <h1> Find A Deal </h1> 
    </div> 

    <div data-role="content"> 
     <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal </a> 
    </div> 

    <footer data-role="footer" data-position="fixed"> 
     <nav data-role="navbar"> 
      <ul> 
       <li><a href="index.html" data-icon="home">Home</a></li> 
       <li><a href="#index" data-icon="grid">My Deals</a></li> 
      </ul> 
     </nav> 
    </footer> 
</div> 
</body> 
</html>

來源

2013-02-13 user2025934

在以下基於您發佈的代碼的示例中，所選ID將從頁索引傳遞到頁索引2。

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Find A Deal</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <style> 
      img.fullscreen { 
       max-height: 100%; 
       max-width: 100%; 
      } 
     </style> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
     <script type="text/javascript"> 
      $(document).on('pagebeforeshow', '#index', function() { 
       $("#list").empty(); 
       for (var i = 0; i < 5; i++) { 
        $("#list").append (
         $(["<li><a id='id_",i ,"'><h1>H1_label_",i,"</h1><p>P_label_",i,"</p></a></li>"].join("")). 
         on('click', ['#id_',i].join (""), function(e){ 
          if(e.handled !== true) { 
           listObject.itemID = this.id;         
           $.mobile.changePage("#index2", { transition: "slide"}); 
           e.handled = true; 
          } 
         }) 
        ); 
       } 
       $("#list").listview('refresh'); 
      }); 

      $(document).on('pagebeforeshow', '#index2', function() { 

       //selected id on page transition 
       alert(['selected id: ',listObject.itemID].join("")); 
      }); 

      var listObject = { 
       itemID: null 
      } 
     </script> 
    </head> 

    <body> 
     <div data-role="page" id="index"> 
      <div data-role="header" data-position="fixed"> 
       <h1>Current Deals</h1> 

      </div> 
      <div data-role="content"> 
       <div class="content-primary"> 
        <ul id="list" data-role="listview" data-filter="true"></ul> 
       </div> 
      </div> 
      <div data-role="footer" data-position="fixed"> 
       <div data-role="navbar"> 
        <ul> 
         <li> 
          <a href="http://localhost/findadeal/index.html" data-icon="home">Home</a> 
         </li> 
         <li> 
          <a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <!--New Page --> 
     <div data-role="page" id="index2"> 
      <div data-role="header"> 
       <h1> Find A Deal </h1> 
      </div> 
      <div data-role="content"> 
       <a data-role="button" href="#page1" data-icon="star" data-iconpos="left">Get Deal</a> 
       <p></p> 
      </div> 
      <footer data-role="footer" data-position="fixed"> 
       <nav data-role="navbar"> 
        <ul> 
         <li> 
          <a href="index.html" data-icon="home">Home</a> 
         </li> 
         <li> 
          <a href="#index" data-icon="grid">My Deals</a> 
         </li> 
        </ul> 
       </nav> 
      </footer> 
     </div> 
    </body> 
</html>

來源

2013-02-13 20:04:15

對不起，我有一種感覺，我解釋自己錯了，我希望實現的是當用戶點擊原始列表中的一個元素時，它將加載一個新頁面。在這個新的頁面上，只有選中的列表項目的「dat.restaurantntid，dat.name和dat.dname」纔會從數據庫中提取出來，並以段落的形式顯示在新頁面上（

），我希望這更好地解釋了事情？我道歉！ – user2025934 2013-02-13 21:46:18

我已更新我的帖子。選定的列表項ID從頁面索引傳遞到索引2.以同樣的方式，您可以將所需的任何信息從頁面索引傳遞到頁面索引2。當頁面索引2的pagebeforeshow事件觸發時，您知道所選的ID，因此您可以根據所選ID顯示特定的數據。 – 2013-02-13 22:25:52

在列表視圖中呈現數據並在列表中的每個點擊/觸摸起點上顯示另一頁上的數據。

//第一功能

function render(){   
    var html=""; 
    html += "<li id="+index+"><a href='#'><img src='images/new-iaav-72.png' class='ui- corner-none' style='width:50px;height:56px'>"; 

    html += "<div style='margin-left:-10%;margin-top:-2%'><h1>"+title +"</h1> </div>";   
    html += "</a></li>";       
    $("#xyz div:jqmData(role=content) #ul1").append (html); 

    func1 = function() {showDetails(index,title,descrp,image_large);}; 
    document.getElementById(index).addEventListener("click", func1);

}

//二級功能呈現在第二頁上的數據。

function showDetails(){ 

    if(image_large!="") 
    $('#setDetailImage').attr("src",image_large); 
else   
    $('#setDetailImage').attr("src",'images/defaultDog.png'); 

$('#setDetailTitle').text(title); 
$('#setDetailDescription').html(descrp).text(); 

}

來源

2013-10-14 17:51:59 Saurabh

Jquery Mobile List點擊

回答

相關問題