jQuery Mobile 学习二



                                                               jQuery Mobile 学习二

在 jQuery Mobile 中创建按钮

jQuery Mobile 中的按钮可通过三种方法创建：

• 使用 元素
• 使用 元素
• 使用 data-role="button" 的 元素

按钮

data-role="button">按钮

提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。推荐使用 data-role="button" 的 元素来创建页面之间的链接，而 或 元素用于表单提交

导航按钮

如需通过按钮来链接页面，请使用 data-role="button" 的 元素：

转到页面二

行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"：

转到页面二

组合按钮

jQuery Mobile 提供了对按钮进行组合的简单方法。

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮：

  按钮 1
  按钮 2
  按钮 3

提示：默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。

后退按钮

如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）：

返回

按钮的其他属性有：

data-corners     规定按钮是否有圆角。        值：true | false

data-mini          规定是否是小型按钮。        值：true | false

data-shadow    规定按钮是否有阴影。        值：true | false

按钮添加图标

 jQuery Mobile 提供的一些可用图标如下：

data-icon="arrow-l"                          左箭头

data-icon="arrow-r"                          右箭头

data-icon="delete"                           删除

data-icon="info"                               信息

data-icon="home"                           首页                   

data-icon="back"                            返回

data-icon="search"                        搜索

data-icon="grid"                             网格

定位图标

图标被放置的位置：上、右、下或左。使用 data-iconpos 属性来规定位置   

上
右
下
左

如果加上data-iconpos 设置为 "notext“，将只显示图标

jQuery Mobile 工具栏

工具栏元素常被放置于页眉和页脚中 - 以实现“已访问”的导航

页眉通常会包含页眉标题/LOGO 或一到两个按钮（通常是首页、选项或搜索按钮）。

您可以在页眉中向左侧或/以及右侧添加按钮。

下面的代码，将向页眉标题文本的左侧添加一个按钮，并向右侧添加一个按钮：

  首页
  
欢迎来到我的主页
  搜索

提示：页眉可包含一个或两个按钮，然而页脚没有限制。

与页眉相比，页脚更具伸缩性 - 它们更实用且多变，所以能够包含所需数量的按钮：

  转播到新浪微博
  转播到腾讯微博
  转播到 QQ 空间

注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 "ui-btn"：

定位页眉和页脚

放置页眉和页脚的方式有三种：

• Inline - 默认。页眉和页脚与页面内容位于行内。
• Fixed - 页面和页脚会留在页面顶部和底部。
• Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through

请使用 data-position 属性来定位页眉和页脚：

Inline 定位（默认）

Fixed 定位

Fullscreen 定位

data-fullscreen="true">

data-fullscreen="true">

jQuery Mobile 导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

请使用 data-role="navbar" 属性来定义导航栏：

  

    

      
首页
      
页面二
      
搜索
    
  

提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。

活动按钮

当导航栏中的链接被敲击时，会获得选取外观（按下）。

如需在不敲击链接时实现此外观，请使用 class="ui-btn-active"：

首页

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类：

jQuery Mobile 可折叠

可折叠的内容块

可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。

如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：

  
点击我 - 我可以折叠！
  
我是可折叠的内容。

默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：

嵌套的可折叠块

可以嵌套可折叠内容块：

  
点击我 - 我可以折叠！
  
我是被展开的内容。
  

    
点击我 - 我是嵌套的可折叠块！
    
我是嵌套的可折叠块中被展开的内容。
  

可折叠集合

可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。

创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块：

  

    
点击我 - 我可以折叠！
    
我是被展开的内容。
  
  

    
点击我 - 我可以折叠！
    
我是被展开的内容。
  

jQuery Mobile 布局网格

jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。

但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。

网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。

可使用的布局网格有四种：

网格类	列	列宽度	对应	实例
ui-grid-a	2	50% / 50%	ui-block-a|b	测试
ui-grid-b	3	33% / 33% / 33%	ui-block-a|b|c	测试
ui-grid-c	4	25% / 25% / 25% / 25%	ui-block-a|b|c|d	测试
ui-grid-d	5	20% / 20% / 20% / 20% / 20%	ui-block-a|b|c|d|e	测试

提示：在列容器中，根据不同的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。

实例 1: 对于 ui-grid-a 类（两列布局），您必须规定两个子元素 ui-block-a 和 ui-block-b。

实例 2: 对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。