How can I make JQuery Mobile ignore elements by css class?

Question

I have a standard link I want to style my own way within a footer like so:

<div data-role="page">
<div id="footer" data-role="footer" data-position="fixed">
    <a href="somelink.html>some link</a>
</div>

I want the <a> tag to stay as is and not be transfered into this:

<a href="somelink.html" data-theme="a" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">some link</span>
    </span>
</a>

Is there some kind of attribute I can add to the link to stop JQM generated this themed code? I need something similar to the data-role="none" class explained here (but not for a form element)

Answer 1

It's just as you said, add the data-role="none" attribute to the anchor tag.

• Live Example w/ data-role="none" : http://jsfiddle.net/CrBdX/2/
• Live Example wo/ data-role="none" : http://jsfiddle.net/CrBdX/1/

HTML:

<div data-role="page">
    <div id="footer" data-role="footer" data-position="fixed">
        <a href="somelink.html" data-role="none">some link</a>
    </div>
</div>