一、为什么要学Jquery Mobile

 

JqueryMobile 是jquery的移动版本，懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用的也是比较多的

 

二、Adobe Dreamweaver CS6 环境搭建以及软件破解

 

软件安装步骤：

 

http://www.phonegap100.com/article-79-1.html

          

软件下载链接地址：

 

http://bbs.phonegap100.com/thread-135-1-1.html

三、Jquery Mobile页面的基本组成

1.<meta name="viewport" content="width=device-width" />

通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同

2.页面基本组成

<div  data-role="page">

<div  data-role="header">头部</div>

<div  data-role="content">被容</div>

<div  data-role="footer">底部</div>

</div>

<section id="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>

 

第一个示例：

<!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>

 

 

<body>HTML 4.01 / XHTML 1.0

<div id="header">...</div>

<div id="navigation">...</div>

<div id="main">...</div>

<div id="sidebar">...</div>

<div id="footer">...</div>

</body>

<body>                 HTML5中

<header>...</header>

<nav>...</nav>

<div id="main">...</div>

<aside>...</aside>

<footer>...</footer>

</body>

 

四、页面跳转

第一种页面跳转

<a href="dialog/index.html"  data-role="button" data-rel="back" data-theme="c">Cancel</a>

data-rel="back"属性将忽视href属性

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

data-ajax="false"

<!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>

<div data-role="page" id="page">

<div data-role="header">

<h1>第 1 页</h1>

</div>

<div data-role="content">

<ul data-role="listview">

<li><ahref="#page2">第 2 页</a></li>

<li><ahref="#page3">第 3 页</a></li>

<li><ahref="#page4">第 4 页</a></li>

</ul>

</div>

<div data-role="footer">

<h4>页脚</h4>

</div>

</div>

<div data-role="page" id="page2">

<div data-role="header">

<h1>第 2 页</h1>

</div>

<div data-role="content">

<p>内容第2页</p>

<ahref="#page">返回主页</a>

</div>

<div data-role="footer">

<h4>页脚</h4>

</div>

</div>

<div data-role="page" id="page3">

<div data-role="header">

<h1>第 3 页</h1>

</div>

<div data-role="content">

<p>内容第3页</p>

<ahref="#page">返回主页</a>

</div>

<div data-role="footer">

<h4>页脚</h4>

</div>

</div>

<div data-role="page" id="page4">

<div data-role="header">

<h1>第 4 页</h1>

</div>

<div data-role="content">

<p>内容第4页</p>

<ahref="#page">返回主页</a>

</div>

<div data-role="footer">

<h4>页脚</h4>

</div>

</div>

</body>

</html>

 

2.第二种页面跳转

<a href="index2.htm">第 2 页</a>

五、对话框

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

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

4.对话框过渡效果

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

属性可选值：pop（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none

02.Jquery Mobile介绍以及Jquery Mobile页面与对话框的更多相关文章

  1. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  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系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  6. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

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

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

  8. jQuery的介绍

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

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

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

随机推荐

  1. tensorflow knn 预测房价 注意有 Min-Max Scaling

    示例数据: 0.00632 18.00 2.310 0 0.5380 6.5750 65.20 4.0900 1 296.0 15.30 396.90 4.98 24.00 0.02731 0.00 ...

  2. 时间序列数据库——索引用ES、聚合分析时加载数据用什么？docvalues的列存储貌似更优优势一些

    加载 如何利用索引和主存储,是一种两难的选择. 选择不使用索引,只使用主存储:除非查询的字段就是主存储的排序字段,否则就需要顺序扫描整个主存储. 选择使用索引,然后用找到的row id去主存储加载数据 ...

  3. Struts2与ServletAPI解耦

    什么是与Servlet API解耦? 为了避免与servlet API耦合在一起,方便Action做单元测试, Struts2对HttpServletRequest,HttpSession,和Serv ...

  4. EVC入门之二: 在未被加载的DLL中设置断点 （虽然没有遇到这个问题，不过先摘抄下来）

    问题: 这个问题居然也郁闷了我一段时间. 我们假设在EVC里建立了一个project, 里面有SubProject_1(以下简称SB1,嘿嘿), 编译生成一个EXE; SubProject_2(以下简 ...

  5. ACM学习历程—HDU 5317 RGCDQ （数论）

    Problem Description Mr. Hdu is interested in Greatest Common Divisor (GCD). He wants to find more an ...

  6. 数据结构与算法（2）----->字符串

    1. 字符串的一些特点 1.1  广泛性 (1)字符串可以看作是字符类型的数组----->所以可能会涉及排序+查找; (2)很多问题都可以转化为字符串类型的方法去解决; 需要注意的是:用java ...

  7. HL7 Event Type

    Table 0003 - Event type Value Description A01 ADT/ACK - Admit / visit notification A02 ADT/ACK - Tra ...

  8. SimpliciTI简介

    SimpliciTI简介 SimpliciTI是TI开发的一份专门针对其CCxxxx系列无线通信芯片的网络协议.按照其官方说法SimpliciTI是一个基于连接的点对点通讯协议.它支持两种网络拓扑结构 ...

  9. 常见的post提交数据类型

    原文地址:https://www.cnblogs.com/yoyoketang/p/6771696.html 常见的post提交数据类型有四种: 1.第一种:application/json:这是最常 ...

  10. stm32之通信

    本文提到的内容有以下几个方面: 通信概述 串口通信 I2C通信 CAN通信 SPI通信 I2S通信 USB通信 其他通信 一.通信概述 按照数据传送方式分: 串行通信(一条数据线.适合远距离传输.控制 ...