脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQueryMobile窗体长内容的缺陷与解决方法

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

 更新时间：2017年09月20日 10:15:35   作者：yongh701  
这篇文章主要介绍了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 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>

则可以穷尽页面了，如下图所示：

 

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

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

您可能感兴趣的文章:

相关文章

  • jQuery中ajax的load()方法用法实例

    jQuery中ajax的load()方法用法实例

    这篇文章主要介绍了jQuery中ajax的load()方法用法,以实例形式较为详细的分析了load()方法的功能、参数及使用技巧,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • jquery弹出框的用法示例(2)

    jquery弹出框的用法示例(2)

    没有关闭按钮，但是点击其他地方的时候，弹出框消失，必须用js给弹出框的父元素加上更高的层次，具体实现如下，感兴趣的朋友可以参考下
    2013-08-08
  • jQuery实现根据生日计算年龄 星座 生肖

    jQuery实现根据生日计算年龄 星座 生肖

    本篇文章主要是对利用jQuery实现根据生日计算年龄，星座，生肖的示例代码进行了介绍，需要的朋友可以过来参考下
    2016-11-11
  • Jquery实现$.fn.extend和$.extend函数

    Jquery实现$.fn.extend和$.extend函数

    这篇文章主要介绍了Jquery实现$.fn.extend和$.extend函数的相关资料,需要的朋友可以参考下
    2016-04-04
  • jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    jQuery通过控制节点实现仅在前台通过get方法完成参数传递

    这篇文章主要介绍了jQuery通过控制节点实现仅在前台通过get方法完成参数传递的功能,实例分析了jQuery操作节点的技巧与控制前台get方法传递参数的用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery模拟窗口抖动效果

    jQuery模拟窗口抖动效果

    本文主要介绍了jQuery模拟窗口抖动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Jquery Ajax.ashx 高效分页实现代码

    Jquery Ajax.ashx 高效分页实现代码

    Jquery ，大家都熟悉的一个框架，我对Jquery正在学习中，对其影响最深的当属 它的选择器之强,ajax与服务器之间的交谈
    2009-10-10
  • Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    本篇文章主要是对Jquery EasyUI中弹出确认对话框以及加载效果的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • 6款新颖的jQuery和CSS3进度条插件推荐

    6款新颖的jQuery和CSS3进度条插件推荐

    进度条和Loading加载动画在当今的网页功能中显得越来越重要了，于是接下来为大家推荐几款比较新颖进度条插件,感兴趣的你可以参考下希望可以帮助到你
    2013-03-03
  • jQuery实现简单计算器功能

    jQuery实现简单计算器功能

    这篇文章主要为大家详细介绍了jQuery实现简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论