为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图:图中用红色框圈起来的是界面中的事件,测试代码如下:<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-1.0.1.min.css" rel="stylesheet" type=...
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿。使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响。在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接地址进行预取操作。预取的详细过程如下:注意...
当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。一、轻击与按住直接上代码(一切皆在代码中,细细品吧!)<!DOCTYPE html>
<html>
<head>
<title>练习</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link href="css/jquery.mobile-...
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递。1、GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析。2、通过HTML5的Web Storage进行参数传递。3、建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来。(程序灵活性较弱)一、以GE...
一、页眉1、添加页眉和页脚 <p data-role="header"><h1>第 1 页</h1></p> <p data-role="footer"><h4>页面脚注</h4></p>默认的页眉在屏幕的顶部边缘显示,而且在在屏幕滚动时,页眉会滑出屏幕之外,通过添加data-position属性可以创建一个固定的页眉 <p data-role="header" data-position="fixed"><h1>第 1 页</h1></p> <p data-role="footer" data-position="fixed"><h4>页面脚注</h4></p>可以使用date-theme属性来调整页眉的主题...
一、链接按钮<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<p data-role="page" i...
一、单容器页面结构<!DOCTYPE html>
<html>
<head>
<title>Jquery mobile 基本页面框架</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<...
jQuery Mobile v1.1.0上个月已经发布,由于好奇就学习了一下。jQuery Mobile是 jQuery 在手机和平板设备上的版本,用于创建针对智能手机和平板电脑的跨设备Web应用。jQuery的用户界面总设计师Todd Parker(jQuery之父)称,jQM旨在“为 jQuery 社区创建一个优雅的能够兼容当前所有主流移动平台的HTML5 UI库”。jQuery mobile页面结构jQuery Mobile 应用了 HTML5 标准的特性,在结构化的页面中完整的页面结构分为 header、content、fo...
一、下载jQuery Mobile下载地址:http://jquerymobile.com/点击Download下载如下zip包下载成功后如下图解压目录如图:点击index.html进入demo主页,这里面有很多例子。二、创建JQuery Mobile的Helloword1、创建demo2、新建站点3、站点建立成功后将生成的demo拷贝到站点中index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery.mobile-1.3.2.m...