8-2 jQuery Mobile 基本组件

页面

页面使用例子


    

欢迎访问我的主页

我是一名移动开发者!

页脚文本

例子解释

  • data-role="page" 是显示在浏览器中的页面
  • data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
  • data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
  • data-role="footer" 创建页面底部的工具栏

多页面 和 页面跳转

例子




例子解释

  • 通过ID可以区分不同页面
  • 在链接使用 #页面名 可以跳转到不同页面
  • 如果需要跳转到外部页面的话 需要指定页面地址
  • 使用 ** data-rel="dialog" ** 参数可以 以弹框的形式打开新页面

页面过渡效果

浏览器支持

  • Internet Explorer 10 支持 3D 转换(更早的版本不支持)
  • Opera 仍然不支持 3D 转换

主要是通过 data-transition属性来实现的

例子



    
    
        
        
        
    
    
    
        

欢迎来到我的主页

点击链接来查看滑动效果(从右向左滑动到下一页)

滑动到页面二

页脚文本

欢迎来到我的主页

点击链接来查看反向的滑动效果(从左向右滑动到前一页)

滑动到页面一(反向)

页脚文本

例子解释

  • **data-transition="slide" ** 设置页面切换效果, 从右向左滑动到下一页。
  • data-direction="reverse" 通过设置 reverse 可以进行反方向切换。
  • 页面默认是淡入淡出到下一页, 即 fade;

data-transition 可使用的值

过渡 描述
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面,引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。

按钮

jQuery Mobile 中的按钮可通过三种方法创建:

    使用 

    使用  元素
    

    使用 data-role="button" 的  元素
    按钮

注意:
在 jQuery Mobile 中,按钮会自动样式化,让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 < a> 元素在页面间进行链接,使用

提示:默认情况下,组合按钮是垂直分组的,彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角,在组合后就创造出了漂亮的外观。

后退按钮

如需创建后退按钮,请使用 data-rel="back" 属性(会忽略锚的 href 值)

返回

按钮实例



    
    
        
        
        
    
    
    
        

这里是导航按钮

这里是导航按钮END

这里是行内按钮

页脚文本

后退按钮实例

页脚文本

用于按钮的 data-*常用属性

|属性 | 值 | 描述|
|:---||:---||:---|
|data-corners | true OR false | 规定按钮是否有圆角。 |
|data-mini | true OR false | 规定是否是小型按钮。 |
|data-shadow | true OR false | 规定按钮是否有阴影。 |

jQuery Mobile Data 属性

http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp


按钮图标

如需向您的按钮添加图标,请使用 data-icon 属性

语法

搜索

 

例子



    
    
        
        
        
    
    
    
        

带有图标的按钮

页脚文本

带有图标的按钮

页脚文本

首页

家是心之所在!

返回 只显示图标

页脚文本

选项

您刚敲击了选项按钮!

返回

页脚文本

信息

jQuery Mobile 很有趣!

页脚文本

例子解析

  • ** data-icon="back"** 用来指定图标类型
  • ** data-iconpos="top"** 用来指定图标被放置的位置(top, right,bottom,left )
  • ** data-iconpos="notext"** 可以让按钮只显示图标不显示文字

图标参考手册

http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html


未完待续。。。

你可能感兴趣的:(8-2 jQuery Mobile 基本组件)