jquery.mobile 共同布局遇到的问题小结


Posted in Javascript onFebruary 10, 2015

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

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

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

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;">

到此问题都扫清,完整页面如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="format-detection" content="telephone=no" />

    <link rel="stylesheet" href="../Scripts/mobile/jquery.mobile-1.3.2.min.css" />

    <script src="../Scripts/mobile/jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="../Scripts/mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

    <style type="text/css">

        .ui-btn-text

        {

            font: bold 14px Arial,Helvetica, sans-serif, 微软雅黑;

        }

    </style>

</head>

<body>

    <div data-role="page" id="pageone" data-add-back-btn="true" data-overlay-theme="a">

        <div data-role="content">

            <div data-role="collapsible-set" data-iconpos="right" data-theme="c" data-content-theme="d"

                data-expanded-icon="arrow-u" data-collapsed-icon="arrow-d">

                <div data-role="collapsible">

                    <h3>医院介绍</h3>

                    <p></p>

                </div>

                <div data-role="collapsible">

                    <h3>套餐相关信息</h3>

                    <p></p>

                </div>

                <div data-role="collapsible">

                    <h3>使用须知</h3>

                    <p></p>

                </div>

                <div data-role="collapsible">

                    <h3>查看地图</h3>

                    <p></p>

                </div>

                <div data-role="collapsible">

                </div>

                <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>

            </div>

        </div>

    </div>

</body>

</html>

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

Javascript 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
jquery中EasyUI使用技巧小结
Feb 10 #Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 #Javascript
JavaScript中的标签语句用法分析
Feb 10 #Javascript
jquery动态添加删除(tr/td)
Feb 09 #Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 #Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 #Javascript
jquery动态改变div宽度和高度
Feb 09 #Javascript
You might like
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
javascript object array方法使用详解
2012/12/03 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
详解python:time模块用法
2019/03/25 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
医院节能减排方案
2014/06/13 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers