Jquery mobile 按钮图标

jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。例如下图

006zipb5zy7asjtZMXna9&690

一、添加图标到按钮

可以使用ui-icon类将图标添加到按钮上。并可以使用指定的类来设置图标的位置。

下面我们列出jquery mobile提供的常用的图标

006zipb5zy7asjuASVG30&690 

下面我们通过代码创建左箭头

 

006zipb5zy7asjvbn92c4&690

运行结果:

006zipb5zy7asjvJnbT65&690 

 

其中ui-icon-arrow-l表示左箭头, ui-btn-icon-left表示左箭头的位置在左侧。

其他按钮图标的使用也是类似的。

除了ui-btn-icon-left 用来定位之外,还有其他定位方式,分别是:

ui-btn-icon-right:右侧

ui-btn-icon-top: 顶部

ui-btn-icon-bottom:底部

如果为指定按钮图标的位置,图标将不显示。

二、只显示图标

如果想只显示图标,可以设置ui-btn-incon-notext:表示只显示图标,不显示文本。

下面代码表示只显示首页图标

006zipb5zy7asjwmadL6d&690 

006zipb5zy7asjwQu4Ua8&690 

除此之外,我们还可以为图标添加阴影和圆角

006zipb5zy7asjxtcR5d3&690 

运行结果:

006zipb5zy7asjxTRUv7b&690 

三、移除灰色圆圈

我们可以看到,所有的图标都有一个灰色的圆圈,有时间我们是不需要这样的圆圈的,此时可以通过"ui-nodisc-icon"类去除该圆圈

006zipb5zy7asjyBx5A76&690 

运行结果:去除了首页图标带有的灰色圆圈

006zipb5zy7asjz90pKc4&690 

四、改变按钮的颜色

默认情况下,所有图标都是白色的,如果需要改变图标颜色为黑色,可以在元素添加 "ui-alt-icon":

006zipb5zy7asjzQDMG96&690 

运行结果:

006zipb5zy7asjAn3zKdc&690 

转载于:https://my.oschina.net/u/2971691/blog/883995

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值