一、为什么要学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. matlab高亮显示选中的变量

    第一步:点preference. 第二步:

  2. 在EditText插入表情，并发送表情

    在EditText插入表情,点击发送按钮,将qq表情显示在TextView中: [mw_shl_code=java,true]public class EditTextActivity extends ...

  3. 应用提交 App Store 上架被拒绝

    审核的参考资料 https://developer.apple.com/icloud/documentation/data-storage/index.html https://developer.a ...

  4. 在node.js中建立你的第一个HTTp服务器

    这一章节我们将从初学者的角度介绍如何建立一个简单的node.js HTTP 服务器 创建myFirstHTTPServer.js //Lets require/import the HTTP modu ...

  5. hdu1521排列问题

    题目链接 利用指数型母函数解决排列问题 1.口袋中有白球2个,红球3个,黄球1个,任取3个作为一个排列,总共有多少种排列? 类似地用指数型母函数解决 用(1+x/1!+x2/2!)表示取白球0个,1个 ...

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

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

  7. bzoj 2946 公共串 —— 后缀自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2946 建出 n-1 个后缀自动机一起跑呗. 代码如下: #include<cstdio ...

  8. Jmeter提取响应数据的结果保存到本地的一个文件

    原文地址: https://www.cnblogs.com/whitewasher/p/9504728.html 当做性能压测时,可能会需要把响应数据的一些字段统计出来.这里简单介绍一下. 1.首先把 ...

  9. UnrealScript常用函数汇总

    转自:http://www.unrealchina.org/forum.php?mod=viewthread&tid=672&extra=page%3D1 foreach [用来遍历游 ...

  10. 在GridView的RowDataBound事件中获取某行某列的值！

    protected void gdvOrders_RowDataBound(object sender, GridViewRowEventArgs e)   {               if (e ...