jquery mobile-第二讲 phonegap Jquery Mobile介绍以及 页面与对话框

jquery mobile-第二讲 phonegap Jquery Mobile介绍以及 页面与对话框

三、Jquery Mobile页面的基本组成

1.<meta name="viewport" content="width=device-width" />

通常情况移动设备以900px的宽度显示页面,加上这句话,可以使页面的宽度与移动设备的屏幕宽度相同

2.页面基本组成

<span style="font-size:14px;"><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>

</span>

四、页面跳转

两种跳转方式

1.ajax

也是jquery mobile的默认方式

第一种页面跳转

<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切换页面的

2.传统的方式

<a href="index2.htm">第 2 页</a>

在ff中可以正常使用，但是在chrome中不会跳转。

必须使用ajax='false'，如下：

<a href="index2.htm" ajax='false'>第 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

Eclipse安装插件支持jQuery智能提示

eclipse安装Aptana 插件，支持Javascript

Sublime Text 2 设置文件详解

Sublime Text2使用、快捷键及插件推荐、中文版下载