20160922学习笔记 jquery mobile
基础讲解1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>jquery mobile</title>
<link rel="stylesheet" href="./js/jquery.mobile-1.4.5.min.css">
<!--<script src="./js/jquery-3.1.0.min.js" ></script>-->
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script>
<script src="./js/jquery.mobile-1.4.5.min.js" ></script>
</head>
<body>
<div id="pageone" data-role="page">
<div data-role="header">
<h1>兄弟会</h1>
</div>
<div data-role="main" class="ui-content">
晚上我们在学习
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大厅</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">个人</a> </li>
</ul>
</div>
</div>
</div>
</body>
单页多应用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>jquery mobile</title>
<link rel="stylesheet" href="./js/jquery.mobile-1.4.5.min.css">
<!--<script src="./js/jquery-3.1.0.min.js" ></script>-->
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script>
<script src="./js/jquery.mobile-1.4.5.min.js" ></script>
</head>
<body>
<div id="pageone" data-role="page">
<div data-role="header">
<h1>第一个应用</h1>
</div>
<div data-role="main" class="ui-content">
写一个单页多应用的webapp
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大厅</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">个人</a> </li>
</ul>
</div>
</div>
</div>
<div id="pagetwo" data-role="page">
<div data-role="header">
<h1>第2个应用</h1>
</div>
<div data-role="main" class="ui-content">
写一个单页多应用的webapp
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大厅</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">个人</a> </li>
</ul>
</div>
</div>
</div>
<div id="pagethree" data-role="page">
<div data-role="header">
<h1>第3个应用</h1>
</div>
<div data-role="main" class="ui-content">
写一个单页多应用的webapp
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大厅</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">个人</a> </li>
</ul>
</div>
</div>
</div>
<div id="pagefour" data-role="page">
<div data-role="header">
<h1>第4个应用</h1>
</div>
<div data-role="main" class="ui-content">
写一个单页多应用的webapp
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">大厅</a> </li>
<li><a href="#pagetwo" data-icon="plus">朋友</a> </li>
<li><a href="#pagethree" data-icon="gird">信息</a> </li>
<li><a href="#pagefour" data-icon="star">个人</a> </li>
</ul>
</div>
</div>
</div>
</body>
目前点击底部按钮时，会存在闪烁问题。可添加过渡效果，代码如下：
<a href="#anylink" data-transition="slide">滑动到页面二</a>
作业
- 熟悉jquery mobile的class
- 用 jquery mobile 写一个单页多应用的webapp页面 ( 包括的应用：商品的首页，列表，详情页，登陆，注册 )
