jQuery Mobile布局问题

最新推荐文章于 2022-02-05 19:42:14 发布

原创最新推荐文章于 2022-02-05 19:42:14 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery Mobile

Android 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用 jQuery Mobile 实现固定头部(header)和底部(footer)的方法，通过设置 data-position 属性为 fixed 并禁用 data-tap-toggle 的方式确保在移动端点击时 header 和 footer 不会消失。此外，还提供了自定义 JavaScript 函数实现页面加载时的加载器显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data-position="fixed" data-tap-toggle="false"

置顶置底：解决点击造成的(顶)header与(底)footer消失至头部和尾部

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
  <link rel="stylesheet"
   href="css/jquery.mobile.structure-1.4.2.min.css">
  <link rel="stylesheet" href="css/jquery.mobile.theme-1.4.2.min.css">
  <script src="js/jquery.js"></script>
  <script src="js/jquery.mobile-1.4.2.min.js"></script>
  <style type="text/css">
.ui-page {

backface-visibility:hidden;

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden;

}
</style>
  <script type="text/javascript">
function aa() {
  showLoader();
  $.post("3g/ifm/newsList.spr", {}, function(data) {
   $("#content").html(data);
   $("#content").trigger('create');
   $("#first").addClass("ui-btn-active ui-state-persist");
   hideLoader();
  });
}
function showLoader() {
  //显示加载器.for jQuery Mobile 1.2.0
  $.mobile.loading('show', {
   text : '加载中...', //加载器中显示的文字
   textVisible : true, //是否显示文字
   theme : 'a', //加载器主题样式a-e
   textonly : false, //是否只显示文字
   html : "" //要显示的html内容，如图片等
  });
}

//隐藏加载器.for jQuery Mobile 1.2.0
function hideLoader() {
  //隐藏加载器
  $.mobile.loading('hide');
}
// $(document).bind("mobileinit", function() {
//    $.mobile.page.prototype.options.addBackBtn = true;
//});

</script>
</head>
<body>