Ich habe einen Testcode geschrieben und fordert.js verwendet, um mit einem Plug-in-text.js zu arbeiten, um die einfachste einseitige Anwendung zu implementieren. Es kann leicht aufgezeichnet werden und die zukünftige Überprüfung erleichtern.
GIT -Adresse: https://github.com/lily1010/requirespa
Schauen wir uns das Verzeichnis unten an
Wie aus dem obigen Projekt hervorgeht, habe ich CSS getrennt extrahiert und die On-Demand-Belastung implementiert, dh test1.css werden geladen, wenn test1.html geladen ist, und Test2.CSS wird geladen, wenn test2.html geladen wird.
1. Schauen wir uns zuerst den Code für Eintragsindex an.html an
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> </title> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1, minimal-scale = 1, maximal-scale = 1, user-scalable <script data-main = "js/main" src = "js/required.js"> </script> <div> </div> </body> </html>
Das obige ist sehr einfach. Definieren Sie zunächst die Daten-Main für RequiredJS-Einträge. Um CSS auf Demand zu laden, habe ich außerdem ein CSS-Attribut der Klasse definiert.
2. Konfigurieren Sie den Pfad und führen Sie logische Verarbeitung in main.js durch
require.config({ paths:{ "jquery":"lib/jquery-1.11.0", "text":"lib/text", "text1":"../template/test1.html", // Pay attention to the path "text2":"../template/test2.html", "css1":"../style/test1.css", "CSS2": "../ style/test2.css"}}) fordern (['jQuery', 'text! text1', 'text! text2', 'text! css1', 'text! $ (". CSS-Attribute"). HTML (CSS1); $ (". Seite"). HTML (Template2);Die oben genannten sind die grundlegendste Erfordernisse Konfiguration. Achten Sie einfach auf die Verwendung von Text.js, es ist sehr einfach
3. Schauen wir uns die zweiseitigen Strukturen und Stile an
①Die test1.html Code ist wie folgt:
<Div> <taste> Klicken Sie auf mich, um zur zweiten Seite des Spa </button> </div> zu springen
②Die CSS von test1.html, dh Test1.css -Code lautet wie folgt:
.Test1 {Position: absolut; Top: 0; unten: 0; links: 0; Rechts: 0; Hintergrundfarbe: rot;}. Skip {Position: absolut; Top: 50%; Links: 50%; -Webkit-Transformation: Translate (-50%,-50%); Transformation: Translate (-50%,-50%);}Der Effekt ist wie folgt:
③Die test2.html Code lautet wie folgt:
<Div> <buttons> Ich bin die zweite Seite. Klicken Sie auf mich, um zur ersten Seite zurückzukehren. </button> </div>
④Die CSS von Test2.html, dh Test2.css Code lautet wie folgt:
.Test2 {Position: absolut; Top: 0; unten: 0; links: 0; Rechts: 0; Hintergrundfarbe: Pink;}. Skip2 {Position: absolut; Top: 50%; Links: 50%; -Webkit-Transformation: Translate (-50%,-50%); Transformation: Translate (-50%,-50%);}Der Effekt ist wie folgt:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.