jQuery Mobile入门学习（2）

1、 jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个标记的“data-role”=“page”，形成一个容器或视图；而在这个容器中最直接的子节点应该就是“data-role”属性为“header”、“content”、“footer”3个子容器，分别形成了“标题头/页眉”、“内容”、“页脚”3个组成部分，用于容纳不同的页面内容。
2、 在一个供jQuery Mobile使用的HTML页面中，可以包含一个元素属性“data-role”值为“page”的容器，也允许包含多个，从而形成多容器页面结构。容器之间各自独立，拥有唯一的Id号属性。容器访问时，以内部链接“#” 加对应“Id”的方式进行设置。
3、 header头部的按钮一般不超过2个，设计界面遵循的规则。
4、 使用 data-role=”navbar” 属性来定义导航栏，如果您在导航栏中规定了五个以上的导航栏选项，那么它会弯折为多行。如需在不敲击链接时实现此外观，请使用 class=”ui-btn-active”，即默认选中效果。

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

5、 data-role=”button”按钮

<a href="#" data-role="button" data-icon="home">主页</a>

使用 data-iconpos 属性来指定位置。默认情况下，所有的按钮图标被放置到左侧left。如果只想显示图标，请设置 data-iconpos =”top/right/bottom”。
6、 页脚设置类名 “ui-btn”可实现居中

<div data-role="footer" class="ui-btn">

7、 修改搜索框默认提示信息请使用 data-filter-placeholder 属性。

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

8、 如需创建列表，请向

1. 或
   • 元素添加 data-role=”listview”。如需为列表添加圆角和外边距，请使用 data-inset=”true” 属性。

<ul data-role="listview" data-inset="true">
class="ui-li-aside"在文字显示中，把文字内容放到界面的右上角。

9、 如需规定列表分隔符（归类展示），请向 li 元素添加 data-role=”list-divider” 属性。如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 ol 或 ul 元素上设置 data-autodividers=”true” 属性。

<ul data-role="listview" data-autodividers="true">

10、 如需在列表中添加搜索框，请使用 data-filter=”true” 属性

<ul data-role="listview" data-filter="true"></ul>

11、 这里有四种布局网格可供使用：

12、 可折叠的内容块，请向某个容器分配 data-role=”collapsible” 属性。如需在页面加载时扩展内容，请使用 data-collapsed=”false”。

  <div data-role="collapsible" data-collapsed="false">

13、手风琴可折叠集合，通过 data-role=”collapsible-set” 用新容器包装这个可折叠块。

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div>
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠！</h1>
    <p>我是被展开的内容。</p>
  </div></div>

14、使用 data-position 属性来定位页眉和页脚，页眉固定如下：

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

15、如果需要启用全面定位，请使用 data-position=”fixed”，并向该元素添加 data-fullscreen 属性，如下触摸屏幕将隐藏和显示页眉及页脚：

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

16、 Bootsrap官网：http://www.bootcss.com/
可以用上bootscrap来做轮播图等等效果，实现demo