对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>