jquery mobile项目（一款“运动”移动web）

包含功能：

登录页
注册页
首页
社区
我的运动
消息
我

该文章只列出部分代码，项目的所有代码将上传到资源，免费下载。

下载地址：https://download.csdn.net/download/WwLK123/87303042

0 jQuery Mobile介绍

jQuery Mobile是一个用于创建移动端web应用的前端框架。

jQuery Mobile是针对触屏智能手机与平板电脑的网页开发框架。

jQueryMobile工作于所有主流的智能手机和平板电脑商：

ios

android

windows phone

学习jQuery Mobile之前应该了解：

HTML
CSS
jQuery

1、登录页

代码

<div id="page" data-role="page" data-theme="a" style="background:url(./img/run.jpeg);background-size: 100% 100%;background-repeat: no-repeat;"><div data-role="main" style="background-color: white;height: 800px;"><div style="width: 100%;border-radius: 30px;margin: 0 auto;margin-top: 20px;text-align: center;"><!-- <h2 style="margin: 0 auto;text-align: center;">自律给我自由</h2> --><img src="./img/title2.png" style="margin-left: 10px;"/></div><form action="#" method="get" style="margin-top: 50px;"><div data-role="fieldcontain" style="border: none;width: 80%;margin: 0 auto;"><label for="name">手机号：</label><input type="text" name="phone" id="phone" value="" /></div><div data-role="fieldcontain" style="border: none;width: 80%;margin: 0 auto;"><label for="name">密码：</label><input type="text" name="password" id="password" value="" /></div><div class="ui-body ui-body-a" style="margin-top: 50px;border: none;"><a id="login" href="#" class="ui-btn" type="submit" data-theme="d"style="background-color: white;">登录</a><a href="./register.html" class="ui-btn" type="submit" data-theme="d"style="background-color:white;">去注册</a></div></form></div></div>

效果展示

2、注册页面

代码

<div id="page" data-role="page" data-theme="a"><div data-role="main" style="background-color: white;"><div style="width: 60%;border-radius: 30px;margin: 0 auto;margin-top: 20px;"><h2 style="margin: 0 auto;text-align: center;color: rgb(34, 34, 34);">Keep Running</h2></div><form action="#" method="get" style="margin-top: 30px;"><div data-role="fieldcontain" style="border: none;width: 80%;margin: 0 auto;"><label for="name">用户名：</label><input type="text" name="name" id="name" value=""  /></div><div data-role="fieldcontain" style="border: none;width: 80%;margin: 0 auto;"><label for="name">手机号：</label><input type="text" name="phone" id="phone" value=""  /></div><div data-role="fieldcontain" style="border: none;width: 80%;margin: 0 auto;"><label for="name">密码：</label><input type="text" name="password" id="password" value=""  /></div><div class="ui-body ui-body-a" style="margin-top: 100px;border: none;"><a href="#" id="register" class="ui-btn" type="submit" data-theme="d" style="background-color: white;">注册</a><a href="./index.html" class="ui-btn" type="submit" data-theme="a" style="background-color: white;">取消</a></div></form></div></div>

运行效果：

3、首页

代码

<div data-role="page" id="page" data-theme="a"><div data-role="header" id="header"><h1 style="color: white;">推荐</h1></div><div data-role="main" style="text-align: center;margin-top: 30px;"><input type="search" name="password" id="search" value="" placeholder="世界杯" /><div id="more" class="ui-grid-c" style="margin-top: 10px;"><div class="ui-block-a"><img src="../img/跑步.svg" style="width: 30px;"/><br/><span><a href="./vegetables.html" style="text-decoration: none;color: black;font-weight: lighter;">跑步</a></span></div><div class="ui-block-b"><img src="../img/步行.svg" style="width: 30px;"/><br/><span><a href="./fruit.html" style="text-decoration: none;color: black;font-weight: lighter;">行走</a></span></div><div class="ui-block-c"><img src="../img/骑行.svg" style="width: 30px;"/><br/><span>骑行</span></div><div class="ui-block-d"><img src="../img/瑜伽.svg" style="width: 30px;"/><br/><span>瑜伽</span></div><div class="ui-block-a"><img src="../img/跳绳.svg" style="width: 30px;"/><br/><span><a href="./vegetables.html" style="text-decoration: none;color: black;font-weight: lighter;">跳绳</a></span></div><div class="ui-block-b"><img src="../img/课程.svg" style="width: 30px;"/><br/><span><a href="./fruit.html" style="text-decoration: none;color: black;font-weight: lighter;">趣味课</a></span></div><div class="ui-block-c"><img src="../img/呼啦圈.svg" style="width: 30px;"/><br/><span>呼啦圈</span></div><div class="ui-block-d"><img src="../img/塑形.svg" style="width: 30px;"/><br/><span>塑形</span></div></div></div><div data-role="footer" data-position="fixed" id="footer"><div data-role="navbar"><ul style="border: none;"><li><a href="index.html" data-icon="clock" class="ui-btn-active">首页</a></li><li><a href="../community/community.html" data-icon="eye">社区</a></li><li><a href="../record/record.html" data-icon="check">我的运动</a></li><li><a href="../news/new.html" data-icon="comment">消息</a></li><li><a href="../personal/main.html" data-icon="user">我</a></li></ul></div></div></div>

运行效果

4、社区

运行效果：

5、我的运动

运行效果

记录详情

6、消息

运行效果

7、我

运行效果：

设置

个人资料

jquery mobile项目（一款“运动”移动web）相关推荐

phoneGap+jquery mobile项目经验
最近一个月,一直在用phoneGap+jquery mobile来开发一项目. 下面谈谈自己在开发过程中遇到的一些问题以及解决方法. 开始选择框架时,曾试过采用其他框架做UI,例如chocolat ...
移动web前端框架一、jQuery Mobile
简述:jQuery Mobile是 jQuery发布的针对手机和平板设备.经过触控优化的Web框架.它基于jQuery,在不同移动设备平台上可提供统一的用户界面.该框架基于渐近增强技术,并利用HTML ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响
在本系列文章的开头,Kayo 曾经介绍过 Web App 的优缺点,并且说明了 HTML5 在其中起的作用,当然,Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后 ...
web上渐进使用jQuery Mobile中animate相关CSS
一.关于animate.css 在介绍主人公之前,先说说他的亲戚. 有个叫"蛋一灯(Dan Eden)"的人弄了个名叫animate.css的开源项目,实际上就是使用CSS3 an ...
jQuery Mobile 高级设计模板
来自:http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-jquery-mobile.html 下载: template_1 ...
html实现在线新闻浏览器,使用JQuery Mobile实现手机新闻浏览器
[IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...
jQuery Mobile中文手册：开发入门
jQuery Mobile 以"Write Less, Do More"作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流 ...
jquery mobile android浏览器,我们怎样使用jQuery Mobile实现手机新闻浏览器
大家是否还对这部分知识存在疑问呀,让我来为大家详细解答一下. Mobile项目是jQuery项目下的在方面的又一力作.swift 教程在本文中,笔者将带你一步步更深入学习使用jQuery Mobile ...
jquery mobile android浏览器,使用JQuery Mobile实现手机新闻浏览器
[IT168 专稿]jQuery Mobile项目是jQuery项目下的在移动开发方面的又一力作,在本文中,笔者将带你一步步更深入学习使用jQuery Mobile框架去实现一个能在android手机 ...

jquery mobile项目（一款“运动”移动web）

0 jQuery Mobile介绍

1、登录页

2、注册页面

3、首页

4、社区

5、我的运动

6、消息

7、我

jquery mobile项目（一款“运动”移动web）相关推荐

最新文章

热门文章