jquery.mobile常用布局遇到的问题总结

最近在项目中使用了jquery.mobile，在手机上简单展示了一下。以前只知道有这个框架，从来没玩过。

特别是在事件绑定方面，相比桌面系统下的浏览器，浏览器使用了各种不愉快的东西，跑题了。

如下图，做后台系统时，左侧有模块和下级菜单项，可以展开和折叠。

我的问题卡在累积评价里。对于页面重用，iframe嵌套在累积评估中，用于注释显示。

第一个门槛

开发过移动WEB的同学应该知道，当IOS浏览器下的iframe内容过多时，滚动条不会出现，内容似乎被截断了。

查完资料，手机屏幕毕竟小。评论多的时候，不可能做出一排像电脑浏览器上页面一样的翻页按钮。这次经历真的很糟糕。

现在一般都是滚动加载，所以先写DEMO在电脑上运行是可行的！换手机，先试试安卓机，可行，我觉得还行。

切换到iphone只是解决了滚动条问题。我的卷轴加载怎么办？反复滑还是没反应，心也凉了。在QQ和微信这里说一件邪恶的事情没关系，但是现在很奇怪。

继续这样消费是不会有结果的。让我们找到另一种方法。第一个想法是在另一页上做。于是我遇到了第二个门槛。

复制的代码如下： div数据-角色=' content ' style=' border 3360 solid # CCC；边框-宽度： 0 1px；'Ul数据-角色=' listview ' lia id=' pjlist ' href=' XXX ' class=' ui-BTN-text '累积评估/a/li /ul /div。

对应上面的累积评价部分，点击后打开的页面样式完全混乱，包括js事件都不执行。查看f12中的代码，除了正文中的html元素之外，头部页面底部的js都不见了。

你想这么坑吗？问同事有没有遇到这样的问题，说加rel='external '就好了，但是不要说。所以代码如下：

复制的代码如下： div数据-角色=' content ' style=' border 3360 solid # CCC；边框-宽度： 0 1px；'Ul数据-角色=' listview ' lia id=' pj list ' href=' XXX ' class=' ui-BTN-text ' rel='外部'累积评估/a/li /ul /div。

注意：rel='external '类似于target=''_blank ' '，意思是在新页面上打开。

第三个门槛是题目中提到的问题(头像是最终效果)。

可折叠listview互不兼容，无论生死都无法获得更好的布局效果。摆弄的时候加个空的可折叠就可以了。

终于让他们走到了一起。默认情况下，图标是可折叠的，listview项是右箭头，它统一了图标。默认情况下，累积评估不如上所示。

复制的代码如下： div数据-角色=' content ' style=' border 3360 solid # CCC；边框-宽度： 0 1px；'

此问题已被清除，完整页面如下：

复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title/title meta charset=' utf-8 ' meta name=' viewport ' content=' width=device-width，初始比例=1.0,最大比例=1.0,/Scripts/mobile/jquery。移动一号。3 .2 .量滴CSS '/脚本src=' http :/Scripts/mobile/jquery-1。8 .3 .量滴js ' type=' text/JavaScript '/script script src=' http :/Scripts/mobile/jquery。移动一号。3 .2 .量滴js ' type=' text/JavaScript '/脚本样式type=' text/CSS ' .Helvetica，无衬线字体，微软雅黑；}/style/head dy分区数据-角色=' page ' id=' page one ' data-add-back-BTN=' true ' data-overlay-theme=' a ' div data-角色=“内容”div数据-角色='折叠-设置'数据-图标位置='右侧'数据-主题=' c '数据-内容-主题=' d '数据-展开-图标='箭头-u '数据-折叠-图标='箭头-d ' div数据-角色='可折叠' h3医院介绍/h3 p/p /div数据-角色='可折叠h3套餐相关信息/h3 p/p /div数据-角色='可折叠h3使用须知/h3 p/p /div数据-角色='可折叠h3查看地图/h3 p/p /div数据-角色='可折叠/div数据-角色='内容'样式=' border:固体# CCC边框-宽度' : 0 1px'保险商实验所数据-角色=' listview ' lia id=' pjList ' href=' XXX ' class=' ui-BTN-text ' rel=' external '累计评价/a/Li/ul/div/div/body/html

以上就是本文的全部内容了，希望大家能够喜欢。