Jquery Mobile 入门1 （介绍&组件1）

来源：互联网发布：灰色关联分析法编程编辑：程序博客网时间：2024/04/29 20:16

jquery mobile 入门1

一. jQuery Mobile 简介

1. 需要引入的文件

要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容：

CSS文件jquery.mobile-1.4.5.min.css
jQuery类库文件 jquery.min.js
jQuery Mobile文件 jquery.mobile-1.4.5.min.js

2. 页面结构

一个jQuery Mobile页面时你需要创建三块基本内容（头，正文，尾）

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏

在jQuery Mobile中，可以在单一 HTML 文件中创建多个页面。通过唯一的id来分隔每张页面

3.常用组件1

jQuery Mobile中的一个“page”结构一般使用一个DIV来组织。

二 . 组件1

1）按钮

　在jQuery Mobile中，按钮可通过三种方式创建：

使用 < button > 元素
使用 < input > 元素
使用带有 data-role="button" 的 < a >元素

默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"，如果想组合按钮，可以使用 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮。

2）折叠块

可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的 HTML 标记，默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"：

<div data-role="collapsible" data-collapsed="false">
    <h1>点击我 - 我可以折叠!</h1>
    <p>我是可折叠的内容。</p>
</div>

注：可折叠块允许嵌套

3）面板

　jQuery Mobile中的面板会在屏幕的左侧向右侧划出。可以通过指定id的div元素添加 data-role="panel" 属性来创建面板。

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

panel标记必须置于头部、内容、底部组成的页面之前或之后。

要访问面板，需要创建一个指向面板的链接，点击该链接即可打开面板：

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

默认情况下，面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧，可以指定 data-position="right" 属性。

可以通过使用 data-display 属性来控制面板的展示方式:

divdata-role="panel"id="overlayPanel"data-display="overlay">
<divdata-role="panel"id="revealPanel"data-display="reveal">
<divdata-role="panel"id="pushPanel"data-display="push">

可以使用按钮来关闭面板：仅需要在面板的div中添加 data-rel="close" 属性。

<div data-role="panel" id="myPanel"> 
  <h2>面板头部..</h2>
  <p>面板中的一些文本内容..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">关闭面板</a>
</div>

4）toolbar

工具栏元素通常位于头部和尾部内，让导航易于访问。

　　头部栏一般包含页面标题或一两个按钮（通常是首页、选项或搜索），我们通过class属性来控制。例如要在标题左侧展示一个主页按钮，若是在右侧则class='ui-btn-icon-right'。如下代码：

<div data-role="header">
  <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主页</a>
  <h1>欢迎访问我的主页</h1>
</div>

　　尾部栏比头部栏更灵活，在整个页面中它们更具功能性和可变性。因此可以包含尽可能多的按钮,还可以将尾部中的按钮进行水平或垂直组合。如下代码：

<div data-role="footer" style="text-align:center;">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">后退</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">主页</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">前进</a>
  </div>
</div>

头部和尾部可以通过三种方式进行定位，通过属性data-position来控制：

Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

5）navbar

导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。默认情况下，导航栏中的链接将自动变成按钮，使用 data-role="navbar" 属性来定义导航栏，可以使用 data-icon 属性为导航按钮添加图标:

<div data-role="header">
<div data-role="navbar">
    <ul>
      <li><a href="#anylink" data-icon="home">首页</a></li>
      <li><a href="#anylink" data-icon="arrow-r">页面二</a></li>
      <li><a href="#anylink" data-icon="search">搜索</a></li>
    </ul>
</div>
</div>

　　data-icon 属性有很多，如home、search、alert、audio、refresh等等。　　

　　当导航栏中的某个链接被点击，它将获得被选中（按下）的外观，在不点击链接时获得这种外观，使用class="ui-btn-active"：

<a href="#anylink" class="ui-btn-active">首页</a>

6）弹窗

弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。弹窗可用于显示一段文本，图片，地图或其他内容。创建一个弹窗，需要使用 < a > 和 < div > 元素。在 < a > 元素上添加 data-rel="popup" 属性， < div > 元素添加 data-role="popup" 属性。接着我们为 < div > 指定 id，然后设置 < a > 的 href 值为 < div > 指定的 id。 < div > 中的内容为弹窗显示的内容，可以用 data-rel="back"属性与样式来实现弹窗的关闭。

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
<div data-role="popup" id="myPopup" class="ui-content">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
    <p>右上角关闭按钮</p>
    <p><b>提示:</b> 你也可以通过点击弹窗外的区域来关闭弹窗。</p>
</div>

0 0