ハイブリッドモバイルアプリケーションのjQueryモバイルコードとMaterial Design LiteのFABボタンの統合方法は？

Question

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> 

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> 

代わりにあなたがtrueに$.mobile.ignoreContentEnabledセットで親要素にdata-enhance="false"データ属性を使用することができます。

またdemoesページで、 "フォーム要素の自動初期化の防止" を参照してください：http://demos.jquerymobile.com/1.4.5/forms/

EDIT＃1

あなたはこのようなignoreContentEnabledを設定することができます。

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

そして、このように要素属性としてdata-enhancing = "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> 

EDIT＃2

MDLボタンはまた、アンカータグを使用して作成することができます：

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

より：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のためのあなたのjQueryのモバイルプロジェクトにMDLを追加する場合