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

Question

我在页面导航中遇到问题，同时集成了材料精简（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>

Answer 1

data-role="none"属性可防止jQuery移动自动初始化和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" $.mobile.ignoreContentEnabled data-enhance="false"数据属性，并将$.mobile.ignoreContentEnabled设置为true。

另请参阅demoes页面上的“防止表单元素的自动初始化”部分： http ：//demos.jquerymobile.com/1.4.5/forms/

编辑＃1

您可以像这样设置ignoreContentEnabled ：

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

并添加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按钮的更多信息，请访问： http ： //webdesign.tutsplus.com/tutorials/learning-material-design-lite-buttons--cms-24593

Answer 2

您可以在没有MDL的情况下在jQuery mobile中创建自己的FAB。

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

你可以根据需要添加box-shadow。

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