Question

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

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

而不是文本TEST我想插入我的图片：

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

我尝试了几种选择但我找不到解决方案。

感谢您的帮助！

Answer 1

因为你选择了那个标签我会假设你使用的是jQuery移动设备风格的按钮而不是经典的原生浏览器按钮版本。

如果是这种情况，那么你的例子永远不会有效。此外，虽然 Amits 示例是一个很好的例子，但它永远不会在jQuery Mobile中运行。当jQuery mobile设置一个按钮时，它会隐藏旧按钮并从标签中创建一个新按钮。然后它需要按钮文本并将点击事件重定向到真实（现在隐藏）按钮。

我们可以使用此信息来修改新的按钮样式。不幸的是，在输入按钮和输入提交的情况下，没有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; 
}

jquery mobile：如何将图像插入按钮

1 个答案: