本文实例讲述了jQueryMobile窗体长内容的缺陷与解决方法。分享给大家供大家参考,具体如下:
前面的一篇文章《jQueryMobile之Helloworld与页面切换的方法》没有考虑到窗体中放置长内容的状况
一旦窗体中出现长内容,使用笔者那种固定页眉与页脚的全屏布局是存在缺陷的,
如图所示,长内容最后的内容,直到滚动条拉到最底部也无法穷尽,
而且很有可能的是,虽然现在这个地方的内容是显示为半透明,但往往这个位置是一些提交按钮什么的,
用户根本就没法点,
因此,需要进行改进,把原来的代码:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> a
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,user-scalable=不”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/jqmobile/jquery.mobile-1.4.5.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;
& lt;脚本src=" https://www.yisu.com/zixun/jqmobile/jquery-1.11.1.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/jqmobile/jquery.mobile-1.4.5.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div data-role="页面" data-position=肮潭ā眃ata-fullscreen=" true "比;
& lt; div data-role="头" data-theme=癰”data-tap-toggle=癴alse”比;
& lt; h2> title
& lt;/div>
& lt; div data-role=澳谌荨痹?
& lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p>
& lt;/div>
& lt; div data-role=耙辰拧眃ata-position=肮潭ā眃ata-fullscreen=" true " data-theme=癰”data-tap-toggle=癴alse”比;
& lt; div data-role=暗己健北?
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/a.html " rel=巴獠縩ofollow”rel=巴獠縩ofollow”目标=癬self“data-icon=靶畔ⅰ痹赼 & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/b.html " rel=巴獠縩ofollow”rel=巴獠縩ofollow”目标=癬self“data-icon=巴瘛弊４莃 & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/" rel=巴獠縩ofollow”rel=巴獠縩ofollow”class=皍i-btn-active ui-state-persist”data-icon=懊餍恰弊４莄 & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
之前
之中图的内容层加上样式,也就是变成:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> a
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,user-scalable=不”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/jqmobile/jquery.mobile-1.4.5.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”比;
& lt;脚本src=" https://www.yisu.com/zixun/jqmobile/jquery-1.11.1.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/jqmobile/jquery.mobile-1.4.5.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div data-role="页面" data-position=肮潭ā眃ata-fullscreen=" true "比;
& lt; div data-role="头" data-theme=癰”data-tap-toggle=癴alse”比;
& lt; h2> title
& lt;/div>
& lt; div data-role=澳谌荨痹?
& lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p> & lt; p>本页还在建设中& lt;/p>
& lt;/div>
& lt; div data-role=耙辰拧眃ata-position=肮潭ā眃ata-fullscreen=" true " data-theme=癰”data-tap-toggle=癴alse”比;
& lt; div data-role=暗己健北?
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/a.html " rel=巴獠縩ofollow”rel=巴獠縩ofollow”目标=癬self“data-icon=靶畔ⅰ痹赼
