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 实现表单验证功能
Jul 05 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery冲突问题解决方法
Jan 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
AM/FM收音机的安装与调试
2021/03/02 无线电
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
JQuery球队选择实例
2015/05/18 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
Python Deque 模块使用详解
2014/07/04 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python图像和办公文档处理总结
2019/05/28 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python timeit模块的使用实践
2020/01/13 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
如何设置Java的运行环境
2013/04/05 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
一夜的工作教学反思
2014/02/08 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
经营场所使用证明
2015/06/19 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python