一、为什么要学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. SPOJ - REPEATS —— 后缀数组 重复次数最多的连续重复子串

    题目链接:https://vjudge.net/problem/SPOJ-REPEATS REPEATS - Repeats no tags  A string s is called an (k,l ...

  2. SPOJ - SUBST1 New Distinct Substrings —— 后缀数组 单个字符串的子串个数

    题目链接:https://vjudge.net/problem/SPOJ-SUBST1 SUBST1 - New Distinct Substrings #suffix-array-8 Given a ...

  3. plugin scala is incompatible with current installation

    源文链接:http://stackoverflow.com/questions/31927516/plugin-scala-is-incompatible-with-this-installation ...

  4. smokeping 报警配置

    摘自: http://blog.csdn.net/achejq/article/details/51556494 smokeping 默认用sendmail 发邮件告警,也可以直接调用外部程序进行报警 ...

  5. 延时加载 lazyload使用技巧

    html <img class="lazy" src="images/src_unit.png" data-src="images/index/ ...

  6. Qt容器组件（二）之QWidgetStack、QMdiArea、QDockWidget

    QT中有九种容器组件,分别是组合框QGroupBox.滚动区QScrollArea.工具箱QToolBox.选项卡QTabWidget.控件栈QWidgetStack.框架QFrame.组件QWidg ...

  7. BZOJ1855 [Scoi2010]股票交易[单调队列dp]

    题 题面有点复杂,不概括了. 后面的状态有前面的最优解获得大致方向是dp.先是瞎想了个$f[i][j]$表示第$i$天手里有$j$张股票时最大收入(当天无所谓买不买). 然后写了一个$O(n^4)$状 ...

  8. bzoj 4278 Tasowanie 后缀数组+贪心

    题目大意 给定两个数字串A和B,通过将A和B进行二路归并得到一个新的数字串T,请找到字典序最小的T.\(len \leq 200000\) 题解 我们从归并排序的角度去想,每次把两者之一较小的取出来 ...

  9. Codeforces 762B USB vs. PS/2 贪心

    Codeforces 762B 题目大意: 有a台只有USB接口的电脑,b台PS/2接口的电脑,c台两种接口都有的电脑.每台电脑只用装一个鼠标.给出n个鼠标及其费用,每个鼠标只能使用一遍.在最大化有鼠 ...

  10. python json ajax django四星聚会

    什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...