Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to remove jQuery Mobile styling?

How to remove jQuery Mobile styling?

Problem

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...

Problem courtesy of: Yako

Solution

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

Solution courtesy of: Gajotres

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to remove jQuery Mobile styling?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×