0

我有这种问题。我有按钮：

<button type="button" data-theme="c">test</button>

在这里，我想插入我的图片而不是文本 TEST：

<img src="resources/images/test-icon.png" align="middle" />

我尝试了几个选项，但找不到解决方案。

谢谢你的帮助！

4

1 回答 1

1

因为您选择了该标签，所以我假设您使用的是 jQuery 移动样式按钮，而不是经典的本机浏览器按钮版本。

如果是这种情况，您的示例将永远无法工作。此外，虽然Amits示例是一个很好的示例，但它永远不会在 jQuery Mobile 中工作。当 jQuery mobile 设置按钮样式时，它会隐藏旧按钮并使用 aa 标签创建新按钮。然后它需要按钮文本并将点击事件重定向到真正的（现在隐藏的）按钮。

我们可以使用这些信息来修改新的按钮样式。不幸的是，在输入按钮和输入提交的情况下，没有javascript就无法完成。

因此，我将向您展示另一种解决方案。

jQuery Moible 按钮也可以这样构造：

<a data-role="button" class="custom-button">Button text goes here</a>

我们可以通过纯 css 轻松修改此按钮，这是一个工作 jsFiddle 示例：http: //jsfiddle.net/Gajotres/2C8Rj/

HTML：

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a data-role="button" class="custom-button"></a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

CSS：

.custom-button {
    height: 50px !important;
}

.custom-button .ui-btn-inner {
    padding: 0 !important;    
}

.custom-button .ui-btn-inner .ui-btn-text {
    display: block !important;
    height: 50px !important;
    width: 100% !important;
    background-image: url('http://shop.ascd.org/images/red-error.gif') !important;
    background-repeat: no-repeat  !important;
    background-position: center  !important; 
}
于 2013-04-25T10:33:15.823 回答