JQM属性

data-transition属性【页面切换效果】

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

slide

 从右到左切换(默认)

slideup

从下到上切换

slidedown

从上到下切换

pop

以弹出的形式打开一个页面

fade

渐变退色的方式切换

flip

旧页面翻转飞出,新页面飞入

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


data-rel=”dialog”的属性【对话框】

通过在链接中添加data-rel=”dialog”的属性,可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择
例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>


data-role=”button属性【按钮】

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

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

<div data-role="content"> 
 <p><a href="#about" data-role="button">About this app</a></p> 
</div>
...

<div data-role="content"> 
 <p>This app rocks!</p>
 <a href="#home" data-role="button">Go home</a>
</div>

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

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


data-role=”listview”属性【列表视图】

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。

下面的一些情景将会用到创建列表视图

简单的文件列表项

  • 简单的文件列表,会有一个好看的盒环绕着每一个列表项
  • 链接列表,框架会自动为每一个链接加一个箭头”>”,显示在链接按钮的右侧
  • 嵌套列表,如果你在一个li中嵌套另一个ul,jQuery Mobile会为这个嵌套列表自动建立一个”page”,并为它的父li自动加一个链接,这样很容易实现树状菜单选项,设置功能等等。
  • 分隔线的按钮列表,在一个li中存放2个链接,你可以建立一个还垂直分隔条,用户可点击左侧或右侧的列表选项,展现不同的内容
  • 记数气泡 如果你在列表选项中添加class=”ui-li-count”,框架会在其中生成一个”小泡泡”图标显现于列表选项的右侧,并在”小泡泡”中显示一些内容。类似在收信箱中看到已经收到的信息条数
  • 查找过滤 在ul或ol中添加data-filter=”true”属性。则这个列表项就具备的查询的功能。”Filter result…”文本框将会显示在列表项的上面,允许用户根据条件来将一个大的列表项变小(过滤显示)
  • 列表分隔 将列表项分割,可以在任意列表项上添加属性data-role=”list-divider
  • 列表缩略图和图标。将img元素放在在列表项的开始, jQuery Mobile将会以缩略图的形式来展现,图片的大小为80 X 80像素。如果添加class=”ui-li-icon”类样式img元素的大小将会以16 X 16像素的图标


data-theme属性【主题】

jQuery Mobile渲染的灰色、黑色和蓝色及圆形的组件使其看起来很漂亮,但是如果你的整个应用都使用这样的样式,将会使其变得很乏味。jQuery Mobile允许你自定义官方一些组件的主题。例如:

  • Font family
  • Drop shadows
  • 按钮和盒状元素的边框圆角半径
  • 图标组件
另外,每一个主题包含26种不同颜色的切换(标记从a 到z),可以控制前景颜色,背景色和渐变色,典型用法是使页面元素部分替换,你可以使用data-theme属性。






  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值