2.11 jquery'

Query Mobile 是用于创建移动 Web 应用的前端开发框架。

jQuery Mobile 可以应用于智能手机与平板电脑。

jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。

data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本，图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>

<div data-role="main" class="ui-content">
<p>我现在是一个移动端开发者!!</p>
</div>

<div data-role="footer">
<h1>底部文本</h1>
</div>
</div>
</body>
</html>
创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。接着我们为 <div> 指定 id，然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容。

注意: <div> 弹窗与点击的 <a> 链接必须在同一个页面上。
在 jQuery Mobile 中，按钮可通过三种方式创建：
- 使用 <button> 元素
- 使用 <input> 元素
- 使用带有 data-role="button" 的 <a> 元素
- 头部栏
  
  头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。
  
  您可以添加按钮到头部的左侧或右侧。
  
  下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧：
- <!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
  
  <div data-role="page">
  <div data-role="header">
  <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
  <h1>欢迎访问我的主页</h1>
  <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
  </div>
  
  <div data-role="main" class="ui-content">
  <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
  </div>
  </div>
  
  </body>
  </html>
- 面的代码，将添加一个按钮到头部标题文本的左侧：
- <!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
  
  <div data-role="header">
  <a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
  <h1>欢迎访问我的主页</h1>
  </div>
  
  </body>
  </html> 表格
- 响应式设计一般用于适配用户各种移动设备。
  
  我们只需要使用一个简单的类名，jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。
  
  响应式表格让页面内容在移动端和桌面设备上能够很好的适配。
  
  响应式表格有两种类型： reflow(回流) 与 列切换。
  
  回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。
  
  创建表格，在 <table> 元素上添加 data-role="table" 和 "ui-responsive" 类:、
- 博客园观看

头部栏

猜你喜欢