这篇文章主要介绍了jQueryMobile之窗体长内容的缺陷与解决方法,结合具体实例形式分析了jQueryMobile底部悬浮层遮挡情况下的解决方法,非常简单实用,需要的朋友可以参考下

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

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

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

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

用户根本就没法点,

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

<!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>
 <div data-tap-toggle = "false">
  <h1>title</h1>
 </div>
 <div>
  <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-tap-toggle = "false">
   <div>
   <ul>
    <li><a href="a.html" rel="external nofollow" rel="external nofollow" target="_self">a</a></li>
    <li><a href="b.html" rel="external nofollow" rel="external nofollow" target="_self">b</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow">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>
 <div data-tap-toggle = "false">
  <h1>title</h1>
 </div>
 <div>
  <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-tap-toggle = "false">
   <div>
   <ul>
    <li><a href="a.html" rel="external nofollow" rel="external nofollow" target="_self">a</a></li>
    <li><a href="b.html" rel="external nofollow" rel="external nofollow" target="_self">b</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow">c</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

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

 

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展总结》、《jQuery切换特效与总结》、《jQuery遍历算法与总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

最新资讯
自如要求业主合同期降租,否则强制解约,租客也被下“逐客令”

自如要求业主合同期降

蛋壳公寓出事后,作为长租公寓行业头部玩家的自如,被很多
传水滴公司计划明年一季度赴美IPO 公司回应:不予置评

传水滴公司计划明年一

有市场消息称,水滴公司计划明年一季度赴美IPO,估值将达6
猎豹移动第三季度营收3.651亿元 同比下滑60.3%

猎豹移动第三季度营收

猎豹移动今日公布了截至9月30日的2020年第三季度财报,
对话李兰娟:人工智能将疫情“一网打尽”,让医疗更精准

对话李兰娟:人工智能将

“突如其来的新冠肺炎疫情大流行再次表明,面对严峻挑战
威马汽车与Uber达成意向性协议 EX5或将出口至欧洲

威马汽车与Uber达成意

一位消息人士对新浪科技透露,威马已经与Uber签署了意向
第三季度净利润下滑六成 华米科技仍未摆脱增收不增利

第三季度净利润下滑六

目前华米自有品牌占营收比重尽管较之前有所增长,但目前
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,