I have a Split View defined as:
<ons-split-view
var="noticies_split"
secondary-page="secundaria"
main-page="principal"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
I get a "Page is not found: principal" if I define both templates consecutively, i.e.:
<ons-template id="secundaria">
</ons-template>
<ons-template id="principal">
</ons-template>
If I define a third template between them, it works fine, i.e:
<ons-template id="secundaria">
</ons-template>
<ons-template id="aux">
</ons-template>
<ons-template id="principal">
</ons-template>
When defining more than 2/3 templates, I get the same error for those in even positions, but not for the odd ones.
Anyone can help?
I posted an issue on github project: ISSUE #392
I'm using onsenui - v1.2.1 - 2014-12-01
I got same result with onsen-tabbar.
I fixed it by moving onsen-template inside onsen-tabbar tag
Example:
<ons-tabbar>
<div style="display:none">
<ons-template id="page1.html">
</ons-template>
<ons-template id="page2.html">
</ons-template>
<ons-template id="page3.html">
</ons-template>
</div>
<ons-tab page="page1.html" active="true">
</ons-tab>
<ons-tab page="page2.html">
</ons-tab>
<ons-tab page="page3.html">
</ons-tab>
</ons-tabbar>
Hope it can solve your problem.
Cheers...
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 am trying to create a simple app that has a tabbar and tool bar together on a single page, but every time I create a toolbar, it is placed in the front of the content with no formatting. I have the tabbar, that looks like this:
<ons-tabbar>
<ons-tab page="partials/info.html" active="true" icon="fa fa-bar-chart-o" label="Info">
</ons-tab>
<ons-tab page="partials/history.html" active="true" icon="fa fa-info-circle" label="History">
</ons-tab>
<ons-tab page="partials/contact.html" active="true" icon="fa fa-user" label="Contact">
</ons-tab>
<ons-tab page="partials/settings.html" active="true" icon="ion-gear-a" label="Settings">
</ons-tab>
</ons-tabbar>
The tabbar is completely functional, but when I try to put a ons-tool bar right above it, it bugs out with wrong text formatting and all the content of the partials BEHIND the toolbar:
<ons-toolbar fixed-style>
<div class="left">
Brand Name
</div>
<div class="right">
Info 1: dsadas
Info 2: adsadas
</div>
</ons-toolbar>
Is there any way to correct go about doing this? Alternatively, I really don't need the full functionality of a tool bar (though it would be nice); all I really need is just a "strip" of height: 30px and width: 100% to be statically placed at the top of the app to put some info or numbers. When I use ons-page with my partials, it seems to just be covered up the entire time....
Hi Onsen UI community,
I have used ons-tabbar as follows:
<ons-page id="main-page" ng-controller="MainController">
<ons-tabbar>
<ons-tab page="main_1.html" label="Dash" icon="smile-o" active="true"></ons-tab>
<ons-tab page="main_2.html" label="Meet" icon="group"></ons-tab>
<ons-tab page="main_3.html" label="Feat" icon="bullseye"></ons-tab>
<ons-tab page="main_4.html" label="Mee" icon="user"></ons-tab>
<ons-tab page="main_5.html" label="Set" icon="gear"></ons-tab>
</ons-tabbar>
</ons-page>
And inside main_1.html, I want to use ons-navigator like:
<ons-navigator title="Dashboard" var="nav" page="dashboard.html"></ons-navigator>
<ons-template id="dashboard.html">
<ons-page id="dashboard-page">
<ons-button ng-click="nav.pushPage('detail.html', { animation: 'slide' })">
GoTo Detail
</ons-button>
</ons-page>
</ons-template>
So far, I can use the above codes without any problem. However, there is always a flush occurring after I clicked on 'GoTo button' and when the detail.html page is loaded.
I wonder if there is any better way to do so without any flush on the page.
I think I finally found the cause. What caused the blink was nested <ons-page>s, I suppose. OnsenUI doesn't seem to allow nested <ons-page>s after all. Please try placing <ons-tabbar> at root, instead of under <ons-page>.
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 have 3 main pages: List (of businesses), Search, and Favourites. From the list page users can drill down into details about a business.
I am using <ons-navigator>. Navigating from list to details and back to list is working as expected since I am using <ons-back-button>. The list page state is maintained since Onsen-UI is doing a popPage().
My question is how do I navigate back to list from favourites or search while maintaining the list state? Right now I am using pushPage() but that keeps adding pages to the stack. I don't think that's how it's supposed to work and practically speaking if you push a page to the page stack and it already exists... it shouldn't be added but rather it should be moved to the top. Just an idea.
My code:
<ons-navigator var="app.navi" page="list.html"></ons-navigator>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list></ons-list>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
</ons-page>
</ons-template>
<ons-template id="favourites.html">
<ons-page id="favourites-page">
<ons-toolbar>
<div class="center">Favourites</div>
</ons-toolbar>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
</ons-toolbar>
<ons-list></ons-list>
</ons-page>
</ons-template>
<ons-template id="sub-detail-page.html">
<ons-page id="sub-detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Sub Detail Page</div>
</ons-toolbar>
</ons-page>
</ons-template>
$( $lstElmnt.children('.item'), this ).on( 'click', function() {
currentItem = getEstablishment( $( this ).attr( 'id' ), app.navi.pushPage( 'detail.html' ) );
});
Other things I have tried include carousel, tabbar, and plain old JQuery.
Check out my gist on how to do this with react using RouterNavigator