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实现简单的抽奖游戏
May 05 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
html中两种获取标签内的值的方法
Jun 16 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
python脚本设置系统时间的两种方法
2016/02/21 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python中有帮助函数吗
2020/06/19 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
is_file和file_exists效率比较
2021/03/14 PHP
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
cf收人广告词
2014/03/14 职场文书
护士实习求职信
2014/06/22 职场文书
社区党务工作总结2015
2015/05/19 职场文书
Python基础之元编程知识总结
2021/05/23 Python
MySQL transaction事务安全示例讲解
2022/06/21 MySQL