Javascript 如何在混合移动应用程序中将材料设计lite中的FAB按钮与jQuery移动代码集成？

集成material lite（FAB）按钮时，我面临页面导航问题，即使FAB按钮形状已更改。我应该如何恢复其形状和大小？
这是我的主页index.html，我试图通过不同的div标记将其导航到不同的页面

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

数据角色=“无”属性阻止jQuery mobile自动初始化和CSS增强

尝试将按钮代码更改为：

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

并添加data enhance=“false”作为元素属性，如下所示：

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

添加

编辑#2

---

MDL按钮也可以使用定位标记创建：

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

有关MDL按钮的更多信息，请参见此处：

您可以在jQuery mobile中制作自己的晶圆厂，而无需MDL

HTML

如果需要，可以添加长方体阴影

---

如果您只是为了FAB而将MDL添加到jQuery mobile项目中，那么您应该尝试上面的代码段，因为不需要向浏览器添加额外的负担（额外的CSS和JS）

向按钮添加数据role=“none”，这样jQuery mobile将不会增强它。添加“none”时，点击FAB按钮也不会链接到页面。甚至连它的外观都没有（FAB）和以前一样。为什么在div中的链接中有一个按钮，并且带有data role=“button”？因为我必须打开一个关于点击FAB的新页面，就像在jQuery mobile中一样。@ezankerWhere我应该将data enhance=“false”放在哪里和$.mobile.ignoreContentEnabled？是否有相同的示例？但将按钮代码放在FAB形状上方成功更改，但导航不起作用。MDL按钮也可以使用锚定和输入标记创建。我编辑了答案，以说明如何使用锚定标记完成此操作。现在正确导航到上的下一页工厂的水龙头……谢谢@Gjermund Dahl

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

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

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