CSS 如何在 jQuery Mobile 中将图像用作按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7819734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use an image as a button in jQuery Mobile?
提问by Sahil Grover
I went through a search about how default buttons in jQuery Mobile can be replaced by custom images, as I am implementing code to build a PhoneGap app. I found this one useful link.
我搜索了如何用自定义图像替换 jQuery Mobile 中的默认按钮，因为我正在实现代码来构建 PhoneGap 应用程序。我发现这是一个有用的链接。
I have code like this:
我有这样的代码：
<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom">Custom Icon</a>
And the CSS is:
CSS是：
.ui-icon-myapp-settings {
background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}
Still it shows a + icon and not my icon.
它仍然显示一个 + 图标而不是我的图标。
css directory -- ../css/style.css
image directory ../css/images/settings.png
And I get a view like:
我得到这样的观点：
What's wrong with the code or Image location?
代码或图像位置有什么问题？
回答by Chongkan
If you need something bigger than the icon, in order to use an image, as a button, just use the following:
如果您需要比图标更大的东西，为了将图像用作按钮，只需使用以下内容：
<a href="venta.html" data-theme="" id="ventaOption">
<img src="css/images/standard/shoppingcart.png" width="26" height="26">
<br/>
Ventas
</a>
<a href="venta.html" data-theme="" id="ventaOption">
<img src="css/images/standard/shoppingcart.png" width="26" height="26">
<br/>
Ventas
</a>
回答by user2509987
Try this:
尝试这个：
<a data-role="button" href="#" data-shadow="false" data-theme="none">
<img src="images/imagefile.png" border="0"/>
</a>
set the "data-theme" to "none" on your button and add "data-shadow="false".
将按钮上的“data-theme”设置为“none”并添加“data-shadow="false”。
回答by Sameera Thilakasiri
.ui-icon-myapp-settings {
background: url("images/settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}
Try this out.
试试这个。
Custom Icons
自定义图标
To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
要使用自定义图标，请指定一个具有唯一名称（如 myapp-email）的 data-icon 值，按钮插件将通过在 data-icon 值前添加 ui-icon- 前缀来生成一个类并将其应用于按钮。然后，您可以编写一个针对 ui-icon-myapp-email 类的 CSS 规则来指定图标背景源。为了保持视觉一致性，创建一个 18x18 像素的白色图标，保存为具有 alpha 透明度的 PNG-8。
回答by Phill Pafford
EDIT:
编辑：
After looking at some of your comments I like you wanted a custom button image. Would something like this work?
看了你的一些评论后，我喜欢你想要一个自定义按钮图像。这样的东西会起作用吗？
I would look into a custom header or navbar, here are the docs:
我会查看自定义标题或导航栏，这里是文档：
- http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
- http://jquerymobile.com/test/docs/toolbars/docs-headers.html
- http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
- http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Original Answer Below:
原答案如下：
You need to prepend ui-icon-to you data-icon attribute value, which in you example is myapp-custom
你需要在ui-icon-你的数据图标属性值前面加上，在你的例子中是myapp-custom
So your CSS class should be this:
所以你的 CSS 类应该是这样的：
.ui-icon-myapp-custom {
background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}
HTML
HTML
<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom" >
Custom Icon
</a>
jQM Docs:
jQM 文档：
Custom Icons
To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon valueand apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.
自定义图标
要使用自定义图标，请指定一个具有唯一名称的数据图标值，例如 myapp-email，按钮插件将通过在数据图标值前添加 ui-icon- 来生成一个类并将其应用于按钮。然后，您可以编写一个针对 ui-icon-myapp-email 类的 CSS 规则来指定图标背景源。为了保持视觉一致性，创建一个 18x18 像素的白色图标，保存为具有 alpha 透明度的 PNG-8。
Example: (Doesn't look nice but has the custom icon)
示例：（不好看但有自定义图标）
回答by DWolf
Change your
改变你的
data-icon="myapp-custom"
to
到
data-icon="myapp-settings"
if the css is ui-icon-myapp-settings
如果 css 是 ui-icon-myapp-settings
