I have a navigator and global splitter in my app. My navigator pushes my first page as tempHome and i need set page attribute for splitter also tempHome to use the splitter.
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
</ons-navigator>
so I have twice tempHome in the first page of my app.
Is there any help?
Thank you
The codepen which you mentioned shows a splitter inside a navigator.
However both the navigator and splitter can contain inner pages - so in your case what you want to do is just change the structure the other way around. Since you want to have the side menu always that just means that it should be outside the navigator.
You can put the navigator inside the ons-splitter-content and you will get the desired result.
<ons-splitter>
<ons-splitter-side collapse swipeable>
// menu content...
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="myNavigator" page="home.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
Here's a modified Demo.
Sidenote: I just modified the example from the codepen which you mentioned, so it's actually using angular, however do note that for Onsen 2 angular is not a required :)
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
Related
I have tried buttons and lists, but for whatever reason, I cannot push a page to the navigator stack from within a tab. Having said that, I am new to Onsen and could easily be messing something up. I have followed the examples and they work fine when just doing a tab nav or just doing a navigator, but not both. This question was similar but did not solve my issue: Onsen UI Pagination: navigator and tabbar
The below code doesn't work. Any help is greatly appreciated! The login.html page is in the root www folder and I am using Monaca cloud IDE.
<body>
<ons-tabbar position="bottom">
<ons-tab page="home.html" active="true">
<ons-icon icon="fa-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="gameon.html">
<ons-icon icon="fa-bullseye"></ons-icon>
<span style="font-size: 14px">Game On!</span>
</ons-tab>
<ons-tab page="progress.html">
<ons-icon icon="fa-line-chart"></ons-icon>
<span style="font-size: 14px">Progress</span>
</ons-tab>
<ons-tab page="settings.html">
<ons-icon icon="fa-gear"></ons-icon>
<span style="font-size: 14px">Settings</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
...
</ons-template>
<ons-template id="gameon.html">
...
</ons-template>
<ons-template id="progress.html">
...
</ons-template>
<ons-template id="settings.html">
<ons-navigator var="navigator">
<ons-page>
<ons-toolbar>
<div class="center">Settings</div>
</ons-toolbar>
<ons-button modifier="large" onclick="navigator.pushPage("login.html", { animation: "slide" });">Login</ons-button>
<ons-list>
<ons-list-item onclick="navigator.pushPage('login.html');" modifier="chevron">Login</ons-list-item>
<ons-list-item>
Another Option
<ons-switch modifier="list-item" checked></ons-switch>
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
</ons-template>
Update: So after reviewing the docs for Onsen 2.0, I discover that for ons-navigator, the var attribute is for angular which I am specifically trying to avoid using as I want to keep the overhead as minimal as possible and just stick with straight JS (no frameworks). So the docs here https://onsen.io/2/reference/ons-navigator.html leave me confused as there is no way to reference the object without var. Thus it would seem, that if you are going to use the navigator then you must be using AngularJS which contradicts the JS reference page of the same docs which indicates that it doesn't require Angular and just the Onsen loader.js. Is this correct or am I losing my marbles?
Update 2: So after implementing the change below and it still not working, ran it on my phone and finally got an error message. I even reverted back to the original code and get the same error, which is:
Uncaught (in promise) Error: "html" must be one wrapper element. www/lib/onsenui/js/onsenui.js: 4139
My guess is that this has to do with using and calling to an external page as well. I will try pulling everything out to standalone html pages and just call the templates themselves. Who knows???
I found the issue. On the login.html page, I had the <style> block outside the <ons-page> tags. From the JS referenced in the error message, I was able to determine that there were multiple HTML wrappers being incited. Luckily, a quick fix for a stupid question on my part!
I'm using Onsen UI and AngularJS, and trying to pass a value on Onsen navigation , but it is not working. What can be wrong?
page1.html
<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'red'})"><img src="red.jpg"></ons-button>
<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'blue'})"><img src="blue.jpg"></ons-button>
page2.html
<p>the color is: {{ color }}!</p>
app.js
app.controller('colorController', function($scope, colorData) {
var page = $scope.ons.navigator.getCurrentPage();
$scope.color = page.options.color;
});
When I run it, the page2 at <p>***{{ color }}***</p> does not display the color based on clicked button (red or blue). It displays only the color is: !
Any help will be appreciated. Thank you in advance!!!
You cannot pass options with a Sliding Menu and read them with a Navigator. There is no menu.getCurrentPage() in Sliding Menu so you have to use a Navigator for that. It's possible to emulate it using navigator.resetToPage() method instead of menu.setMainPage(). First, you need a Navigator as a child of your Sliding Menu:
<ons-sliding-menu
menu-page="menu.html" main-page="navigator.html" var="menu" ...>
</ons-sliding-menu>
<ons-template id="navigator.html">
<ons-page>
<ons-navigator var="navi" page="main.html"></ons-navigator>
</ons-page>
</ons-template>
Then, in the menu:
<ons-template id="menu.html">
<ons-page>
<ons-list>
<ons-list-item onclick="navi.resetToPage('main.html'); menu.close()">Main</ons-list-item>
<ons-list-item onclick="navi.resetToPage('page.html', {param1: 'hoge', param2: 'fuga'}); menu.close()">Page with params</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
Now you can access to the parameters with navi.getCurrentPage().options.
Working in this codepen: http://codepen.io/frankdiox/pen/OyvvGZ
that's my first question so I´m afraid to be a silly one but I have done a lot of research before and spend many ours trying to fix this by changing the code. I´m relatively new to web app programming and maybe missing some conceptual knowledge that can be blocking me to go forward.
Environment and tools: Using cordova, onsen ui, Android studio, angularjs to develop a sort of Engineer Calculator on my area of expertise, I´m not a professional programmer.
The app is based in a series of pages connected as in the below user data/page flow and the app is working fine except for the problem I´m asking for help.
(I cant post images yet)
It's a dataflow like this:
menu.html >> page1.html >> load.html
For every html page view I have a controller module, all modules in the same controller file. The sliding menu defined in the index.html calls the page1.html for instance, that is the only page having a SVG graphic than linked to load.html page through a onclick Push page. See below the pages code:
menu.html
<body onload="onLoad()" ng-app="calcfcc" ng-controller="calcfccController">
<!-- to transfer to AS start here -->
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="200px" swipable="true">
</ons-sliding-menu>
<!-- sliding-menu - Menu list here!!! -->
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
{{menu1}}
</ons-list-item>
page1.html called from slide menu:
<ons-navigator animation="slide" var="page1navi">
<ons-page ng-controller="initController" on-device-backbutton="backbuttonpage()" style="background: #001a00;">
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button id="popoverb1" ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
{{pageheader1}}
</div>
<div class="right" style="padding: 7px;">
<img src="img/AASis78x31branco.png" alt="AASis" >
</div>
</ons-toolbar>
page1.html portion that calls load.html from a clickable SVG icon:
<g
id="g4533"
onclick="page1navi.pushPage('load.html', { animation : 'slide' } )"
transform="translate(0,-66.958368)">
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4485);fill-opacity:1;fill-rule:evenodd;stroke:#6e6e6e;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect10449"
width="60"
height="60"
x="275.33713"
y="786.85248"
rx="6.7857499"
ry="6.3835001" />
load.html page:
<ons-page ng-controller="loadController">
<ons-toolbar>
<div class="left"><ons-back-button>{{about1}}</ons-back-button></div>
</ons-toolbar>
<p class="textarea" style="font-size: 20px; border: 2px solid #0066FF; margin: 5px">
{{load1}}
</p>
So my problem is that page1.html controller is loading fine, load.html controller is also loading fine and making it's job but when a press the load.html page "back" button to return to page1.html the page1 controller is not loaded and I cant refresh the view with data I have manipulated on load.html.
It's not about global vars, is just that the right controller is not loaded.
When a called page1.html from index.html it works, but I can ask the user to get back to side menu just to refresh. Also reload all is not a option, very annoying to the user.
Any idea how to solve this?
TKS in advanced!!!!
Controllers are only run once when the page is created. When you use back-button you are destroying load.html and moving back to page1.html, but this one was already created in the page stack so its controller won't be called again. Also, AngularJS will only recognize changes if they are done inside Angular's scope. Otherwise you will need to use $scope.$apply() to let Angular know about the changes. You could use $scope.$apply() on Onsen UI's postpop event.
In any case, if you are using AngularJS I think you should have ng-click instead of onclick. Also, you can bind the text-area to a scope variable using ng-model, so every change you do in the view will be stored automatically. I think it should be enough with these two changes.
Hope it helps!
I am currently building my first cordova app with onsen ui. Looks promising so far! But I ran into a problem I could not solve and I could not find the answer.
I hope it is a beginner question and can be solved easily by someone with more experience with onsen.
I want to have a sliding-menu and still the "usual" navigation on the main screen.
Two different approaches I tried:
1)
<ons-navigator var="app.navi">
<ons-page>
<ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Continue last story
</ons-list-item>
...
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-page ng-controller="BooksCtrl">
// Navigation in controller:
app.navi.pushPage("new_action.html", {
animation: "lift"
});
</ons-page>
</ons-template>
Result: No error messages. But once I navigate from the first main-page to another page I can't open the sliding menu. (Same as in the official demo found in github repo called navigator_sliding-menu)
2)
<ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Continue last story
</ons-list-item>
...
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-navigator animation="slide" var="app.navi">
<ons-page ng-controller="BooksCtrl">
// Navigation in controller:
app.navi.pushPage("new_action.html", {
animation: "lift"
});
</ons-page>
</ons-navigator>
</ons-template>
Same as here: http://codepen.io/argelius/pen/ogXGeV
So the navigation element is moved to the first main-page.
Result: I can navigate through the app (via pushPage in controller) and I can open the menu from every page. But once I click a link in the menu any pushPage calls result in the error messages:
Uncaught TypeError: Cannot read property '$$phase' of null
Uncaught Error: Fail to fire "pageinit" event. Attach "ons-page" element to the document after initialization.
Any ideas?
Thank you in advance
Try having the <ons-sliding-menu> in the index.html. For example have your your index would have the entire body of:
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="false" swipe-target-width="50">
</ons-sliding-menu>
Then on your page1.html where you want to use the navigation. Use your
<ons-page modifier="menu-page">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Continue last story
</ons-list-item>
and finally if you want any end of trail pages. Use your navigator to the end page. v-page2.html-v
<ons-navigator var="app.navi">
<ons-list-item class="menu-item" ng-click="app.navi.pushPage("new_action.html", {
animation: "lift"
})">
Continue last story
</ons-list-item>
<ons-navigator>
To return back. Just use a ng-click="app.navi.popPage()" But like DTFagus said. Using the navigator is better for end pages.
I am developing a mobile app with phonegap and onsen ui.
There are ons-sliding-menu and ons-split-view which works fine separately.
My desire behaviour is showing menu-bar-button when the device is portrait and showing the menu when is on mobile landscape or tablet any orientation.
I have combine them like this
<ons-sliding-menu var="app.slidingMenu"
main-page="main.html"
menu-page="menu.html"
side="left"
type="push"
max-slide-distance="250px"
>
</ons-sliding-menu>
<ons-split-view var="app.splitView"
secondary-page="menu.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
....
and this for showing menu-bar-button and toggling menu
<ons-template id="main.html">
<ons-navigator>
<ons-page>
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">xxx</div>
</ons-toolbar>
but when I add splitview the sliding-menu-button is not working at all.
Is there any best practice for combining them together?
You can use the ons-if-orientation directive to switch between the split view and the sliding menu.
<div ons-if-orientation="landscape">
<ons-split-view
secondary-page="menu.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
</div>
<div ons-if-orientation="portrait">
<ons-sliding-menu
max-slide-distance="200px"
menu-page="menu.html"
main-page="main.html">
</ons-sliding-menu>
</div>
There is a big problem with this approach though. There is actually two DOM trees for the menu and two DOM trees for the main page. So if you make some change to the DOM you will have to do it in two places in order for the pages to be in sync.
Try it out here:
http://codepen.io/argelius/pen/XJdabG