一、为什么要学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. SDUT OJ类型转换函数的应用

    题目描述 处理一个复数与一个double数相加的运算,结果存放在一个double型变量d1中,输出d1的值.定义Complex(复数)类,在成员函数中包含重载类型转换运算符:operator doub ...

  2. URAL - 1297 Palindrome —— 后缀数组 最长回文子串

    题目链接:https://vjudge.net/problem/URAL-1297 1297. Palindrome Time limit: 1.0 secondMemory limit: 64 MB ...

  3. 一篇文章教你如何用R进行数据挖掘

    一篇文章教你如何用R进行数据挖掘 引言 R是一种广泛用于数据分析和统计计算的强大语言,于上世纪90年代开始发展起来.得益于全世界众多 爱好者的无尽努力,大家继而开发出了一种基于R但优于R基本文本编辑器 ...

  4. bjwc Day2 玄学

    早晨起来很开心,因为昨天跟妹子聊天聊到很晚 然后看到了题,感觉:这tm才是冬令营呀! T1构造,并没有找到性质,暴力都懒得打 T2数位dp,状态比较麻烦,看来跟dmy想到一起了,然后搞一下搞完 T3放 ...

  5. bzoj3456城市规划 多项式取模

    題目大意 求出有n个点的有标号简单连通无向图的数目. 题解 什么破玩意,直接输出\(2^{C_n^2}\)走人 我们发现这张图要求连通,而上式肯定不能保证连通. 其实上式表示的是不保证连通的有标号简单 ...

  6. bzoj 4453 cys就是要拿英魂！ —— 后缀数组+单调栈+set

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4453 这种问题...一般先把询问离线,排序: 区间对后缀排名的影响在于一些排名大而位置靠后的 ...

  7. zynq基础

    zynq交叉编译环境设置 OpenCV在Zedboard上的移植 ubuntu 下串口调试工具 minicom安装与配置

  8. Spring boot 2.0 学习

    Spring boot 2.0出来了,支持java 9, 好多新特性,应该学习.   待续... ...

  9. Python中正则匹配使用findall时的注意事项

    在使用正则搜索内容时遇到一个小坑,百度搜了一下,遇到这个坑的还不少,特此记录一下. 比如说有一个字符串  "123@qq.comaaa@163.combbb@126.comasdf111@a ...

  10. stm32之时钟控制

    本文提到的有以下内容: 时钟系统与总线矩阵 SysTick系统定时器 RTC实时时钟 看门狗定时器 通用定时器 一.时钟系统与总线矩阵 stm32F4的时钟树如下图所示: 在STM32中,有五个时钟源 ...