CODEWITHSUNDEEP
javascripthtmlcssjquery-mobile
Yako
Yako

Reputation: 3484

How to remove jQuery Mobile styling?

I chose jQuery Mobile over other frameworks for its animation capabilities and dynamic pages support.

However, I'm running into troubles with styling. I'd like to keep the basic page style in order to perform page transitions. But I also need to fully customize the look'n feel of headers, listviews, buttons, searchboxes... Dealing with colors only is not enough. I need to handle dimensions, positions, margins, paddings, and so on.

Therefore I struggle with extra divs and classes added by jQuery Mobile in order to override them with CSS. But it is so time-consuming, and it would be way faster to rewrite css from scratch...

Is there a way to load a minimal jQuery Mobile css file ?

Or should I look towards an other mobile framework ? I need to handle page transitions, ajax calls, Cordova compatibility, and of course a fully customizable html/css...

Upvotes: 31

Views: 37168

Answers (5)

Shay
Shay

Reputation: 2100

To be honest i'm fairly disappointed that jQuery mobile didn't provide us with a relatively style-free starting kit, to work merely with what you have said: Ajax, transitions, cordova...

Overriding the generated css classes is absolute madness, but I have done some skunk work and I managed to reduce the uncompressed css file size from a whooping 233kb to merely 27kb, while keeping the important aspects of the css such as transitions, one-page viewing, etc. This way you start almost as you would start with an empty css file.

Perhaps I will upload the file on Github, if there's any demand for it. I wish to do some more testing to see that I didn't leave anything significant behind.

Upvotes: 1

Gajotres
Gajotres

Reputation: 57309

Methods of markup enhancement prevention:

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

  • Method 1:

    It can do it by adding this attribute:

    data-enhance="false"

    to the header, content, footer container.

    This also needs to be turned in the app loading phase:

    $(document).on("mobileinit", function () {
    $.mobile.ignoreContentEnabled=true;
});

    Initialize it before jquery-mobile.js is initialized (look at the example below).

    More about this can be found here:

    http://jquerymobile.com/test/docs/pages/page-scripting.html

    Example: http://jsfiddle.net/Gajotres/UZwpj/

    To recreate a page again use this:

    $('#index').live('pagebeforeshow', function (event) {
    $.mobile.ignoreContentEnabled = false;
    $(this).attr('data-enhance','true');
    $(this).trigger("pagecreate")
});

  • Method 2:

    Second option is to do it manually with this line:

    data-role="none"

    Example: http://jsfiddle.net/Gajotres/LqDke/

  • Method 3:

    Certain HTML elements can be prevented from markup enhancement:

     $(document).bind('mobileinit',function(){
      $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
      //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
 });

    Example: http://jsfiddle.net/Gajotres/gAGtS/

    Again initialize it before jquery-mobile.js is initialized (look at the example below).

Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content

Upvotes: 36

mrzool
mrzool

Reputation: 858

...or just use the official, theme-less version of the CSS built specifically to allow the design of a custom theme while maintaining all of jQuery Mobile functionality.

You don't have to fight with hacks and overrides all the time and you get a lighter CSS.

Win-win.

edit: Also answered here

Upvotes: 11

Zima
Zima

Reputation: 1

i m nô expert but i would love to share à weird method with you . Actually, it s very hectic task : what you need is to edit the jqm css line by line by deleting the property values just leave them blanks before ; you have just to look after the desired sections of the CSS file to adjust or delete value

Do not forget to attach your link rel of your own CSS at the head of your HTML page

I hope it will work for you

Upvotes: -6

Juan Carlos Alpizar Chinchilla
Juan Carlos Alpizar Chinchilla

Reputation: 880

as of jQuery Mobile 1.4.0, the data-enhanced data attribute was added to most of components. Setting this as true attribute will cause jQuery mobile to ignore style enhancement for the component, so you'll have to style the element by your own.

additional information about this in the jQuery Mobile 1.4.0 release notes here http://jquerymobile.com/upgrade-guide/1.4/

Upvotes: 0

Related Questions