如何在 jQuery Mobile 中使用图像作为按钮？

Question

我搜索了如何将 jQuery Mobile 中的默认按钮替换为自定义图像，因为我正在实现代码来构建 PhoneGap 应用程序。我找到了这个one useful link。

我有这样的代码：

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom">Custom Icon</a>

CSS 是：

.ui-icon-myapp-settings {
  background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

它仍然显示一个 + 图标而不是我的图标。

css directory -- ../css/style.css
image directory  ../css/images/settings.png

我得到如下视图：

代码或图片位置有什么问题？

Answer 1

如果您需要比图标更大的东西，为了将图像用作按钮，只需使用以下内容：

<a href="venta.html" data-theme="" id="ventaOption"> <img src="css/images/standard/shoppingcart.png" width="26" height="26"> <br/> Ventas </a>

Answer 2

试试这个：

<a data-role="button" href="#" data-shadow="false" data-theme="none">
  <img src="images/imagefile.png" border="0"/>
</a>

在您的按钮上将“data-theme”设置为“none”并添加“data-shadow="false"。

Answer 3

<a id='btnShowSignUp' href="#" data-shadow="false" data-theme="none"
                                    onclick="ShowSignUp();">
<img src="../assets/downArrow.png" style="height: 15px;">
</a>

从锚标记开始，并在点击调用方法上添加 href。然后添加img标签。

Answer 4

.ui-icon-myapp-settings {
    background: url("images/settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

试试这个。

自定义图标

要使用自定义图标，请指定一个具有唯一名称的 data-icon 值，例如 myapp-email，按钮插件将通过在 data-icon 值前面加上 ui-icon- 来生成一个类并将其应用于按钮。然后，您可以编写一个针对 ui-icon-myapp-email 类的 CSS 规则来指定图标背景源。为保持视觉一致性，请创建一个 18x18 像素的白色图标，另存为具有 alpha 透明度的 PNG-8。

Answer 5

编辑：

看了你的一些 cmets 之后，我喜欢你想要一个自定义按钮图像。像这样的东西有用吗？

• http://jsfiddle.net/DfDet/10/

我会查看自定义标题或导航栏，这里是文档：

• http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
• http://jquerymobile.com/test/docs/toolbars/docs-headers.html

原答案如下：

您需要在 data-icon 属性值前面加上 ui-icon-，在您的示例中为 myapp-custom

所以你的 CSS 类应该是这样的：

.ui-icon-myapp-custom {
    background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

HTML

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom" >
Custom Icon
</a>

jQM 文档：

• http://jquerymobile.com/test/docs/buttons/buttons-icons.html

自定义图标
要使用自定义图标，请指定具有 像 myapp-email 这样的唯一名称，按钮插件将生成一个 通过 将 ui-icon- 前缀到 data-icon 值 并将其应用于 按钮。然后，您可以编写一个针对 ui-icon-myapp-email 类指定图标背景源。到 保持视觉一致性，创建一个 18x18 像素的白色图标另存为 具有 alpha 透明度的 PNG-8。

示例：（看起来不太好，但有自定义图标）

• http://jsfiddle.net/DfDet/2/

Answer 6

改变你的

 data-icon="myapp-custom"

到

 data-icon="myapp-settings"

如果 css 是 ui-icon-myapp-settings