JQuery Mobile难点备忘
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);
};
分类:
JQueryMobile
, HybridAPP
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？