jQuery Mobile使用指南-页面切换效果

作者: ldsea 分类: 程序生活 发布时间: 2011-12-31 11:01

 

你可以使用多种不同的切换效果来显示新页面内容,只需要在链接里添加data-transition属性即可。可能的值如下

页面切换效果

例如


  1. <p><a href=”#about” data-transition=”flip”>关于页面</a></p> 

在浏览器中查看效果

注意:查看以上的效果需要您的浏览器支持jQuery Mobile。例如:Mobile Safari, DeskTop Safari,或Chrome。

对话框

通过在链接中添加data-rel=”dialog”的属性,可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择

例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下


  1. <p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>    

注意:目前的测试版本存在问题,当在一个页面中写多个”page”时在以dialog的方式打开一个页面时,不会出现对话框效果

按钮

按钮是触摸式应用程序的一部分,它们扮演链接的功能,因为它们提供了更大的目标,当你点击链接的时候(比较适合,手指比较胖的人群)

在jQuery Mobile中把一个链接变成button的效果,只需要在标签中添加data-role=”button属性即可”。例如:


  1. <div data-role="content"> 
  2.     <p><a href="#about" data-role="button">About this app</a></p>    
  3.   </div> 
  4.   
  5. … 
  6.   
  7.   <div data-role="content"> 
  8.     <p>This app rocks!</p> 
  9.     <a href="#home" data-role="button">Go home</a> 
  10.   </div> 

另外jQuery Mobile也会自动的转换像表单元素中的submit,reset,button,或image为按钮样式。

还可以利用data-icon属性建立各式各样的按钮,建立行内按钮和按钮组(水平或垂直的)

格式化文本

为了使其尽可能的灵活,jQuery Mobile使更多的普通HTML内容更加独立。加入适当的缩进使内容的可读性更强。

有两种布局方法使其格式化变得更简单:布局表格和可折叠的内容块

◆布局表格:组织内容以列的形式显示,有两列表格,和三列表格

◆可折叠的内容:当点击内容块的标题,则会将其隐藏的详细内容展现出来

下面是一个可折叠内容的实例,单击标题将看到具体的内容,再点击标题则会将展现的内容隐藏。


  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.   <title>Collapsible Content Demo</title> 
  5.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"  /> 
  6.   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
  7.   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
  8. </head> 
  9. <body> 
  10.   
  11. <div data-role="page" id="home"> 
  12.   
  13.   <div data-role="header"> 
  14.     <h1>Home</h1> 
  15.   </div> 
  16.   
  17.   <div data-role="content"> 
  18.     <div data-role="collapsible" data-state="collapsed"> 
  19.       <h3>About this app</h3> 
  20.       <p>This app rocks!</p> 
  21.     </div> 
  22.   </div> 
  23.   
  24. </div> 
  25.   
  26. </body> 
  27. </html> 

发表回复

您的电子邮箱地址不会被公开。