如何将 material design lite 中的 FAB 按钮与混合移动应用程序中的 jQuery 移动代码集成？

Question

我在集成 material 精简版 (FAB) 按钮时遇到页面导航问题，即使是 FAB 按钮形状也是 changed.What 我应该如何恢复其形状和大小？
这是我的主页 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>

或者，您可以在 $.mobile.ignoreContentEnabled 设置为 true 的父元素上使用 data-enhance="false" 数据属性。

另请参阅演示页面的 "Preventing auto-initialization of form elements" 部分：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

您可以在 jQuery 移动设备 中创建自己的 FAB，无需 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;
}

如果需要，您可以添加框阴影。

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

如何将 material design lite 中的 FAB 按钮与混合移动应用程序中的 jQuery 移动代码集成？

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

html

javascript

jquery-mobile

material-design