-
jquery mobile 我的一个登录页面设置了data-dom-cache=false 火狐查看依然还在页面元素中0
jquery mobile 我的一个登录页面设置了data-dom-cache=false 火狐查看依然还在页面元素中
<%@page import="com.base.util.StringTools"%>
<%@page import="com.limit.emp.bean.T_limit_Emp"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
T_limit_Emp emp = (T_limit_Emp)request.getAttribute("emp");
%>
<!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" />
</head>
<body>
<div data-dom-cache="false" id="p_login" data-role="page" data-fullscreen="true" data-title="办公自动化管理系统">
<jsp:include page="/phone/tools/phone.jsp" />
<script type="text/javascript">
$("#p_login").bind("pageshow", function() {
$("#btnSub").on("click", function() {
var userName = $("#txt_userName").val();
var password = $("#txt_password").val();
var url = getBasePath()+"/" + $("#fo_login").attr("action");
var param = $("#fo_login").serialize();
if(isNull(userName)) {
jp.popup({"text" : "请输入您的帐号"});return;}
if(isNull(password)) {
jp.popup({"text" : "请输入您的密码"});return;}
$.ajax({
type:"post",
url:url,
data:param,
async:"false",
dataType:"json",
success:function(data){
if(data.data.key=="success") {
$.mobile.changePage("empList.jsp",{transition:"turn"});
}else {
jp.popup({"text" : data.data.value});
}
}
});
});
});
</script>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>ccc</h1>
</div>
<div data-role="content">
<div align="center" style="margin-top:80px;"><img src="<%=path %>/phone/images/logo.gif"/></div>
<form id="fo_login" action="T_limit_EmpLogin.action" style="margin-top: 25px;">
<div data-role="fieldcontain">
<input name="userName" id="txt_userName" placeholder="输入您的帐号" value="" type="text"/><br/>
<input name="password" id="txt_password" placeholder="输入您的密码" value="" type="password"/>
</div>
<input id="btnSub" type="button" data-theme="c" style="color: #ffffff;" value="登录"/>
</form>
</div>
<div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b">
<h1>XXX</h1>
</div>
</div>
</body>
</html>2013年11月15日 11:10
添加评论
关注(0)
目前还没有答案
相关推荐
jQuery Mobile 是一个流行的框架，用于构建响应式且对触摸设备友好的移动 web 应用程序。在这个框架中，`data-` 属性扮演着至关重要的角色，它们用于增强 HTML 元素的功能和视觉表现，使其适应移动设备的需求。以下...
2. **页面容器（Page Container）**：所有 jQuery Mobile 页面都必须包含在一个 `data-role="page"` 的 div 中，这是页面的基本单元。 3. **导航结构（Navigation Structure）**：使用 `data-rel` 属性创建链接间的...
`jQuery Mobile` 是一个基于 `jQuery` 库的轻量级、跨平台的框架，专为触摸设备设计，旨在简化移动 Web 开发。它提供了一套完整的用户界面（UI）组件和交互模式，允许开发者创建具有高度互动性和一致性的移动应用...
jQuery Mobile 的一大特点就是使用AJAX技术进行页面间的平滑过渡，通过`data-ajax="false"`禁止AJAX加载，对于需要重新加载整个页面的情况，如登录成功跳转到主页面。 五、注册与登录逻辑 1. 后端接口：后端需提供...
本文主要关注jQuery Mobile中的一个关键特性——data属性，这些属性用于定制和增强UI元素的功能和外观，使其更适合打印和学习。 首先，我们来看`data-role="button"`属性，它用于将HTML元素转化为jQuery Mobile的...
- 每个页面由一个 `<div>` 元素（带有 `data-role="page"` 属性）定义，可以嵌套在 HTML 文档的多个页面中，通过 AJAX 进行导航。 - 页面头部和尾部通常包含在 `data-role="header"` 和 `data-role="footer"` 中，...
在HTML5中，jQuery Mobile利用数据属性（data-attributes）来标识和配置UI元素，如`data-role="page"`定义一个页面容器，`data-role="header"`定义页眉，`data-role="content"`定义主要内容区域，`data-role="footer...
在"restaurant_picker"这个实例中，我们将深入探讨如何使用 jQuery Mobile 创建一个餐厅选择器应用。 首先，jQuery Mobile 的核心理念是“Write Less, Do More”，通过简单的 HTML 标签和类，即可实现复杂的 UI ...
1. **页面容器**：每个页面由一个`<div>`元素承载，带有`data-role="page"`属性。这是jQuery Mobile的最小工作单元。 2. **头部**：通常包含在`<div data-role="header">`内，可以添加标题、返回按钮等。 3. **主体*...
jQuery Mobile 是一个轻量级、触控优化的前端框架，专为移动设备设计，它提供了一整套构建移动Web应用程序的组件。在这个“jQuery mobile滑动式的标题导航”主题中，我们将深入探讨如何利用jQuery Mobile创建动态且...
2. **相册容器**：创建一个用于显示相册的容器，例如使用`<div>`元素，并赋予它一个特定的数据-角色，如"data-role='content'"，这是jQuery Mobile页面的主要内容区域。 3. **图片列表**：将每张图片包装在一个链接...
jQuery Mobile 支持主流的现代浏览器，包括Chrome、Firefox、Safari以及IE9+。对于旧版浏览器，需要考虑兼容性问题。同时，选择合适的jQuery Mobile版本至关重要，新版本通常包含更多特性，但可能不支持较旧的设备。...
在 jQuery Mobile 中，页面是基于分页的，每个页面都由一个包含 `data-role="page"` 的 div 元素表示。页面间的导航可以通过链接实现，使用 `data-rel="back"` 可以实现返回上一页的功能。 ### 3. 模块化布局 ...
1. **延迟增强：** 为了避免一次性加载所有页面导致性能问题，可以使用`data-dom-cache="true"`将常用页面保留在DOM中。 2. **主题定制：** 通过修改CSS样式，可以自定义jQuery Mobile的主题，使其符合品牌需求。 ...
总结，"jQuery Mobile 设计完整例子"提供了一个全面的实践指南，涵盖了从登录界面到复杂菜单系统的开发流程。学习这个例子，开发者可以快速掌握jQuery Mobile的核心功能，从而高效地开发出适应各种移动设备的交互式...
JQuery Mobile 是一个强大而灵活的框架，能够帮助开发者快速构建高质量的移动 Web 应用。通过学习上述知识点，开发者可以有效地利用 JQuery Mobile 的各种特性来提升用户体验，同时还能根据实际需求进行深度定制。
默认情况下，jQuery Mobile 在 AJAX 跳转后会清除当前页面的 DOM 结构，从而导致 `pageinit` 事件每次跳转时都会重新触发。设置 `data-dom-cache="true"` 可以保留 DOM，避免重复触发 `pageinit` 事件。 ### 动态...
下面是一段简单的示例代码，展示了如何使用 jQuery Mobile 创建一个基本的页面结构： ```html <!DOCTYPE html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" ...
jQuery Mobile 1.4.5 是一个稳定且广泛使用的版本，它在前一版本的基础上进行了性能优化和bug修复，提供了更加流畅的用户体验。这一版本特别关注了响应式设计和触摸事件的处理，确保在各种屏幕尺寸和设备上都能得到...