jquery.mobile 中 collapsible-set collapsible listview 共同布局问题_html/css_WEB-ITnose

最近项目用上了jquery.mobile这货，在手机上做点简单的显示。之前只知道有这个框架，没把玩过。

特别是事件绑定方面，相比桌面系统下浏览器用着各种不爽，不得要领。

如下图，在做后台系统时，一般左侧都是一个个模块及下属菜单项，可展开折叠。

 

我的问题卡在了累计评价这块，为了页面复用，累计评价中嵌套了iframe做评论显示。

第一槛

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

查资料最终搞定，手机屏毕竟小，评论多的时候不可能像电脑浏览器上的页面搞一排的翻页按钮，这样体验实在太差了。

现在一般都是滚动加载，写DEMO在电脑上先跑一下，可行！换手机上，先用个android机试试，可行，满心以为可以。

换用iphone 只是滚动条的问题解决了，我的滚动加载呢。反复滑动还是没反应，心都凉了。这里要说个邪乎的事，在QQ, 微信中又是可以的，是在是怪哉。

 

再这么耗下去也没什么结果，还是另寻它法吧。第一想到在单独的页面去做这事。于是遇到第二槛。

<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text"  >累计评价</a></li>                    </ul>                </div>

上面对应累计评价部分，在点击后打开页面样式全乱了包括js事件都没执行。f12看代码，除了body 中的html 元素，head中部分，页面底部的js全没了。

要不要这么坑啊。问同事有没遇到这样的问题，说加上rel="external"就好了，别说真行。于是代码变成了如下：

<div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累计评价</a></li>                    </ul>                </div>

注：rel=’external'与target=''_blank''相似，意思在新的页面打开

第三槛，也就是标题中提到的问题(头部图片是最终效果)

collapsible listview 这两伙伴水火不容，死活调不出比较好的布局效果，瞎鼓捣时加了个空的collapsible居然可以了。

最终让它们在一起了。collapsible 图标默认是+，listview项时右箭头，将图标统一。累计评价默认并不是上图那样。

到此问题都扫清，完整页面如下：

                                            
        
            
                
                    
医院介绍
                    
                
                
                    
套餐相关信息
                    
                
                
                    
使用须知
                    
                
                
                    
查看地图
                    
                
                
                
                <div data-role="content" style="border: solid #CCC; border-width: 0 1px;">                    <ul data-role="listview">                        <li><a id="pjList" href="xxx" class="ui-btn-text" rel="external">累计评价</a></li>                    </ul>                </div>            
        
    

 

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn