gpt4 book ai didi

javascript - 温泉 UI 导航器

转载 作者:行者123 更新时间:2023-12-03 10:58:48 24 4
gpt4 key购买 nike

我正在寻找学习 OnsenUi 来替换我的 PhoneGap 项目中的 Jquery。

我想制作一个登录页面,然后切换到主页。

为此,我有 html 代码:

 <!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/topcoat-mobile-onsen-blue.css">
<link rel="stylesheet" href="styles/app.css"/>

<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>

<script src="cordova.js"></script>

<script src="js/app.js"></script>

</head>

<body ng-controller="MyController as ctrl">

<ons-navigator title="Navigator" var="myApp.myNavigator">

<ons-page id="connexion.html">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>

<ons-row style="margin-top: 50px;">
<ons-col align="left">
<div>

<section style="padding: 8px">
<p> Identifiant </p>
<input class="text-input" id="id-input" ng-model="ctrl.id" style="display: block; width: 100%">
</section>

<section style="padding: 8px">
<p> Password </p>
<input type="password" class="text-input" id="password-input" ng-model="ctrl.password" style="display: block; width: 100%">
</section>

<section>
Resté connecté
<ons-checkbox ng-model="ctrl.answer" ng-true-value="true" ng-false-value="false" ng-init="ctrl.answer='true'">
</ons-checkbox>
</section>

<section style="padding: 8px">
<ons-button modifier="large" style="display: block; width: 100%" ng-click="ctrl.connexion()">Connexion</ons-button>
</section>
</div>
</ons-col>
</ons-row>
</hr>
identifiant = {{ctrl.id}}
</hr>
password = {{ctrl.password}}
</ons-page>
</ons-navigator>

<ons-template id="app.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>

<h1>APP</h1>
</ons-page>
</ons-template>
</body>
</html>

`

还有我的js:

(function(){

var mbdGlobal = new Object();
var app = angular.module('myApp', ['onsen.directives']);

app.controller('MyController', function($scope, $window){

this.id = "";
this.password = "";

this.connexion = function(){

mbdGlobal.id = this.id;
mbdGlobal.password = this.password;
mbdGlobal.stayConnected = JSON.parse(this.answer);

alert(JSON.stringify(mbdGlobal));
//myNavigator.pushPage("app.html", { animation: "slide" });
};

});
})();

但是当我启动应用程序时,我只看到第二页。

请你帮助我,因为温泉的网站没有给出真实的例子。谢谢。

最佳答案

您可以通过在导航器内添加属性page来添加默认加载页面。假设你的登录页面名称是login.html,你应该写这样的内容

<ons-navigator var="myNavigator" page="login.html"></ons-navigator>

不要将登录信息放在index.html中,希望有帮助。

关于javascript - 温泉 UI 导航器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28172961/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com