Jquery 移动列表视图详细信息弹出窗口答案

【问题标题】：Jquery mobile listview detail popupJquery 移动列表视图详细信息弹出窗口
【发布时间】：2013-03-09 19:00:22
【问题描述】：

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

你好，

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

例如，弹出窗口应显示图像（来自 json）fields.imageBig

【问题讨论】：

你的代码有什么问题？
1.你没有说哪个部分不起作用。 2. 如果没有 test.json，我无法使用它。 3. 想一想，难道你不需要把你的js包装在$(document).ready()中吗？
2.测试json在led-werbeanzeige.de/test.json下可用
和 1. 它既可以引用另一个页面，也不能显示弹出窗口。

标签： jquery listview jquery-mobile mobile popup

【解决方案1】：

您需要添加包含图像的弹出 div，然后在列表视图加载后初始化弹出插件。试试这个...

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

【讨论】：