20160816 JQueryMobile的使用

xiaoxiao2021-02-28  78

jquery mobile 的使用

下载地址:jquerymobile.com

新建webapp.html

引用文件

<script src="./js/jquery-1.8.3.min.js"></script> <link rel="stylesheet" type="text/css" href="./js/jquery.mobile-1.4.5.css"> <script src="./js/jquery.mobile-1.4.5.js"></script>

加入头

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

单页面多应用

<div data-role="page" id="pageone"></div> <div data-role="page" id="pagetwo"></div>

编写头部

<div data-role="header"> <h1>test</h1> </div> 编写底部 <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#pageone" data-icon="home">home</a></li> <li><a href="#pageone" data-icon="bars">bars</a></li> <li><a href="#pageone" data-icon="grid">grid</a></li> </ul> </div> </div> 编写主体 <div data-role="main" class="ui-content"> <form method="post"> <label for="iphone">手机</label> <input type="text" name="tel"> <label for="iphone">密码</label> <input type="password" name="pwd"> <a href="#" class="ui-btn ui-shadow">确定</a> <a href="#" class="ui-btn">登陆</a> </form> </div>

作业:作业:三个页面 ,用jq mobile,商品首页,商品列表页,商品详情页,用户登录和注册,

转载请注明原文地址: https://www.6miu.com/read-29884.html

最新回复(0)