如何在混合移動應用程序中將材料設計精簡版中的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）