Jquery 移动列表视图详细信息弹出窗口
Posted
技术标签:
【中文标题】Jquery 移动列表视图详细信息弹出窗口【英文标题】：Jquery mobile listview detail popup 【发布时间】：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>© 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. 它既可以引用另一个页面，也不能显示弹出窗口。 【参考方案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>
【讨论】：
以上是关于Jquery 移动列表视图详细信息弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章
iscrollview 和 jquery 移动弹出窗口底部内容隐藏