jquery中的列表视图
Posted
技术标签:
【中文标题】jquery中的列表视图【英文标题】：List view in jquery 【发布时间】：2015-05-12 23:45:32 【问题描述】：我正在关注这个 youtube 视频 https://www.youtube.com/watch?v=ZwqTsxyhQAU 并尝试制作一个带有列表视图的简单网页。但是，我完全按照视频进行了操作并且具有相同的代码，但是我没有得到与视频中相同的列表视图。请有人能帮帮我；以下是我的截图：
我应该拥有的：
但相反，我得到了这个：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<header data-role="header">
<h1>List App</h1>
</header>
<!--Article, main text for the web page-->
<article data-role="content">
<ul data-role="listview">
<li>
<a href="#test">
<h1>This is a test</h1>
<img src="Images/test.png" />
<p>This is a image test to see if it works</p>
</a>
</li>
<li>
<a href="#test">
<h1>This is a test 2</h1>
<img src="Images/test.png" />
<p>This is a image test 2 to see if it works</p>
</a>
</li>
</ul>
</article>
<!--Footer here-->
<footer data-role="footer">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Info</a></li>
</ul>
</nav>
</footer>
</body>
</html>
【问题讨论】：
可能是因为你的jquery版本不同"jquery-1.9.1.min.js" 您没有使用任何样式。所以也许这就是为什么图像如此不同.. 嗨亨利，我必须使用最新版本的 jquery，该视频是 2012 年制作的 嗨 wrick17，我正在关注 youtube 视频，我是 jquery 的新手，在我关注的视频中，此人尚未创建任何样式。 【参考方案1】：视频中使用的版本较旧，您使用的是最新版本 1.4。图像应该是锚的第一个孩子。
<li>
<a href="#test">
<img src="test.jpg" >
<h1>This is a test 2</h1>
<p>This is a image test 2 to see if it works</p>
</a>
</li>
【讨论】：
是否有任何有用的 jquery 指南我可以阅读，我是 jquery 新手 @Mikey 从 jquery 移动演示页面开始。还可以查找一些 jquery mobile 专用博客。 demos.jquerymobile.com/1.4.5google.com/…以上是关于jquery中的列表视图的主要内容，如果未能解决你的问题，请参考以下文章