UI组件

    jQuery Mobile为web应用准备了相当多的ui组件。我们可以使用普通的HTML和CSS来添加内容及实现各种创意。为了兼容各个平台，优先使用框架提供的各种组件。

     工具栏：

    工具栏在Web应用中是可选的，用于定义页头以及/或者页脚的区域。页头及页脚都是可选的，不过基本上么个移动web应用都有页头。

    每个工具栏（页头或页脚）都可以用四种方法定位：

• 内联模式；
• 标准固定模式；
• 全屏固定模式；
• 真实固定模式；

    内联模式是各个工具栏的默认模式。也就是如果页面的内容长度超出可见高度时页脚将被隐藏，直到向下拖到滚动条，同时页头只在滚动条在顶部时才可见。

    data-position=“fixed”固定模式。无论页面内容有多长以及初始化状态下滚动条的位置在哪儿，固定工具栏都将位于页面顶部（用于页头）或底部（用于页脚），不过页面滚动时，工具栏将被隐藏。

    对固定及全屏工具栏来说，用户可以通过点击内容区域来显示或隐藏固定工具栏，差别在于对全屏模式来说，工具栏会真正被隐藏起来，而对固定模式来说，工具栏会转为内联定位。

    全屏工具栏定义：data-position="fixed"并在当前页面上定义data-fullscreen=“true”。  

     页头的按钮

    强制指定按钮的位置，可以使用css类：class="ui-btn-right"或class="ui-btn-left"

    在页头中显示一个图片以及标准的左右按钮的话，最好的方式是在对应的h1中使用img标签，页头会自动适应图片的高度：

    <div data-role="header">

        <a href="cancel"  data-icon="delete">cancel</a>

        <h1><img src="images/logo.png"></h1>

        <a href="save" data-icon="check" data-theme="b">save</a>

    </div>    

    记住使用jQuery Mobile的目标是同时适用不同的屏幕尺寸和分辨率。

    自定义页头：将页头的内容放到一个块容器中，可以禁用自动页头行为。

    自定义页头可以用来添加表单元素，如用于过滤或菜单访问的下拉列表或复选框。

    例子：

        <div data-role="header">

            <div>

                <h1>A custom title</h1>

                <a href="#">a non-button link</a>

            </div>

        </div>

    自定义页头需要自己编写html及css代码黑醋栗。页头的高度会自动适应自定义的内容。

    页脚：jQuery  Mobile不会在按钮与页脚边框之间添加内边距。为了让视觉外观更好一些，应该在页脚sh昂添加一个ui-bar类。

    导航栏（navbar）

    导航栏只是一个容器，通常为一个div元素，内容为一个包含各个导航链接的无序列表。容器的role需要被指定为navbar。

    最好将导航栏的元素控制在6个以下，以便让它们全部显示在一起。按钮限制为5的原因是在大多数智能手机上，屏幕的五分之一宽度是适合触摸区域的最小推荐宽度。

     使用图标：data-icon属性以及标准的图标名，也可以使用自己的图标来自定义。一个使用图标则全部去适用有图标的高度。jQuery Mobile使用CSS Sprites技术来减少图标对应的图片加载，图标有低分辨率版和高分辨率两个版本，框架会自动决定使用哪个版本。

     被选中的元素：class="ui-btn-active"标识。被选中的状态使用一种不同的色样清晰地显示。    

     固定页脚

    导航栏有一点需要理解，如果改变了当前jQuery Mobile文档，则当前页脚会被移除，然后显示一个新的页脚。

    创建固定工具栏，只需在每个需要的页面的固定页脚上定义一个data-id标识。然后，任何有相同data-id的页脚页面都将保持前一个页脚而不会更新。

    如何保持页脚的选中状态：ui-btn-active和ui-state-persist。    

     格式化内容

    jQuery Mobile的每个主题都包含良好的样式，其中每个标准元素的内边距、外边距、尺寸以及颜色都已经针对当前主题及移动设备优化过，被定义过样式的元素包括hx、链接、粗体及斜体文本、引用、列表以及表格。

    可折叠内容：data-role=“collapsible” data-collapsed=“true”来让它默认收起。容器中没有定义hx元素，则内容将处于打开状态且不能收起。定义多个hx元素，则第一个会被用作标题。

   手风琴部件

    jQuery Mobile以可折叠集合的形式支持这种部件。也就是一个带有data-role=“collapsible-set”的容器以及一组作为子元素的可折叠面板。可折叠应用data-theme或data-content-theme时，除非另有定义，否则所有的子元素都将继承这些值。

   列

    将内容按列显示的模板，称为排版网格。除非是表格类型的数据，不然不要使用table排版。

    创建网格只需使用块容器，典型情况为div，类ui-grid-a表示两列，ui-grid-b表示三列，ui-grid-c表示四列，ui-grid-d表示五列。默认情况下，网格的各列宽度相同。

    每个单元格都应该是一个带ui-block-<letter>的块容器，其中<letter>的值为a到e，分别表示网格的第一至第五列。   

    按钮

    创建按钮的方式：

    使用button元素；

    使用会被渲染为按钮的input元素，包括type=“button”、type=“submit”、type=“reset”以及type=“image”；

    任何带有data-role=“button”的a元素。

    jQuery Mobile 的按钮一般的渲染效果为带有居中的文字、圆角及阴影，取决于浏览器对CSS3的支出情况。

    显示一组按钮式，一个良好的ui设计模式是让那个肯定按钮或者最有可能被点击的按钮使用与众不同的主题。

     内联按钮

    data-inline=“true”来创建内联按钮，这种按钮不会占满屏幕宽度。可使用网格定义按钮的布局。

     分组按钮

    控件组只是一个容器，一般为一个带data-role=“controlgroup”的div元素。 默认为垂直方向上彼此相连。也可以通过在控件组上使用data-type=“horizontal”属性来创建一个水平布局（按钮数少于五个，且文案较短）。

     效果

    每个按钮都被渲染为带圆角和阴影，可以通过布尔值属性data-cornters和data-shadow来改变这个行为。

    创建自定义图标

    推荐的命名机制为<应用名>-<图标名>,例如：myapp-tweet。

    jQuery Mobile还需我们创建一个名为ui-icon-<name>的css类。图标应该是白色（或透明）背景，18*18像素，带alpha透明的png-8格式。图标不应该带边框，使用列表视图时框架会自动添加边框。图标还应该比18*18像素小一些，因为它将被渲染在一个18像素宽的圆形中。同时，由于图标会被绘制在圆形中，所以不要使用边角。

  自定义图标在视网膜显示屏的高分辨率设备上无法工作，因为还需要一个该图标的高分辨率版本。图片应该扩大一倍至36*36像素。

    例如：<style>

    .ui-icon-myapp-tweet{//所以分辨率

        background-image:url(icons/tweet.png);   

    }

    @media only screen add（ -webkit-min-device-pixel-ratio:2）{//两倍于标准分辨率的设备

                .ui-icon-myapp-tweet{

                background-myapp-tweet{

                background-image:url(icons-hd/tweet.png) !important;

                background-size:18px 18px;

            }

        }

    }

</style>

  图标位置

    data-iconpos属性来改变这个位置，可用的值有right、left（默认值）、bottom以及top。使用botton或top时，按钮的高度会增加，在导航栏或水平分组按钮中这两个属性特别有用。

     纯图标按钮

    data-iconpos="notext"

     图标阴影

    data-iconshadow=“false”