Question

我的问题很简单，有没有办法在JQuery mobile的同一个按钮上添加两个不同的图标？

我试过

<a  class=" clicko ui-btn ui-icon-delete ui-icon-search" href="#foo"  id="1">Venta</a>

但它不起作用。实际上我试图通过JS动态地在按钮中添加一个图标。像这样的东西

<script>
$(document).on('change','[type="radio"]',function(){
$(".me").closest("div").addClass("ui-icon-check");

)};
</script>

所以我想用JS添加一个图标。

任何人都可以帮助我吗

提前致谢

Answer 1

工作示例：http://jsfiddle.net/Gajotres/L55J4/

HTML：

<a  class=" ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left" href="#foo"  id="1">
    Venta
    <span class="ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right ui-shadow-custom"></span>
</a>

CSS：

.ui-shadow-custom {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.15) !important;
}

基本上我在按钮容器中添加了span元素并添加了类按钮用于在右侧显示图标。原始按钮左侧有一个图标。此外，还需要额外的CSS规则来防止内部图标显示幻影。

Answer 2

从您的动态代码看起来您正在使用单选按钮？

如果是这样，你可以添加这样的内联图标（一个有磁盘，另一个使用alt颜色，没有磁盘）：

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>legend</legend>
      <label for="red"><span class="ui-icon-search ui-btn-icon-notext inlineIcon"></span><span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>Red</label>
      <input type="radio" name="favcolor" id="red" value="red" />
      <label for="green"><span class="ui-alt-icon ui-icon-search ui-btn-icon-notext inlineIcon NoDisk"></span><span class="ui-alt-icon ui-icon-delete ui-btn-icon-notext inlineIcon NoDisk"></span>Green</label>
      <input type="radio" name="favcolor" id="green" value="green" />
</fieldset>

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: auto !important;
    padding-left: 10px !important;
    padding-right: 18px !important;
}
.NoDisk{
    padding-left: 8px !important;
    padding-right: 14px !important;    
}
.NoDisk:after {
    background-color: transparent;
}

在无线电更改中动态添加图标：

<fieldset data-role="controlgroup" data-type="horizontal" id="dynamicIcons">
   <label for="r2"><span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>label 1</label>
   <input type="radio" name="favcolor2" id="r2" value="r2" />            
   <label for="g2"><span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>label 2</label>
   <input type="radio" name="favcolor2" id="g2" value="g2" />
</fieldset>


$(document).on("pagecreate", "#page1", function(){

    $(document).on('change','#dynamicIcons [type="radio"]', function(){
        var $label = $(this).parents("div.ui-radio").find("label");
        if ($label.find("span.ui-icon-search").length < 1){
            $(this).parents("div.ui-radio").find("label").prepend('<span class="ui-icon-search ui-btn-icon-notext inlineIcon"></span>');
        }
    });

});

在代码中我使用prepend（）在文本前添加图标。

这是 DEMO

单击标签1和标签2以查看动态添加的图标。

是否可以在JQM的按钮中添加两个图标

2 个答案:

HTML：

CSS：