jquery mobile 应用案例

最新推荐文章于 2025-11-18 03:06:02 发布

原创最新推荐文章于 2025-11-18 03:06:02 发布 · 8.6k 阅读

15 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

11 篇文章

订阅专栏

这个示例展示了如何使用jQuery Mobile创建一个包含多个页面的应用。应用中包含了列表视图、搜索过滤、导航按钮等功能，提供了刘德华的歌曲信息，并且设有首页、详情、个人和设置等操作选项。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
		<title>jquery mobile</title>
		<link rel="stylesheet" href="js/jquery.mobile-1.4.2.min.css" />
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js" ></script>
		<style type="text/css">
		 #controlgroupid	.ui-controlgroup-controls{
				width:100%;
			} 
			#controlgroupid a{width:25%;box-sizing: border-box;}
		</style>
	</head>
	<body>
		<!--
        	作者：郭胜
        	时间：2018-03-05
        	描述：第一个页面
        -->
		<div data-role="page" id="page1">
			<div data-role="header">
				<h1>第一个页面</h1>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入……">
					<li><a href="#">
						<img src="js/images/other/4.jpg"/>
						<h3>姓名：刘德华</h3>
						<p>男人哭吧哭吧不是罪</p>
						<p>再强的男人也有权利去疲惫</p>
					</a></li>
					<li><a href="#">
						<img src="js/images/other/4.jpg"/>
						<h3>姓名：刘德华</h3>
						<p>冰雨</p>
						<p>冷冷的冰雨在你的脸上胡乱的拍</p>
					</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="controlgroup" data-type="horizontal" id="controlgroupid">
					<a href="#" data-role="button" data-icon="star" data-iconpos="top">首页</a>
					<a href="#" data-role="button" data-icon="search" data-iconpos="top">详情</a>
					<a href="#" data-role="button" data-icon="refresh" data-iconpos="top">个人</a>
					<a href="#page2" data-transition="flip" data-role="button" data-icon="power" data-iconpos="top">设置</a>
				</div>
			</div>
		</div>
		
		<!--
        	作者：郭胜
        	时间：2018-03-05
        	描述：第二个页面
        -->
        <div data-role="page" id="page2">
			<div data-role="header">
				<h1>第二个页面</h1>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入……">
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">郭胜</a></li>
					<li><a href="#">
						<img src="js/images/other/4.jpg"/>
						<h3>姓名：刘德华</h3>
						<p>男人哭吧哭吧不是罪</p>
						<p>再强的男人也有权利去疲惫</p>
					</a></li>
					<li><a href="#">
						<img src="js/images/other/4.jpg"/>
						<h3>姓名：刘德华</h3>
						<p>冰雨</p>
						<p>冷冷的冰雨在你的脸上胡乱的拍</p>
					</a></li>
				</ul>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="controlgroup" data-type="horizontal" id="controlgroupid">
					<a href="#page1" data-transition="slidedown" data-role="button" data-icon="star" data-iconpos="top">首页</a>
					<a href="#" data-role="button" data-icon="search" data-iconpos="top">详情</a>
					<a href="#" data-role="button" data-icon="refresh" data-iconpos="top">个人</a>
					<a href="#" data-role="button" data-icon="power" data-iconpos="top">设置</a>
				</div>
			</div>
		</div>
	</body>
</html>