CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4886

Is it possible to add two icons in a button of JQM

My question is simple is there a way I can add two different icons on the same button in JQuery mobile?

I tried 

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

But it does not work . Actually I am trying to add an icon in the button dynamically through JS. Something like this 

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

)};
</script>

So I am trying to add one more icon using JS .

Can anyone help me out in this

Thanks in advance

Upvotes: 2

Views: 1678

Answers (2)

ezanker
ezanker

Reputation: 24738

From your dynamic code it looks like you are using radio buttons?

If so you can add inline icons like this (one has the disk, the other uses alt color with no disk):

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

To add the icon dynamically on radio change:

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

});

In the code I am using prepend() to add the icon before the text.

Here is a DEMO

Click label 1 and label 2 to see icons added dynamically.

Upvotes: 2

Gajotres
Gajotres

Reputation: 57309

Working example: 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;
}

Basically I have added span element inside a button container and add it classes buttons use to show icon on the right side. Original button has a icon on a left side. Plus additional CSS rule is needed to prevent inner icon from displaying phantom shadow.

Upvotes: 4

Related Questions