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;
}

试试这个。

自定义图标

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

Answer 5

编辑：

在查看您的一些评论后，我希望您想要一个自定义按钮图像。这样的事情会起作用吗？

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

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

下面的原始答案：

您需要将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

自定义图标
要使用自定义图标，请指定具有a的数据图标值像myapp-email这样的独特名称和按钮插件将生成一个通过将ui-icon-添加到数据图标值并将其应用于按钮。然后，您可以编写一个针对该目标的CSS规则 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

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

6 个答案: