当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery Mobile之窗体长内容的缺陷与解决方法实例分析

jQuery Mobile 窗体长内容的缺陷与解决方法

  • 发布时间:
  • 作者:码农之家
  • 点击:123

这篇文章主要知识点是关于jQuery、Mobile、窗体、长内容、缺陷、解决方法、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery UI开发指南
  • 类型:前端开发大小:6.02 MB格式:PDF作者:Eric Sarrion
立即下载

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

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

一旦窗体中出现长内容,使用笔者那种固定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图层加上样式,也就是变成:

<!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>

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

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

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 实例详解jquery实现select选中行、列合计
  • jquery实现弹幕效果示例代码
  • jQuery基本过滤选择器的用法代码
  • jquery插件制作方法
  • jQuery中multiScroll插件实现全屏鼠标滚动切换页面特效
  • jQuery 相关电子书
    学习笔记

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com