2

I would like to have a button that changes data-icon class depending upon user selections

Example button would be:

<a href="#language2" data-rel="popup" data-role="button" 
                     data-icon="english-flag" data-inline="true" 
                     data-position-to="origin">
    <span id="language3">English</span>
</a>

I'd like to know what javascript code I would need to implement in order to change the custom defined data-icon="english-flag" to be instead data-icon="another-flag"

Thanks in advance.

Edit: The answer to my followup questions below on how to specify which button to affect can be found at; How to change a specific JQuery Mobile button icon with javascript

Improve this question

3 Answers 3

Reset to default
8

jQuery Mobile has a predefined function:

$('a').buttonMarkup({ icon: "star" });

It is not enough to change an attribute, final button restyling must be done with .buttonMarkup( function.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

And here's an example: http://jsfiddle.net/Gajotres/AmFKa/

Also, because you are creating a custom button it wont be enough just to change icon name, first you need to define it in your css like this:

<style type="text/css">
    .ui-icon-edit {
       background-image: url(icons-18-white.png); // This should be your picture
       background-repeat: no-repeat;
       background-position: -824px 50%;
    }
</style>

We would add this new icon like this:

$('a').buttonMarkup({ icon: "edit" });

In this case we are adding picture edit. Now notice its cass name .ui-icon-edit, to add a new icon class you need to combine a .ui-icon- string with a icon name. In your case your class name would be .ui-icon-another-flag.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks Gajotres - I have a question on this method though. When I try it in my script, it indeed changes the icon of the button, but it also changes the icons of all my buttons through the entire project. When I try to set a button specific id, and address this id instead of 'a', nothing happens. What am I missing in terms of just setting a specific buttons' icon? Thx
For example - in this edited Fiddle, how would you specify ONLY the English button was starred? jsfiddle.net/rdAnY
This approach just would not work me for, but I found and posted an alternative solution here: stackoverflow.com/a/31841577/763010
0

Just pass in the value to the data function. See the documentation

$("#language2").data("icon", "another-flag");
Improve this answer

Comments

0

You can use $('selector').attr('data-icon', 'newValue') to change the attribute.

The documentation

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.