对jquery mobile的学习过程一
来源:互联网 发布:男淘宝头像图片大全 编辑:程序博客网 时间:2024/06/05 06:13
博主以前对于pc端使用的总是喜欢用html5+css3+javascript+jquery,对移动端总是爱使用原生的js和jquery包括jqueryui,同时也经常会使用bootstrap这种响应似的框架。
最近本人从新认识了jquery本身自带的jquery mobile框架感觉里面的很多功能都是非常的好用无论是动态效果还是网页之间的相互传值都处理的相当的适合。
下面本人想将自己学习jquery mobile的一个过程写成博客,一方面是为了方便与其他博主进行交流另一方方面也是为了更好的提高自己来学习新的技术。
1.当然是jquery mobile的安装,这个熟悉前端开发的工程师应该都不会陌生只用去jquerymobile的官网下载最新的版本然后通过script引入就可以了,这个跟jquery的使用
方式是一样的。
2.jquerymobile的页面
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="content">
<p>现在我已经成为一名移动开发者!</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>
- data-role="page" 是显示在浏览器中的页面
- data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
- data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
- data-role="footer" 创建页面底部的工具栏
3.在jquery mobile中添加页面
<div data-role="page"id="pageone"
> <div data-role="content"> <a href="#pagetwo">转到页面二</a> </div></div><div data-role="page"id="pagetwo"
> <div data-role="content"> <a href="#pageone">转到页面一</a> </div></div>
<a href="externalfile.html">转到外部页面</a>
- 对jquery mobile的学习过程一
- jQuery Mobile 学习一
- 【jQuery Mobile学习】jQuery Mobile页面(一)
- jQuery Mobile学习(一)
- jQuery Mobile学习一:前言
- 【学习】一本案例驱动的jQuery Mobile入门书
- jquery mobile学习教程之初识Jquery mobile 一
- jQuery Mobile 学习笔记(一)
- 对Jquery DataTables的学习(一)
- jquery-mobile过程
- jQuery源码学习一:对jQuery对象的一点思考
- jQuery Mobile笔记一
- jQuery Mobile笔记一
- jQuery Mobile笔记一
- jquery-mobile(一)
- jquery mobile 按钮(一)
- Html5学习-JQuery mobile(一)学习使用
- JQuery Mobile 开发学习手记(一):JS批量设置按钮动作的问题
- 哈理工oj 1266 斐波那契数列
- TensorFlow栗子:生成式对抗网络应用在mnist
- RS-485总线通信协议
- 51Nod-1573-美丽的集合
- Temporal Action Proposal 论文分享
- 对jquery mobile的学习过程一
- 安卓模拟器
- NOIP2017 模拟考试 day2 2017.10.07
- tomcat集群搭建
- 动态树(一)
- 系统工具
- 无人零售场景、技术全解读:伪需求or真风口?【附下载】| 智东西内参
- 简明Github Pages与Hexo教程
- c/c++ 字符转换为数字