jQuery Mobile学习笔记（七）——主题与打包

这一章介绍JQM主题和JQM APP的打包：

主题

JQM允许开发者通过调整主题和CSS来定制整套用户界面。JQM的每一个样式都能用CSS来覆盖。

主题是一组配色方案，包括

• 文字颜色
• 背景颜色和渐变
• 字体

每个主题都包含一个全局定义，适用于主题内的所有色样。比如：文本效果和盒效果（阴影和圆角）、按钮和其他控件的激活状态。这样可以确保无论主题用哪个字样都能保持一致的用户体验。

创建主题：
ThemeRoller是一个在线编辑主题的工具。地址
FIreworks主题编辑器（Commands-JQM-Create New Theme）

编辑主题：
主题其实就是一个CSS文件，所以我们也可以用任何一个文本编辑器去修改主题。
HTML标记中的每一个小部件都会被转换成被若干CSS类所修饰的元素。每个类名都有一个ui前缀，它的后缀是所套用的色样，类似于ui-<名字>-<色样>，拿按钮来说，套用色样a的按钮的类名就是ui-btn-a。
常见的主题CSS文件中定制用户界面的类：

• ui-bar-<*> : 页头、页脚以及其他条栏
• ui-btn-up-<*> : 常态下的按钮
• ui-btn-hover-<*>: 悬停状态下的按钮
• ui-btn-down-<*> : 按下状态的按钮
• ui-btn-active-<*>: 激活状态下的按钮
• ui-body-<*> : 页面内容区
• ui-link-<*> : 链接
• ui-icon-<*> : 按钮和其他小部件用到的图标
• ui-corner-all ： 应用与所有使用到圆角的控件
• ui-corner-< tl/tr/bl/br >：应用于左上角、右上角、左下角、右下角的圆角
• ui-corner-< top/bottom >：应用于顶部、底部的圆角
• ui-corner-< left/right >：应用于左边、右边的圆角
• ui-shadow：应用于所有需要阴影的元素
• ui-disabled：应用于所有在HTML上被禁用的元素

页面过渡：
如果定义一个card的过渡，就需要为.card.in和.card.out各定义一个选择器。此外，还可以定义一个逆向过渡，用于页面返回。为此添加相应的reverse类，即需要定义.card.in.reverse和.card.out.reverse。

.card.out {
   -webkit-transform: translateY(-100%);
   -webkit-animation-name: cardout;
   z-index: 1; /* It's above */
}

.card.in {
   -webkit-transform: translateY(0);
   z-index: 0; /* It's below */
}

@-webkit-keyframes cardout {
   from {
       -webkit-transform: translateY(0%);
   }

   to {
       -webkit-transform: translateY(-100%);
   }
}

把这一部分定义添加到主题CSS文件或者另一个单独的CSS文件中，要用时，只需要通过data-transition属性或JavaScript定义它就可以了。

<a href="#page2" data-role="button" data-transition="card">Page 2</a>

打包

可以使用PhoneGap打包或者选用国产的H5 builder。
打包之前的注意事项：
1.浏览器工具条没有了，所以必须有一个后退按钮。
2.加载外部页面问题。在创建应用时，我们可以加载本地的随应用一起发布的HTML页面。如果需要从一个外部的URL来加载JQM的文档，我们可以在mobileinit事件的处理程序中设置$.support.cors=true，允许框架使用AJAX访问远程服务器。同时还需要设置$.mobile.allowCrossDomainPage=true.JQM建议关闭pushState，以避免和URL管理产生冲突。
所以一般在HTML入口页面应该包含这样一段代码：

$(document).bind("mobileinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.pushState = false;
});