Monaca creates a member registration page using AngularJS + Onsenui.
I'd like to put ons-tabbar in ons-navigator and change the page for each input item.
Since we want to check the input for each page input, if we press the OK button after input, we will call the function instead of page transition, enter the data in Localstrage, and if there is no problem with input, we want to transition the page.
I originally created it without using tabbar, but I wanted to clarify the creation step and return to each step before the final confirmation, so I was not sure where it was being reworked.
<ons-navigator var = "myNavigator">
<ons-page ng-controller = "pageCtrl as pctrl">
<ons-toolbar>
{{pctrl.title}}
</ons-toolbar>
<ons-tabbar position = "top">
<ons-tab page = "step1.html" label = "Step1" icon = "walking" active></ons-tab>
<ons-tab page = "step2.html" label = "Step2" icon = "walking"></ons-tab>
<ons-tab page = "step3.html" label = "Step3" icon = "walking"></ons-tab>
<ons-tab page = "step4.html" label = "Step4" icon = "walking"></ons-tab>
</ons-tabbar>
</ons-page>
</ons-navigator>
<!-Step1: Nickname input screen->
<ons-template>
<ons-page ons-show = "pctrl.title = 'Enter nickname'">
<form>
<p style = "font-size: 25pt;color: # 1028fd;text-align: center;line-height: 70px;">Registration</p>
<p style = "font-size: 15pt;text-align: center;">Please choose a nickname</p>
<ons-input modifier = "underbar" placeholder = "Nickroom: 10 characters or less is recommended" name = "NickNameBox"></ons-input>
<i aria-hidden = "true"></i>
<ons-button onclick = "localStorageSetItem ();" required><center>OK</center></ons-button>
<input type = "button" value = "back" onClick = "location.href = 'index.html'">
</form>
</ons-page>
</ons-template>
<!-Step2: Date of birth input screen->
<ons-template>
<ons-page ons-show = "pctrl.title = 'Birth date'">
</ons-page>
</ons-template>
<script>
// Module definition
var myApp = ons.bootstrap ('myApp', []);
/ **
* Screen transition controller
* /
myApp.controller ('pageCtrl', function () {
// get the tab bar
var tabbar = document.querySelector ("ons-tabbar");
// Go to the first tab
this.changeStep1Tab = function () {
tabbar.setActiveTab (0);
};
// Go to the second tab
this.changeStep2Tab = function () {
tabbar.setActiveTab (1);
}
// Go to the third tab
this.changeStep3Tab = function () {
tabbar.setActiveTab (2);
}
// Go to the fourth tab
this.changeStep4Tab = function () {
tabbar.setActiveTab (3);
}
});</script>
<script>
var KEY = "NickName";
// Set local storage.
function localStorageSetItem () {
if (document.getElementById ("NickNameBox"). value == "") {
alert ("Nickname has not been entered")
} else {
localStorage.setItem (KEY, JSON.stringify (document.getElementById ("NickNameBox"). value));
location.href = 'step2.html';
}
}
</script>
What you do n’t understand
I want to make a transition within a page after confirming the input with the function localStorageSetItem () (nickname), but in the current code, it transitions to EntryPage2.html in another file.
Is it possible to operate onsenui from within a function with Anglarjs?
<ons-button onclick = "localStorageSetItem ();">OK</ons-button>
function localStorageSetItem () {
// ※ I want to write a code that performs transition (step2.html) in the page
}
without function
<ons-tabbar position = "top">
<ons-tab page = "step1.html" label = "Step1" icon = "walking" active></ons-tab>
<ons-tab page = "step2.html" label = "Step2" icon = "walking"></ons-tab>
</ons-tabbar>
Now we have a transition.
Tell me how to perform page transition by performing onsenui operation in Anglarjs from within the function.
Thank you in advance.
Added (November 24, 2019)
Replace location.href = 'step2.html';
myNavigator.bringPageTop ("step2.html");or myNavigator.pushPage ("step2.html");
After changing to, the transition was made, but the tabbar disappeared.
I would like a way to make a transition while leaving the tabbar.
-
Answer # 1
Related articles
- advanced javascript users please tell us about intersection observer
- please tell me how to write super basic javascript
- javascript - please tell me how to count the number checked with the checkbox
- please tell me how to undisabled javascript
- please tell me how to undisabled javascript
- # i want to perform addition calculation asynchronously with javascript
- javascript - please tell me about the state of global variables in python when deploying the flask app on heroku
- javascript - about processing when you want to pass a query to the url at the time of page transition on the website
- javascript - please tell me how to execute a function with undetermined arguments
- mysql - please tell me an example of db design with transition status
- page transition when the countdown timer is 0 in javascript
- javascript - please tell me about the mechanism used to log in to heroku
- javascript - about page transition and countdown days at the end of the timer
- javascript - [web] please tell us how to automatically link all of the specific keywords in the text, or about global match
- javascript - i want to pass a value to the transition destination component with react-router-dom
- dart - method to perform screen transition to another screen in build() or life cycle method that can receive context as an argu
- javascript - is it "screen transition" or "asynchronous" when implementing search result screen?
- android - i want to perform a screen transition and set the button tap event of the transitioned second screen to "display
- javascript - please let me know because swiperjs does not work
- please tell me the description method when turning with for when calling the element in the object of javascript
- javascript : How to eliminate the difference between monaca debugger and built app in Evernote app
- javascript : How do you do this for audio control?
- To limit window resizing with JavaScript
- javascript : Back button cannot be implemented when using multiple pages in Onsen UI
- javascript : I want to arrange images without HTML and CSS grid
- javascript : How can I change the text inside a div using js?
- I want to get data such as PNG images in binary format with JavaScript
- javascript : How to keep the position of the navigation buttons when pressed?
- javascript : Why, when printing, the canvas is cleared and nothing else appears on it?
- javascript : When inserting a value into the DOM, I get [object HTMLDivElement]
I was able to refer to this question!