首页 > Js开发 > jQuery Mobile使用

jQuery Mobile使用

引用 jQuery Mobile,可以 
jQuery Mobile CDN:

<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>
  • 1
  • 2
  • 3
  • 4
  • 5

也可以下载下来

<head>
<link rel=stylesheet href=jquery.mobile-1.3.2.css>
<script src=jquery.js></script>
<script src=jquery.mobile-1.3.2.js></script>
</head>
  • 1
  • 2
  • 3
  • 4
  • 5

实现一个最简单的页面

<!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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

这里写图片描述

HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。 
请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此: 
每个都是一个page

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

在 jQuery Mobile 中创建按钮 
jQuery Mobile 中的按钮可通过三种方法创建: 
使用 元素 
使用 元素 
使用 data-role=”button” 的 元素

在页脚设置了浮动后,若是设置了按钮的类,就没有效果了。

头部若是设置成浮动和全屏,那么点击空白处能够隐藏标题

<div data-role="header" data-position="fixed" data-fullscreen="true">

本文固定链接: http://www.devba.com/index.php/archives/6257.html | 开发吧

报歉!评论已关闭.