How to integrate FAB button in material design lite with jQuery mobile code in hybrid mobile application?

Question

I am facing problem in page navigation while integrating material lite (FAB) button, even FAB button shape is changed.What should I do to restore its shape and size?
This is my main page index.html and I am trying to navigate it to different pages by different div tags.

    <div data-role="button" align="right">
    <a href="#pagethree"><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
    <i class="material-icons">add</i></button>
    </a>
    </div>
    </div>

Answer 1

The data-role="none" attribute prevents jQuery mobile auto-initialization and CSS enhancement.

Try to change your button code to this:

<button data-role="none" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
  <i class="material-icons">add</i>
</button>

Alternately you can use the data-enhance="false" data attribute on a parent element with $.mobile.ignoreContentEnabled set to true.

Also see the section "Preventing auto-initialization of form elements" at the demoes page: http://demos.jquerymobile.com/1.4.5/forms/

EDIT #1

You can set ignoreContentEnabled like this:

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

And add data-enhance="false" as an element attribute like this:

<button data-enhance="false" data-role="none" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
  <i class="material-icons">add</i>
</button>

EDIT #2

MDL buttons can also be created with anchor tags:

<a href="#pagethree" data-role="none" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">
  <i class="material-icons">add</i>
</a>

More about MDL buttons here: http://webdesign.tutsplus.com/tutorials/learning-material-design-lite-buttons--cms-24593

Answer 2

You can make your own FAB in jQuery mobile without MDL .

HTML

<div data-role="footer" data-position="fixed">
    <a href="#popup" data-rel="popup" data-transition="pop" class="ui-btn fab">+</a>
</div>

CSS:

.fab {
     border-radius: 5em;
     float: right;
     font-size: xx-large !important;
     margin-right: 0.3em !important;
     padding: 0.3em 0.7em !important;
     background-color: #F58220 !important;
     border: none !important;
     text-shadow: none !important;
     color: white !important;
}
/*making footer transparent*/
[data-role="footer"] {
     background-color: transparent !important;
     border: none !important;
}

you can add box-shadow if you want.

if you are adding MDL into your jQuery-mobile project just for the FAB then you should try above snippet because there is no need to add a extra burden (extra CSS and JS) to browser