PhoneGap中文网

标题: JqueryMobile图标|图标定位|隐藏图片上的文字|去除图标阴影|... [打印本页]

作者: admin 时间: 2013-10-13 14:36
标题: 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透明度。

.ui-icon-myapp-email {
background-image: url( "app-icon-email.png" );
}

复制代码

这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone 4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18×18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myapp-email {
background-image: url( "app-icon-email-highres.png" );
background-size: 18px 18px;
}
...more HD icon rules go here...
}

复制代码

作者: 小雪 时间: 2013-10-14 07:27
非常感谢楼主。。。

作者: 爱哭的鱼 时间: 2013-10-15 03:40
路过，支持一下啦

作者: 小雪 时间: 2013-10-15 22:34
我是来刷分的，嘿嘿顺便学习一下

作者: 1337271837 时间: 2014-5-15 11:24
支持一个

作者: ben_wu007 时间: 2014-8-3 16:32
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈和哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

作者: U_can 时间: 2014-10-16 09:53
受教了，顺便问下去除图标边框和阴影怎么弄？

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)