jquery-mobile遇到的问题

来源：用户分享时间：2025/5/20 19:57:35 本文由

说明：文章内容仅供预览，部分内容可能不全，需要完整文档或者需要复制内容，请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ：xxxxxx 处理（尽可能给您提供完整文档），感谢您的支持与谅解。

1、在浏览器中点击一个链接打一个新的页面时，jQuery Mobile接收这个链接，通过AJAX的方式请求链接页面，并把请求得到的内容注入到当前页面的DOM里而不是新创建一个dom，所以不会加载链接页面的js。这样会导致用户手动刷新页面时只有当前页面的js有效，也不能根据转场页面自动加载js，所以需要在第一个页面就加载所有的js。

解决方法：把所有的js在访问的第一个页面就全部加载进来，所有的page都写在一个文件里。

2、因为所有的page在一个页面,而且只有一个dom，所以id不能重复

解决方法：每个page的元素的id加后缀来区别

3、对话框dialog的问题，对话框会把整个page覆盖住，页面四周没有被占满的会是黑色的解决方法：不用dialog，改用弹出层popup

4、弹出层popup,没有模态效果，点击其他位置，会消失不见解决方法：page初始化时，增加样式id为弹出层的id $(\

popupbeforeposition: function () { $('.ui-popup-screen').off(); }});

5、弹出弹出层

通过标签弹出弹出层

弹出

标题

data-icon=”delete” data-iconpos=”notext” class=”ui-btn-right”>

通过js代码调用弹出层 $(\初始化

$(\打开

$(\关闭

弹出位置data-position-to=“window”,在屏幕的中央，origin:在所单击的控件的上面，“#id”在指定的组件为id的上面 6、分组的listview collapsible

data-inset=\ class=\

标题AAABBB

AAAAAAAAA
BBBBBBBBB

标题CCCCCDDDD

CCCCCC
DDDDDDDDD

js代码刷新$(\7、单选按钮

$(\刷新 8、下拉菜单select

$(\

9、input[type=radio] 和label联合使用时，及获取label的值解决方法：

radio1

$(\ $(this).next().text()); //被点击的radio的label的值 }) 10、时间组件mobiscroll-2.2.custom.min.js 的使用 obj=$(\为文本框的id function getDateTime(obj){ var now = new Date(); obj.scroller({

preset: 'datetime', theme: 'default', display: 'modal', mode: 'scroller', }); }

$(\获取时间

参考文档：http://demo.mobiscroll.com/datetime/datetime 11、listview js代码刷新

$(\

12、判断是否登录

解决方法:因为只有一个页面，所以不能用filter来拦截，所以在每个Page初始化通过js判断有没有登录，如果没有登录window.location.href=”login.jsp” 13、页面转场

标签:

toPage

js代码实现转场

$.mobile.changePage(“#pageID”,{transition:pop}) Transition转场效果：{fade，slide，pop，。。。等} 14、弹出层的最大宽度等于手机屏幕的宽度 Style=”max-width:$(window).width();” 15、固定header和footer,使不随滚动条滑动 Data-position=”fixed”