JqueryMobile学习笔记01

1.导入JqueryMobile
在 http://jquerymobile.com/download/ 中下载最新的JqueryMobile库

在网页中引入jquery.mobile-*.min.css、jquery.mobile-*.min.js。*为JqueryMobile的版本号。还需要引入Jquery
当然也可以直接外链已有的JqueryMobile和Jquery库,如在jquerymobile的下载页面中给出的例子:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

2.写第一个页面
JqueryMobile的页面

<body>
<!-- data-role="page" 是在浏览器中显示的页面。 -->
  <div data-role="page" id="page1" data-fullscreen="true">
  <!-- 头部data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮) -->
  <div data-role="header" data-position="fixed"><!-- data-position=fixed 填充页面 header与footer一致,不然可能在移动端页面出现上下位移差-->
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文data-role="content" 定义了页面的内容,比如文本, 图片,表单,按钮等。 -->
  <div data-role="content"><!-- 正文部分-->
  厉害吗?<br>
  <a href="#page2">跳往页面2</a>
  </div>
  <!-- 尾部data-role="footer" 用于创建页面底部工具条。 -->
  <div data-role="footer" data-position="fixed">
  <h1>结束了!</h1>
  </div>
  </div>
  </body>

 
data-*主要来源于html5的各种ui元素
在header、content、footer这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。

 

试着写第一个简单交互页面

<html>
  <head>
    <title>首页</title>
<link rel="stylesheet" href="jQuery/JqueryMobile/jquery.mobile-1.4.5.min.css" />
<script src="jQuery/jquery-1.11.2.min.js"></script>
<script src="jQuery/JqueryMobile/jquery.mobile-1.4.5.min.js"></script>
  </head>
  
  <body>
  <div data-role="page" id="page1" data-fullscreen="true">
  <!-- 头部 -->
  <div data-role="header" data-position="fixed">
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文 -->
  <div data-role="content">
  厉害吗?<br>
  <a href="#page2">跳往页面2</a>
  </div>
  <!-- 尾部 -->
  <div data-role="footer" data-position="fixed">
  <h1>结束了!</h1>
  </div>
  </div>
  <div data-role="page" id="page2">
  <!-- 头部 -->
  <div data-role="header" data-position="fixed">
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文 -->
  <div data-role="content">
  厉害!<br>
  <a href="#page3" data-rel="dialog">跳往页面3</a><!-- 以弹窗方式的窗口 -->
  </div>
  <!-- 尾部 -->
  <div data-role="footer" data-position="fixed">
  <h1>页面2结束了!</h1>
  </div>
  </div>
  <div data-role="page" id="page3">
  <!-- 头部 -->
  <div data-role="header" data-position="fixed">
  <h1>欢迎来到我的移动端网页</h1>
  </div>
  <!-- 正文 -->
  <div data-role="content">
  厉害!!<br>
  <a href="#page1">跳往页面1</a>
  </div>
  <!-- 尾部 -->
  <div data-role="footer" data-position="fixed">
  <h1>页面2结束了!</h1>
  </div>
  </div>
  </body>
</html>

  

你可能感兴趣的:(jquery,html5)