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实现动态删除LI的方法
May 30 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现滑动开关效果
Aug 02 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
mysql5写入和读出乱码解决
2006/11/25 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php实现简易计算器
2020/08/28 PHP
MSN消息提示类
2006/09/05 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
讲解Python中的标识运算符
2015/05/14 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python 音频生成器的实现示例
2019/12/24 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python双链表原理与实现方法详解
2020/02/22 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
2014新年元旦活动策划方案
2014/02/18 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
求职信格式范文
2015/03/19 职场文书
实习单位鉴定意见
2015/06/04 职场文书
我的中国梦主题班会
2015/08/14 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js