jquery mobile 应用案例

关注

原创最新推荐文章于 2026-02-08 05:34:53 发布 8.7k 阅读 AI 写同款· GEO 优化 ›

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>