Shreya Rawal Shreya Rawal - 7 months ago 150
HTML Question

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

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

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