一、为什么要学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. <JAVA8新增内容>关于匿名内部集合和lambda表达式

    要想说清楚JAVA中的Lambda表达式,必须想讲一下匿名内部类来帮助理解本质. 一.匿名内部类 匿名内部类适合创建那种只需要一次使用的类,例如前面介绍命令模式时所需要的Command对象,匿名内部类 ...

  2. 在线接口管理工具-eoapi

    为了方便和前端沟通,临时在局域网搭建了一个接口管理工具,查了一些资料都说eoapi不错,那就试了一下: 1.安装 要在服务器或者自己的电脑,准备web环境,Linux可以是Apache/nginx , ...

  3. CodeForces - 697F：Legen... （AC自动机+矩阵）

    Barney was hanging out with Nora for a while and now he thinks he may have feelings for her. Barney ...

  4. jQuery bootstrap框架下重置下拉框选择

    前端页面中下拉选择框采用bootstrap-select美化,如下图:

  5. Codeforces 762D Maximum path 动态规划

    Codeforces 762D 题目大意: 给定一个\(3*n(n \leq 10^5)\)的矩形,从左上角出发到右下角,规定每个格子只能经过一遍.经过一个格子会获得格子中的权值.每个格子的权值\(a ...

  6. boost::function 通过boost::bind调用类成员函数

    1. 首先引用boost::function和boost::bind的头文件和库: #include "boost/bind.hpp" #include "boost/f ...

  7. LED接口

    通常我们都听到别人说DVI接口.VGA接口等,可是这些接口是什么意思,led显示屏厂家小编为您解析其含义与不同之处.   1.DVI接口 DVI接口相校于VGA.HDMI.DP等接口来说体积较大,是目 ...

  8. 【转】Pro Android学习笔记（三）：了解Android资源（上）

    在Android开发中,资源包括文件或者值,它们和执行应用捆绑,无需在源代码中写死,因此我们可以改变或替换他们,而无需对应用重新编译. 了解资源构成 参考阅读Android学习笔记(三八):资源res ...

  9. .NETFramework：DateTimeOffset

    ylbtech-.NETFramework:DateTimeOffset 表示一个时间点,通常相对于协调世界时(UTC)的日期和时间来表示. 1.程序集 mscorlib, Version=4.0.0 ...

  10. Jasper：目录/资源

    ylbtech-Jasper:目录/资源 1. 官网返回顶部 1. https://www.jasper.com/ 2. 2.返回顶部 1. http://api.jasperwireless.com ...