Jquery Mobile介绍以及Jquery Mobile页面与对话框 

一、 Adobe Dreamweaver CS6 环境

最新版本的cs6会支持JM的使用，有自动提示功能，很强大。
安装说明地址：http://www.phonegap100.com/article-79-1.html 
下载地址说明：http://bbs.phonegap100.com/thread-135-1-1.html 

二、JM说明

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

1、Jquery Mobile页面的基本组成 
        <meta name="viewport" content="width=device-width" /> 
        通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同
        需要引用的文件有：
        

1
2
3
<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>

2、JM主要标签说明

1
2
3
4
5
<div   data-role="page">
  <div   data-role="header">头部</div>
  <div   data-role="content">被容</div>
  <div   data-role="footer">底部</div>
</div>

第一个实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
!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>

3、跳转

第一种：<a href="#page">返回主页</a> 将跳转到id=page的div上

第二种：与普通的html跳转相同，<a href="index2.htm">第 2 页</a>

4、对话框

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

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

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

属性可选值：

1
pop（默认）, fade，flip，turn，flow，slidefade，slide，slideup，slidedown，none




（二）Jquery Mobile介绍以及Jquery Mobile页面与对话框的更多相关文章

  1. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

    一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

  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的介绍

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

  6. jQuery的介绍

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

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

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

  8. jQuery简单介绍

    一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  9. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

随机推荐

  1. log4j之mybatis配置

    简单记录一下,配置,因为项目要转向maven架构,所以jar有maven管理,配置完成之后发现原先的sql语句都出不来了,于是搜了一下 mybatis+log4j所需要的依赖如下(我列出我用的版本): ...

  2. Django Template模板

    Django Template 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python 代码之中. 下面我们来调用html views def ind ...

  3. ASP之Eval、Execute、ExecuteGlobal区别分析

    Eval.Execute.ExecuteGlobal 这三个语句(函数)都是执行字符串表达式,不过它们之间又有所不同. Eval 计算一个表达式的值并返回结果. 语法:[result = ]eval( ...

  4. 简单时钟——css3

    这里我们使用css3的特性制作一个简易的时钟,代码如下: <!DOCTYPE html><html> <head> <meta charset="U ...

  5. elasticsearch使用jetty进行简单的权限控制

    默认elasticsearch是使用netty作为http的容器,由于netty并没有权限模块,所以默认es没有任何的权限控制,直接通过http就可以进行任何操作,除非把http禁用.但如果你使用el ...

  6. 分布式数据库Cobar

    Cobar简介: Cobar是关系型数据库的分布式处理系统,它可以在分布式的环境下看上去像传统数据库一样为您提供海量数据服务. 产品在阿里巴巴B2B公司已经稳定运行了3年以上. 目前已经接管了3000 ...

  7. Oracle Sql优化之报表和数据仓库运算

    1.行转列:有两种写法,一种是case when end写法,另一种写法是pivot(oracle 11g新增) select job, then sal end) as sal10, then sa ...

  8. 转：Jmeter常见问题 （转载） http://www.51testing.com/?uid-128005-action-viewspace-itemid-84094

    说明:这些问答是从网上转载的,自己修改了其中的一些内容,如果大家兴趣,可以将大家在使用Jmeter的时候碰到的问题写下来,我们一起补充到这个问答里面,共同努力完善jmeter的资料. 1.  JMet ...

  9. C++：new 和 delete

    在 C++ 中 , 使用 new 操作符动态申请内存的时候,如果申请失败,则会抛出  bad_alloc异常 当使用  delete 释放一块内存的时候 , 有些编译器上delete 不能判断一块内存 ...

  10. php的header函数之设置content-type

    //定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header('Content-type: application/at ...