Wie kann man die FAB-Schaltfläche in Material Design Lite mit jQuery Mobile Code in einer hybriden mobilen Anwendung integrieren?

Ich habe ein Problem in der Seitennavigation bei der Integration der Material Lite (FAB) -Taste, sogar die FAB-Tastenform wurde geändert. Was muss ich tun, um seine Form und Größe wiederherzustellen?
Dies ist meine Hauptseite index.html und ich versuche, sie durch verschiedene div Tags zu verschiedenen Seiten zu navigieren.Wie kann man die FAB-Schaltfläche in Material Design Lite mit jQuery Mobile Code in einer hybriden mobilen Anwendung integrieren?

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

Quelle

2016-04-18 Shreya Rawal

hinzufügen Daten-Rolle hinzufügen = "none" zu der Schaltfläche, so dass jQuery Mobile es nicht verbessert. – ezanker

Wenn Sie "none" hinzufügen, wird die Seite beim Antippen der FAB-Taste nicht verbunden. Auch das Aussehen (FAB) ist gleich wie zuvor. –

Warum haben Sie eine Schaltfläche in einem Link innerhalb einer div mit Daten-Role = "Schaltfläche"? – ezanker

Das data-role="none" Attribut verhindert, dass jQuery Mobile Auto-Initialisierung und CSS Erweiterung.

Versuchen Sie, Ihre Schaltfläche Code, dies zu ändern:

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

Alternativ Sie die data-enhance="false" Datenattribut auf einem übergeordneten Element mit $.mobile.ignoreContentEnabled Satz auf true verwenden können.

Siehe auch den Abschnitt "Verhindern, dass Auto-Initialisierung von Formularelemente" an der Demos Seite: http://demos.jquerymobile.com/1.4.5/forms/

EDIT # 1

Sie ignoreContentEnabled wie folgt einstellen:

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

Und fügen Sie daten-verbessern = "falsch" als ein Element-Attribut wie folgt hinzu:

<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 Tasten können auch mit Anker-Tags erstellt werden:

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

Mehr über MDL Tasten hier: http://webdesign.tutsplus.com/tutorials/learning-material-design-lite-buttons--cms-24593

Quelle

2016-04-19 12:41:59

Wo sollte ich daten-enhance = "false" und $ .mobile.ignoreContentEnabled setzen? Gibt es ein Beispiel für das gleiche ?? –

Aber der Code über der FAB-Form wird erfolgreich geändert, aber die Navigation funktioniert nicht. –

MDL-Schaltflächen können auch mit Anker- und Eingabe-Tags erstellt werden. Ich habe meine Antwort bearbeitet, um zu zeigen, wie dies mit einem Anker-Tag gemacht werden kann. –

Sie können machen Sie Ihre eigene FAB in jQuery mobile ohne 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; 
}

können Sie box-shadow hinzufügen, wenn Sie möchten.

wenn Sie MDL in Ihr jQuery-Mobile-Projekt hinzufügen, nur für die FAB dann sollten Sie über Schnipsel versuchen, denn es gibt keine Notwendigkeit, eine zusätzliche Belastung (extra CSS und JS) Zum Browser

Quelle

2016-04-22 12:22:01

Wie kann man die FAB-Schaltfläche in Material Design Lite mit jQuery Mobile Code in einer hybriden mobilen Anwendung integrieren?

Antwort

Verwandte Themen