jQueryMobile之窗体长内容的缺陷与解决方法实例分析


Posted in jQuery onSeptember 20, 2017

本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法。分享给大家供大家参考,具体如下:

前面的一篇文章《jQueryMobile之Helloworld与页面切换的方法》没有考虑到窗体中放置长内容的状况

一旦窗体中出现长内容,使用笔者那种固定header与footer的全屏布局是存在缺陷的,

jQueryMobile之窗体长内容的缺陷与解决方法实例分析

如图所示,长内容最后的内容,直到滚动条拉到最底部也无法穷尽,
而且很有可能的是,虽然现在这个地方的内容是显示为半透明,但往往这个位置是一些提交按钮什么的,

用户根本就没法点,

因此,需要进行改进,把原来的代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css" rel="external nofollow" rel="external nofollow" >
<script src="jqmobile/jquery-1.11.1.js"></script>
<script src="jqmobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" data-position="fixed" data-fullscreen="true">
 <div data-role="header" data-theme="b" data-tap-toggle = "false">
  <h1>title</h1>
 </div>
 <div data-role="content">
  <p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p>
 </div>
 <div data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
   <div data-role="navbar">
   <ul>
    <li><a href="a.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="info">a</a></li>
    <li><a href="b.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="grid">b</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" class="ui-btn-active ui-state-persist" data-icon="star">c</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

之中的content图层加上样式,style="margin-bottom:50px"也就是变成:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css" rel="external nofollow" rel="external nofollow" >
<script src="jqmobile/jquery-1.11.1.js"></script>
<script src="jqmobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" data-position="fixed" data-fullscreen="true">
 <div data-role="header" data-theme="b" data-tap-toggle = "false">
  <h1>title</h1>
 </div>
 <div data-role="content" style="margin-bottom:50px">
  <p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p><p>本页还在建设中</p>
 </div>
 <div data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
   <div data-role="navbar">
   <ul>
    <li><a href="a.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="info">a</a></li>
    <li><a href="b.html" rel="external nofollow" rel="external nofollow" target="_self" data-icon="grid">b</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" class="ui-btn-active ui-state-persist" data-icon="star">c</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

则可以穷尽页面了,如下图所示:

 jQueryMobile之窗体长内容的缺陷与解决方法实例分析

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
jquery 一键复制到剪切板的实例
Sep 20 #jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
You might like
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
用Node提供静态文件服务的方法
2018/07/06 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
jQuery实现表格隔行换色
2018/09/01 jQuery
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
linux下安装easy_install的方法
2013/02/10 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python 监控logcat关键字功能
2020/09/04 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
会计专业毕业生自我鉴定
2013/10/29 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
感恩之星事迹材料
2014/05/03 职场文书
阅兵口号
2014/06/19 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
python实现手机推送 代码也就10行左右
2022/04/12 Python