jQuery Mobile的详细列表视图弹出

                  <!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="iso8858-1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>HE-JQuery-App</title> 
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0/css/themes/default/jquery.mobile-1.2.0.css" /> 
    <link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0/docs/_assets/css/jqm-docs.css" /> 

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script> 
    <script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script> 
    <script> 
    $.getJSON("test.json",function(result){ 
     $.each(result, function(i, field){ 
     $('#profs').children('ul').append('<li><a href="#'+field.nachname+'" data-rel="popup" data-position-to="window" data-transition="pop"><img src="'+field.imgSmall+'" class="ui-li-thumb" />'+field.name+'<p class="ui-li-desc">'+field.titel+'</p></a></li>').listview('refresh'); 
     // $('#pops).append('<div data-role="popup" id="'+field.nachname+'" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;"><h3>Purchase Album?</h3><img src="'+field.imgBig+'" /><p>Your download will begin immediately on your mobile device when you purchase.</p><a href="search.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Toller Prof?</a><a href="search.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Schließen</a></div>').listview('refresh'); 

     }); 
    }); 

</script> 

</head> 
<body> 

    <div data-role="page" class="type-interior"> 

     <div data-role="header" data-theme="a"> 
     <h1>HE Prof Search</h1> 
     </div><!-- /header --> 

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


      </ul> 


      </div><!--/content-primary -->  



     </div><!-- /content --> 

    <!-- <div data-role="footer" class="footer-docs" data-theme="a"> 
       <br /> 
       <p>&copy; 2013 Nesim Avdullahu HE-APP</p> 
     </div>  --> 

     </div><!-- /page --> 


     </body> 
     </html>

您好，jQuery Mobile的详细列表视图弹出

我从readet Json的产生在这里列表视图。我想在列表视图中的每个列出项目的弹出窗口中显示详细信息。我也不想再次阅读json。有人可以帮忙吗？

例如弹出窗口应显示图像（从JSON）fields.imageBig

来源

2013-03-20 Fabian K

你的代码有什么问题？ – Gajotres 2013-03-20 16:29:04

1.你没有说哪个部分不工作。没有test.json我就不能使用它。 3.想一想，你不需要用$（document）.ready（）来包装你的js吗？ – 2013-03-20 22:05:28

2.根据http://www.led-werbeanzeige.de/test.json – 2013-03-21 18:01:28

你需要在它的图像添加弹出DIV，然后ListView控件加载后初始化弹出插件。试试这个...

<style> 
    .mypopup { 
     width:80px; 
     height:80px; 
    } 
</style> 

<script> 
    $(document).bind('pageinit', function() { 
     $.getJSON("test.json",function(result){ 
     $.each(result, function(i, field){ 
      $('#profs').children('ul').append('<li><a href="#'+field.nachname+'" data-rel="popup" data-position-to="window" data-transition="pop"><img src="'+field.imgSmall+'" class="ui-li-thumb" />'+field.name+'<p class="ui-li-desc">'+field.titel+'</p></a><div data-role="popup" id="'+field.nachname+'" class="ui-content mypopup" data-theme="a"><img src="'+field.imgSmall+'"/></div></li>').listview('refresh'); 
     }); 
     $('div.mypopup').popup(); 
     }); 
    }); 
</script>

来源

2013-03-22 05:35:27

jQuery Mobile的详细列表视图弹出

回答

相关问题