1 固定header:
data-position="fixed",如果仅仅是加了这个属性,当页面出现滚动条的时候点击页面内容,header还是会隐藏显示全屏,如果不需要这样,加入这个属性即可:data-tap-toggle="false" 关于jqm Data的属性可以查阅这个链接:http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp
2 jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:
listview: 添加 jq(".detail").listview("refresh"); div或其他: 添加.trigger( "create" ); jq(".XXX").append("XXX"); jq(".detail").listview("refresh") jq("#XXX").append("XXX").trigger( "create" );
3 jquerymobile文件组织
从 JQuery mobile 1.4 开始, CSS 由3个部分组成,分别是 Icons、Theme和Structure jquery.mobile-1.4.x.css: 包括了 <标准图标库>、Theme 和 Structure; jquery.mobile.external-png-1.4.x.css: 包扩了 <外置PNG图标库>、Theme 和 Structure; jquery.mobile.icons-1.4.x.css: 标准图标库, 包括 <内置SVG图标库>和<外置PNG图标库>, 浏览器将优先先使用 <内置SVG图标库>, 如果不支持则退化为使用 <外置PNG图标库>;也可以将 html 标签修改为 <html class="ui-nosvg"> 强制使用 <外置PNG图标库>; jquery.mobile.inline-png-1.4.x.css:内置PNG图标库 jquery.mobile.inline-svg-1.4.x.css: 内置SVG图标库 jquery.mobile.structure-1.4.x.css: Structure, 如果要自定义主题,可按以下顺序引用: jquery.mobile.icons-1.4.x.css, jquery.mobile.structure-1.4.x.css, custom.theme.css jquery.mobile.theme-1.4.x.css: Theme, 即标准主题
4 jqm事件重复绑定解决
$(document).on("pageinit", "#page2", initPage2); function initPage2(event) { $(document).off('pageinit', '#page2', initPage2); alert("page2 init" + event.target.baseURI); };