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 相关文章推荐
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
js实现文字选中分享功能
Jan 25 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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
德生PL330测评
2021/03/02 无线电
JQuery index()方法使用代码
2010/06/02 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
JS中的BOM应用
2018/02/02 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python SQLite3简介
2018/02/22 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
毕业生自我鉴定实例
2014/01/21 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
学校安全责任书
2014/04/14 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript