PhoneGap中文网

 找回密码
 立即注册
查看: 22383|回复: 6
打印 上一主题 下一主题

JqueryMobile图标|图标定位|隐藏图片上的文字|去除图标阴影|...

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-10-13 14:36:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
JqueryMobile图标|图标定位|隐藏图片上的文字|去除图标阴影|自定义图标|去除按钮阴影/圆角

1、图标定位 data-iconpos
默认情况下,所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos 属性来设置图标的右上方(top)、底部(bottom)、右侧(right)、左侧(left)的文本
2、隐藏图片上的文字 data-iconpos=”notext”
你也可以创建一个图标按钮,设置 data-iconpos=”notext”。按钮插件将隐藏的文字在屏幕上,但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如,data-iconpos=”right”,data-iconpos=”notext”:
3、自定义图标 data-icon=”自定义值”
使用自定义图标,需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类,它的前缀是ui-icon- ,后面的是data-icon值。假如:有一个按钮 data-icon 属性的值为 myapp-email,即 data-icon=“ myapp-email”。那么生产的CSS类是:ui-icon-myapp-email。
然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性,请创建一个白色18×18像素的PNG-8图标,并且保存为Alpha透明度。
  1. .ui-icon-myapp-email {

  2.   background-image: url( "app-icon-email.png" );

  3. }
复制代码
这将创建标准分辨率的图标,但许多设备都有非常高的分辨率的显示器,就像iPhone 4的视网膜显示器。添加一个高清图标,创建一个图标,36X36像素(18像素大小完全相同的两倍),并添加第二个规则使用WebKit分钟装置像素比例:2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18×18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则:
  1. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  2.   .ui-icon-myapp-email {
  3.     background-image: url( "app-icon-email-highres.png" );
  4.     background-size: 18px 18px;
  5.   }
  6.   ...more HD icon rules go here...
  7. }
复制代码
it营
回复

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
沙发
发表于 2013-10-14 07:27:05 | 只看该作者
非常感谢楼主。。。
it营
回复 支持 反对

使用道具 举报

1

主题

91

帖子

89

积分

注册会员

Rank: 2

积分
89
板凳
发表于 2013-10-15 03:40:10 | 只看该作者
路过,支持一下啦
回复 支持 反对

使用道具 举报

6

主题

176

帖子

198

积分

注册会员

Rank: 2

积分
198
地板
发表于 2013-10-15 22:34:16 | 只看该作者
我是来刷分的,嘿嘿顺便学习一下
回复 支持 反对

使用道具 举报

0

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
6#
发表于 2014-8-3 16:32:41 | 只看该作者
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

9

主题

23

帖子

94

积分

注册会员

Rank: 2

积分
94
7#
发表于 2014-10-16 09:53:15 | 只看该作者
受教了,顺便问下去除图标边框和阴影怎么弄?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-12-23 01:34 , Processed in 0.074858 second(s), 36 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表