jQuery mobile新闻页面代码
时间: 2023-08-08 10:09:54 浏览: 103
新闻类代码
以下是一个简单的jQuery Mobile新闻页面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile News</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- Header -->
<div data-role="header">
<h1>jQuery Mobile News</h1>
</div>
<!-- Article List -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<h2>Article Title</h2>
<p>Article summary goes here.</p>
</a>
</li>
<li>
<a href="#">
<h2>Article Title</h2>
<p>Article summary goes here.</p>
</a>
</li>
<li>
<a href="#">
<h2>Article Title</h2>
<p>Article summary goes here.</p>
</a>
</li>
</ul>
</div>
<!-- Footer -->
<div data-role="footer">
<h4>© jQuery Mobile News</h4>
</div>
</body>
</html>
```
在这个例子中,我们使用了jQuery Mobile的几个核心组件:`data-role="header"`,`data-role="content"`和`data-role="footer"`。我们还使用了一个带有`data-role="listview"`属性的列表视图来显示文章列表。您可以根据需要添加更多的文章列表元素。
阅读全文