Jquery Mobile介绍以及Jquery Mobile页面与对话框 

一、 Adobe Dreamweaver CS6 环境

最新版本的cs6会支持JM的使用，有自动提示功能，很强大。
安装说明地址：http://www.phonegap100.com/article-79-1.html 
下载地址说明：http://bbs.phonegap100.com/thread-135-1-1.html 

二、JM说明

默认data-ajax="true"jquery mobile 是默认通过ajax切换页面的

1、Jquery Mobile页面的基本组成 
        <meta name="viewport" content="width=device-width" /> 
        通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同
        需要引用的文件有：
        

1
2
3
<linkhref="Css/jquery.mobile-1.0.1.min.css"rel="Stylesheet"type="text/css"/>
<scriptsrc="Js/jquery-1.6.4.js"type="text/javascript"></script>
<scriptsrc="Js/jquery.mobile-1.0.1.js"type="text/javascript"></script>

2、JM主要标签说明

1
2
3
4
5
<div   data-role="page">
  <div   data-role="header">头部</div>
  <div   data-role="content">被容</div>
  <div   data-role="footer">底部</div>
</div>

第一个实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
!DOCTYPEhtml>
<html>
<head>
<title>jQuery Mobile 页面框架</title>
<metaname="viewport"content="width=device-width"/>
  <metacharset="utf-8">
<linkhref="Css/jquery.mobile-1.0.1.min.css"
rel="Stylesheet"type="text/css"/>
<scriptsrc="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<scriptsrc="Js/jquery.mobile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
<sectionid="page1"  data-role="page">
<header  data-role="header"><h1>标题</h1></header>
<div data-role="content"class="content">
<p>这是内容</p>
</div>
<footer data-role="footer"><h1>这是底部</h1></footer>
</section>
</body>
</html>

3、跳转

第一种：<a href="#page">返回主页</a> 将跳转到id=page的div上

第二种：与普通的html跳转相同，<a href="index2.htm">第 2 页</a>

4、对话框

通过设置data-rel="dialog"，来打开一个对话框。

<a href="foo.html" data-rel="dialog">Open dialog</a>

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

属性可选值：

1
pop（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none




（二）Jquery Mobile介绍以及Jquery Mobile页面与对话框的更多相关文章

  1. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

    一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

  2. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  3. jQuery的介绍和选择器详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时, ...

  4. jQuery UI vs Kendo UI & jQuery Mobile vs Kendo UI Mobile

    jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...

  5. 前端 ----jQuery的介绍

    01-jQuery的介绍   1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题 ...

  6. jQuery的介绍

    01-jQuery的介绍   1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题 ...

  7. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  8. jQuery简单介绍

    一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  9. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

随机推荐

  1. MPEG1的码流层次与各层次的作用

    1. 序列层(Sequence layer) 序列层主要用于为随机播放提供全局参数支持,这些参数包括图像宽高.像素高宽比.帧率.码率.VBV大小.帧内量化矩阵.帧间量化矩阵. 2. 图像组层(Grou ...

  2. 简单粗暴的“Debug模式”

    在项目中,通常会遇到:调试程序和程序在线上运行时程序运行的参数不一样, 例如线上运行时程序是获取线上的机器的ip,而调试程序时,我们会指定一个ip进行调试. 又或者项目要与多个系统进行数据交换,调试的 ...

  3. 【jsp网站计数功能】 application session

    在jsp页面中实现网站计数器的方法有很多,其中比较普遍的做法是利用application 和session对象.application对象可被所有用户共享:session是单用户共享,用户从访问系统开 ...

  4. css 重新学习系列（2）

    摘自: http://www.cnblogs.com/liuzhaoyang/articles/3289456.html Position定位:relative | absolute 定位一直是WEB ...

  5. 使用jquery的js的页面实现例子

    var validate;var nodeId="";var modifyappId=""; addExportTaskURL = ctx + "/x ...

  6. hdu1501 Zipper

    Zipper Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  7. CodeForces 687C The Values You Can Make（动态规划）

    这个也可以说是一个01背包了,里面也有一些集合的思想在里面,首先dp方程,dp[i][j]代表着当前数值为i,j能否被构成,如果dp[i][j] = 1,那么dp[i+m][j] 和 dp[i+m][ ...

  8. struts1,struts2,hibernate,spring的运行原理结构图

    一.struts1运行原理 1.初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总控制器会读取配置文件(s ...

  9. Android Studio 提示Error running app: No Android facet found for app

    错误解决办法如下: 可以通过以下几个步骤解决该问题: 1) 点击菜单File -> 选择Project Structure, 或使用快捷键 (Ctrl+Alt+Shift+S) 打开”Proje ...

  10. C#调用C++动态库时类型转换

    因为本人主要从事c#开发,但是在工作中经常需要用到c++编写的DLL,因此需要知道c++中的类型与c#中的类型是如何转换的.搜集整理如下. //C++中的DLL函数原型为   //extern &qu ...