这一章介绍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;
});