2017-10-16 7 views
0

entwirft Ich brauche eine schön formatierte Form on onsen ui, aber ich kann nicht. Kann jemand helfen? Auch die Seitennavigation funktioniert nicht, wenn ich verschiedene HMTL DateienWie man native Form auf onsen ui

window.fn.pushPage = Funktion (Seite anim) { if (anim) { document.getElementById ('myNavigator'). PushPage (Seite .id, {data: {title: page.title}, Animation: anim}); } sonst { document.getElementById ('myNavigator'). PushPage (page.id, {data: {title: page.title}}); } };

Antwort

0

Um eine reibungslose Navigation auf Ihrer multipaged mobile HTML-Seite mit onsen UI zu erreichen, müssen Sie folgendes tun:

1) Legen Sie den Tag in der index.html-Seite. Dies sollte innerhalb des Tags Beispiel platziert werden, unter

gezeigt
<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <meta http-equiv="Content-Security-Policy" 
      content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 
    <script src="lib/onsenui/js/onsenui.min.js"></script> 
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 

</head> 
<body> 

<ons-navigator id="navigator" var="navigator"></ons-navigator> 

...... 
</body> 
</html> 

2) Ihre inneren Seiten sollten keine Starttag oder andere ähnliche Tags haben, sollte aber etwas aussehen wie unten dargestellt (vorausgesetzt, diese Seite ist mein Sekunde -page.html)

<ons-page id="my-second-page"> 

....... 


</ons-page> 

3) zum navigieren von my-zweiten-Seite my-Dritt seite.html, verwendet, um die UI Onsen pushPage Funktion wie unten gezeigt. Dies ist ein JavaScript-Snippet, das in Ihrer Javasript-Datei gespeichert wird. Dieser Code wird ausgeführt, wenn ein Benutzer auf eine Schaltfläche klickt, um zu my-third-page.html

document.querySelector('#navigator').pushPage('my-third-page.html'); 
zu navigieren