【Java Mobile】页面与对话框

一个完整的独立页面实例：

　　在body标签内，移动设备上每一个视图或者"page"被一个带有 data-role="page"的容器（通常是div）所标示，在page容器内，任何有效的html标签都可以使用，但是对于Jquery Mobile的典型页面来说，page容器的直接子结点应该为使用"data-role"标记属性为"header""content"和"footer"的3个容器，集合在一起后，这就是一个标准的Jquery Mobile页面了。

页面间的跳转：

　　主要是指在移动设备上载入一个page的容器，一般的有两种，

　　方法一是使用ajax动态导入需要导入的page容器，要求被导入的page容器内不能有同父page内相同的id控件。

　　方法二一般的页面跳转，会重新加载整个html文档。需要设置属性  rel="external", data-ajax="false"，target。

在一个html页面中可以设置多个page容器，多个page容器之间可以相互的跳转，此时需要给每个page容器设置id属性，页面被加载时，默认会显示第一个page容器。

页面跳转时如果使用a标签，可是设置其herf属性，在单击后会自动跳转，也可使用$.mobile.changePage()方法动态实现跳转。

页面转场：

给链接添加data-transition属性，可以设定自定义的页面转场效果，

<a href="index.html" data-transition="pop">I'll pop</a>

1、pop 2、slideup 3、slidedown 4、pop 5、fade 6、flip

另外，如果给链接增加data-direction="reverse"属性，则强制指定为回退的转场效果。

如果你添加了data-rel="back"属性给某个链接，那对于该链接的任何点击行为，都是后退的行为，会无视链接的herf，后退到浏览器历史的上一个地址。

创建对话框：

通过给指向页面的链接增加data-rel="dialog"的属性 ，可把任何指向的页面表现为对话框。可以使用转场效果。

对话框内的任何链接被点击时，都会自动关闭对话框；

要在对话框内创建一个取消"按钮，只需要把该链接的herf指向打开该对话框的按钮然后给链接加上data-rel="back"属性；

手动地调用对话框的close()方法关闭对话框，比如： $('.ui-dialog').dialog('close')。

用到的属性：

data-role ="page" 定义对象的类型 ：header、content、footer

data-ajax="false" 不使用ajax导航

rel="external" 不使用ajax导航

data-rel="back"  后退链接

data-rel="dialog" 表示将以对话框的形式显示一个page容器

data-direction="reverse" 如果给链接增加data-direction="reverse"属性，则强制指定为回退的转场效果

data-url 

data-transition="pop" 用于实现转场效果

 总结：page中包囊着整个移动设备的一个页面，header为一个页面的头部信息，footer为一个页面的底部信息，header和footer可以放置一些常用的button后做一个页面的导航来使用，content为给客户呈现信息的地方，主要的操作或显示。

page间的转场，效果添加在触发转场的a标签属性上来控制，如果是全新载入某个page，需要设置属性rel="external" ，经测试在使用手动转场(即：使用$.mobile.changePage(“目标page”)方法)时即使设置属性rel="external"或data-ajax="false"，也会使用ajax来转场，即把page的内容通过dom动态添加至调用页面。