Question

                                                                          <!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中生成了一个listview。我想在列表视图中的每个列出项目的弹出窗口中显示详细数据/。我也不想再读一遍json了。有人可以帮忙吗？

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

Answer 1

您需要在其中添加带有图像的弹出窗口，然后在列表视图加载后初始化弹出窗口插件。试试这个......

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

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

1 个答案: