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. s7-300 第一讲

    s7-300的电源模块可选,s7-400必选

  2. hibernate ——helloWorld程序（XML配置）

    1.项目结构 2.hibernate实现了Java类 和 数据库表的映射(Map) 先看一下Student的Java类和对应的数据库表 package com.pt.hibernate; public ...

  3. C# 引用参数

    最近经常和同事讨论引用参数的问题,为了搞清楚,查了些资料,其中CLR via C#中讲的比较清楚,整理了下 ----摘自(CLR via C#) 在默认情况下,CLR假设所有的方法参数都是按值传递的. ...

  4. HTML+CSS Day06 超链接的样式与搭配

    1.格式 a:link    {} 普通的.未被访问的链接 a:visited {}  用户已访问的链接 a:hover  {} 鼠标指针位于链接的上方 a:active{} 链接被点击的时刻 2.常 ...

  5. java跳过构造方法新建对象

    Java有四种创建对象的方法: (1) 用new语句创建对象,这是最常见的创建对象的方法. (2) 运用反射手段,调用java.lang.Class或者java.lang.reflect.Constr ...

  6. Android按钮单击事件的四种常用写法总结

    很多学习Android程序设计的人都会发现每个人对代码的写法都有不同的偏好,比较明显的就是对控件响应事件的写法的不同.因此本文就把这些写法总结一下,比较下各种写法的优劣,希望对大家灵活地选择编码方式可 ...

  7. 【转载】newInstance()和new()

    newInstance()和new() 在Java开发特别是数据库开发中,经常会用到Class.forName( )这个方法.通过查询Java Documentation我们会发现使用Class.fo ...

  8. JS里的CSS函数

    <title>无标题文档</title> <script> function css(obj,name,value){ if(arguments.length==2 ...

  9. android 设计模式学习

    1:单例模式 //对于创建开销较大的类可使用此方法,保证全局一个实例,在程序运行过程中该类不会因新建额外对象产生开销.示例代码如下:public class Singleton { private s ...

  10. Node.js学习 - Web Server

    Client - 客户端,一般指浏览器,浏览器可以通过 HTTP 协议向服务器请求数据. Server - 服务端,一般指 Web 服务器,可以接收客户端请求,并向客户端发送响应数据. Busines ...