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 name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,target-densitydpi=high-dpi]">-->
<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>
<div data-role="page" id="homePage" data-theme="b" data-fullscreen="true" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>
欢迎来到..... </h1>
<div data-role="navbar">
<ul>
<li>
<a id="first" href="javascript:aa()" data-icon="home"
data-transition="none" data-inline="true">首页</a>
</li>
<li>
<a href="#" data-icon="star">資訊</a>
</li>
<li>
<a href="#" data-icon="search">搜索</a>
</li>
<li>
<a href="#" data-icon="search">搜索</a>
</li>
</ul>
</div>
</div>
<div data-role="content" id="content">
<p>
<b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。
</p>
<p>
<b>提示：</b>如果滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。
</p>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
<h1>
Fixed 页脚
</h1>
</div>
</div>
</body>
</html>
相关推荐
在IT行业中，jQuery Mobile是一种广泛使用的前端框架，它专门用于构建响应式和触屏友好的移动Web应用。jQuery Mobile提供了一系列的UI组件和交互效果，其中包括我们今天要讨论的主题——相册样式。在这个主题下，...
7. **响应式设计**：jQuery Mobile支持响应式布局，这意味着相册可以根据设备的屏幕尺寸和方向自动调整布局。例如，可以设置不同数量的列来适应不同的设备宽度。 8. **对话框和面板**：可以使用jQuery Mobile的...
1. **基础模板**：包含最简单的页面结构，适合学习jQuery Mobile的基本页面元素和布局方式。 2. **导航模板**：演示了如何使用jQuery Mobile的导航栏和下拉菜单，实现多级导航。 3. **表单模板**：展示了各种表单...
jQuery Mobile 提供了预定义的样式和布局结构，用于创建美观的登录界面。在这个例子中，我们可以看到如何利用`<form>`元素配合`<input type="text">`（用户名）和`<input type="password">`（密码）来创建输入框，...
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 ...4.通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。
《响应式网页开发实战》教学课件08jQuery Mobile布局.pdf《响应式网页开发实战》教学课件08jQuery Mobile布局.pdf《响应式网页开发实战》教学课件08jQuery Mobile布局.pdf《响应式网页开发实战》教学课件08jQuery ...
对于页面布局，jQuery Mobile使用了流式布局和媒体查询，确保在不同屏幕尺寸和方向下的良好显示。源码中的CSS文件，如`jquery.mobile.css`，包含了这些布局规则。你可以研究这些样式，理解如何创建适应性布局，以及...
jQuery Mobile 是一个轻量级的框架，专为触摸设备设计，它提供了一套完整的组件和交互模式，包括表单、页面布局和按钮样式等。CSS3 则是新一代的CSS规范，引入了许多新的功能和样式效果，为网页设计提供了更多可能性...
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
最后，`jquery.mobile.structure-1.4.1.css`是一个关键文件，它定义了jQuery Mobile的页面结构和布局规则，包括页头、页脚、内容区域等元素的样式，确保了页面在不同屏幕尺寸下的适应性。 jQuery Mobile 1.4.1版的...
通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。 lamp 不同设备使用了不同开发语言，jQuery Mobile可以很好的兼容不同的设备或操作...
jQuery Mobile 是一个轻量级、触控优化的前端框架，专为移动设备设计，它提供了一整套构建移动Web应用程序的组件。在这个“jQuery mobile滑动式的标题导航”主题中，我们将深入探讨如何利用jQuery Mobile创建动态且...
### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**：jQuery Mobile 是一款流行的开源 JavaScript 库，它主要用于构建响应式的 Web 应用程序，支持触摸操作，兼容多种移动设备。...
jQuery Mobile 还提供了栅格布局系统，类似 Bootstrap 的网格系统，方便开发者创建响应式布局。 ### 八、主题和自定义样式 jQuery Mobile 使用主题系统，允许开发者通过简单的 CSS 类（如 `ui-body-a` 或 `ui-bar-...
在 jQuery Mobile 中，我们需要确保截图功能与页面的导航、主题和响应式布局兼容。 5. **图片裁剪**：在“多种模式”中，可能指的是用户可以选择不同的截图区域，比如自由形状、矩形、圆形等。这需要使用类似 Jcrop...
5. **自动适应屏幕大小:** 通过流式布局和媒体查询，jQuery Mobile 能够自动适应不同尺寸的屏幕，提供良好的响应式设计。 **高级设计模板解析** 模板`template_14-jquery-mobile-app`可能包含以下元素： 1. **主...
**jQuery Mobile 库包及实例详解** jQuery Mobile 是一个轻量级、易用的前端框架，专门用于构建响应式和触控友好的移动 Web 应用。它基于 jQuery 库，提供了一系列预定义的 UI 组件和交互效果，使得开发者能够快速...
**jQuery Mobile 入门练习项目** jQuery Mobile 是一个流行的前端框架，专为移动设备上的网页应用设计，提供一套完整的交互组件和触摸优化的界面。它基于 jQuery 库，简化了在移动设备上创建响应式、触摸友好的网页...
jQuery Mobile 是一个轻量级、触控优化的前端框架，专为移动设备设计，用于创建跨平台、响应式的Web应用程序。这个压缩包包含了《jQuery Mobile快速入门》这本书的配套源代码，适合初学者深入理解jQuery Mobile的...
在"jqueryMobile插件集"中，可能包含以下几类插件： 1. **组件增强插件**：这些插件增强了jQuery Mobile内置组件的功能，如更复杂的下拉菜单、自定义表单验证或者动画效果丰富的滑块。 2. **交互插件**：这类插件...