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. wlcore: firmware chunk too long

    insmod wlcore_sdio.ko 的时候出现的错误 43.767890] Powering on wl12xx [  143.846003] Powering off wl12xx [  1 ...

  2. 笨方法学python--打印

    1 print 语句 尾端的逗号 end1 = "C" end2 = "h" end3 = "e" end4 = "e" ...

  3. POJ1556 The Doors 叉积+最短路

    题目大意:求从(0,5)到(10,5)的最短距离,起点与终点之间有n堵墙,每个墙有2个门. 题目思路:判断两点间是否有墙(判断两点的连线是否与某一堵墙的线段相交),建立一个图,然后最短路求出就可以了. ...

  4. php 日期处理 例子

    <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d",time() ...

  5. 关于glibc中的res_init()函数

    /* * Set up default settings.  If the configuration file exist, the values * there will have precede ...

  6. android图片加水印,文字

    两种方法: 1.直接在图片上写文字 String str = "PICC要写的文字"; ImageView image = (ImageView) this.findViewByI ...

  7. 查看log的方法

    adb logcat>1.txt adb shell cat /proc/atf_log/atf_log > atf_log 会保存在adb的本地文件. 还有一种是实时读取的方式: adb ...

  8. IE6下绝对定位元素和浮动元素并列绝对定位元素消失

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. PAT (Advanced Level) 1106. Lowest Price in Supply Chain (25)

    简单dfs #include<cstdio> #include<cstring> #include<cmath> #include<vector> #i ...

  10. heartbeat集群安装配置

    安装配置高可用集群需要注意:1.节点名称:集群每个节点的名称都得能互相解析 /etc/hosts hosts主机名的正反解析结果必须跟"uname -n"的结果保持一致2.时间必须 ...