CODEWITHSUNDEEP
jqueryjquery-mobile
Marcelo Assis
Marcelo Assis

Reputation: 5194

How to make an DOM element be free of Jquery Mobile auto setting UI classes?

Maybe my question is a little confusing, let me clarify it a little.

I'm using Jquery Mobile, and I want to have it's screen transitions and other things, but I don't want all those UI styles automaticly applied to my elements.

My current problem is the ui-link applied to my links. The others ui-whatever, for the time being aren't bothering me.

I want to avoid this issue in a "friendly way" (without rewriting a lot of CSS or removing them again).

Is there any way of making an element immune to these auto-styling?

The code I wrote:

<div class="page" id="home" data-role="page">
   <a class="bt" href="#page2">Page Two</a>
</div>

The Jquery Mobile generated code

<div id="home" class="page ui-page ui-body-c ui-page-active" data-role="page" data-url="home" tabindex="0" style="min-height: 361px;">
   <a class="bt ui-link" href="#page2">Page Two</a>
</div>

Thanks!

Upvotes: 1

Views: 815

Answers (2)

Marcelo Assis
Marcelo Assis

Reputation: 5194

Found it! Hope it can help someone with the same problem.

Just apply data-role="none" to the element.

Preventing auto-initialization of form elements

If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

<label for="foo">
<select name="foo" id="foo"  data-role="none">
    <option value="a" >A</option>
    <option value="b" >B</option>
    <option value="c" >C</option>
</select>

http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/docs-forms.html

Upvotes: 2

Naftali
Naftali

Reputation: 146310

$(".ui-link").removeClass("ui-link");

That should remove the class from all that have it :-)

Upvotes: 0

Related Questions