I can't get the navigation to work with the tab bar. I have a list page, search page and details page. For some reason I can't get the list page to persist when navigating either. The details page is never shown even thought I am using app.navi.pushPage('detail.html'). Before adding the tab-bar everything worked fine. Any ideas on what I am doing wrong?
As well, I need to access the detail page from both the list and search pages.
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
<ons-tabbar>
<ons-tab page="favourites.html" label="Favourites" icon="fa-heart"></ons-tab>
<ons-tab page="list.html" label="Near Me" icon="fa-map-marker" active="true"></ons-tab>
<ons-tab page="search.html" label="Search" icon="fa-search"></ons-tab>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></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-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</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>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
You cannot combine <ons-navigator> with <ons-tabbar>. If you use the tabbar element, you can switch pages using setActiveTab(index, [options]). I created a working sample using the template you provided and added a <ons-button> in the list.html template that changes the active page. For more info about the tabbar element, take a look here. Let me know if you need more help :)
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="list.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="search.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="detail.html"></ons-tabbar-item>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></ons-list>
<ons-button id="btn-switch-search" ng-click="tabbar.setActiveTab(2)">Cancel</ons-button>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
<ons-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</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>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
</body>
Related
I want some values from one ons-template to another, i have tried sending values from ons-template to controller and getting back to another ons-template from a controller, but is there any way i can get the values directly from one ons-template to another without calling the controller? Below is my code.
sendmoney.html
<ons-template id="sendmoney.html">
<ons-page modifier="shop-details" class='page_bg'>
<ons-toolbar style="background-color: #16A500;">
<div class="left">
<ons-toolbar-button ng-click="menu.openMenu();">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Send Money</div>
<div class="right">
<ons-toolbar-button onclick="doContactPicker()">
<ons-icon icon="ion-plus" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div ng-controller="getUserContacts">
<ons-list-header>Select Contact</ons-list-header>
<ons-list style="margin: -1px 0">
<div ng-show="loading" class="loading"><img src="img/loading.gif" height="50px" width="50px"></div>
<ons-list-item modifier="chevron" class="list-item" ng-repeat="x in contacts track by $index" style="margin-left: 10px;" ng-click="page.pushPage('sendmoney2.html', {animation: 'slide'});">
<ons-row>
<ons-col width="52px" style="padding: 10px 0 0 0;">
<img src="img/red.png" height="42px" width="42px"/>
</ons-col>
<ons-col>
<header>
<span class="item-title">{{x.name}}</span>
</header>
<p class="swipe-item-desc">{{x.phone}}</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-template>
I want {{x.name}} and {{x.phone}} in sendmoney2.html template
sendmoney2.html
<ons-template id="sendmoney2.html">
<ons-page modifier="shop-details" class='page_bg'>
<ons-toolbar style="background-color: #16A500;">
<div class="left">
<ons-toolbar-button ng-click="menu.openMenu();">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Send Money</div>
</ons-toolbar>
</ons-page>
</ons-template
I don't know Angular very well, but in plain JS, you simply set a global variable to get around this. I think of the app design as just one large web page. That often helps me solve my problems. So basically just define these in the top of your script:
var vName = '';
var vPhone = '';
Then set them in the events, this should work.
I am trying to add a side menu in my Onsenui app but it isnt showing up. I am using <ons-tabbar-item> approach so not sure how I would go about adding a menu in the <ons-tabbar-item> section below:
<body>
<ons-sliding-menu var="app.menu" main-page="dashboard.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page>
test
</ons-page>
</ons-template>
<ons-navigator var="myNavigator">
<ons-page ng-controller="LoginController">
<ons-tabbar position="top">
<ons-tabbar-item style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" ng-click="app.menu.toggleMenu()"></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="negative.html" icon="ion-android-walk"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</ons-navigator>
</body>
There is no need for ons-navigator if you are already using ons-tabbar and ons-sliding menu as you can perform the navigation using these two elements.
Here is a CodePen example about how to combine tabbar and sliding-menu:
http://codepen.io/andipavllo/pen/RrdPNo
Here is the code:
<ons-tabbar var="tabbar">
<ons-tabbar-item icon="ion-stop" label="menu" page="hoge.html" active="true"></ons-tabbar-item>
<ons-tabbar-item icon="ion-stop" label="menu" page="page2.html"></ons-tabbar-item>
</ons-tabbar>
<ons-template id="hoge.html">
<ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" var="menu" type="overlay" max-slide-distance="250px">
</ons-navigator>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 1</div>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<h1 style="text-align: center">Tabbar+SlidingMenu Test</h1>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<h1 style="text-align: center">Tab bar+SlidingMenu Test</h1>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(0)">
page1.html
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(1)">
page2.html
</ons-list-item>
</ons-list>
</ons-template>
Hope it helps!
I am trying to use multiple files for pages. However, I also want to use the sliding menu. I read here that to use multiple files with Onsen you just remove <ons-template>. I understand this, but I can't get the sliding menu to work with it. Here is what I have.
<body>
<ons-sliding-menu side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<div class="menu">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('index.php', {closeMenu: true})">
<ons-icon icon="fa-plus" fixed-width="true"></ons-icon>
Today's Meals
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('other.php', {closeMenu: true})">
<ons-icon icon="fa-bookmark" fixed-width="true"></ons-icon>
Some other Page
</ons-list-item>
</ons-list>
</ons-page>
</div>
</ons-sliding-menu>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Today's Meals</div>
<div class="right weight">277.4 LBS</div>
</ons-toolbar>
<ons-list class="plan-list">
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date">7:00 AM</div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 1</div>
<div class="plan-info">
<ul>
<li>2 Chicken Breasts</li>
<li>Blueberries</li>
<li>Side Salad with Ranch</li>
</ul>
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 2</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 3</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 4</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</body>
I am not using this with cordova or phonegap. I am just using this as a framework for a mobile web page.
Thank you!
You just need to wrap the menu page and the main page with <ons-template> like this:
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page>
...
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-page>
...
</ons-page>
</ons-template>
Hope it helps!
I have a multiline toolbar. The code is like:
<ons-page id="prodotti">
<ons-toolbar fixed-style id="firstNav" class="first-line">
<div class="left">
<img src="dist/img/logo.png">
</div>
<div class="right">
<ons-toolbar-button onclick="myNav.pushPage('profilo.html')">
<ons-icon icon="ion-person" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button onclick="myNav.pushPage('carrello.html')">
<ons-icon icon="ion-android-cart" size="28px" fixed-width="false"><span class="notification">1</span></ons-icon>
</ons-toolbar-button>
</div>
<div class="second-line navigation-bar" id="secondNav">
<div class="navigation-bar__left">
<span class="toolbar-button navigation-bar__line-height" onclick="menu.toggle()">
<i class="ion-navicon"
style="font-size:28px; vertical-align:-6px;"></i>
</span>
</div>
</div>
</ons-toolbar>
All my page have a toolbar like this one.
Now I have a problem. When I use pushPage with animation:slide the #secondNav doesn't seems to have animation. It will change after the end of the animation.
How I can implement the slide to this element?
Thank you!
There are some errors in your code. ons-toolbar accepts only div tags with class= left, center or right.
Your <div class="second-line navigation-bar" id="secondNav"> will never be displayed. To create a two line toolbar, just use two different toolbars.
In your code the navigator is missing, I added it on the first page. You also forgot to add the </ons-page> tag in the end.
Here you can find a working CodPen example, and here is your modified code:
<ons-template id="profilo.html">
<ons-page>
<ons-back-button>Go Back</ons-back-button>
</ons-page>
</ons-template>
<ons-page id="first">
<ons-navigator var="myNav">
<ons-toolbar fixed-style id="firstNav" class="first-line">
<div class="right">
<ons-toolbar-button onclick="myNav.pushPage('profilo.html')">
<ons-icon icon="ion-person" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button onclick="myNav.pushPage('carrello.html')">
<ons-icon icon="ion-android-cart" size="28px" fixed-width="false"><span class="notification">1</span></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div class="second-line navigation-bar" id="secondNav">
<div class="navigation-bar__left">
<span class="toolbar-button navigation-bar__line-height" onclick="menu.toggle()">
<i class="ion-navicon"
style="font-size:28px; vertical-align:-6px;"></i>
</span>
</div>
</div>
</ons-navigator>
</ons-page>
I am building a single page app on onsen UI with various pages defined. One of the pages shows schedule for a two day event and so it's only logical to have tabs with dates and respective daily content.
How would you do this in onsen ui considering all tutorials I've seen on tabs assume your main website navigation will use tabs which is not usually the case.
Here's code I'd been tinkering with
<ons-template id="schedule.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Schedule</div>
</ons-toolbar>
<div style="text-align: center">
<ons-tabbar position="top">
<ons-tab page="dayone.html">
<p>Day One</p>
</ons-tab>
<ons-tab page="daytwo.html">
<p>Day Two</p>
</ons-tab>
</ons-tabbar>
<ons-tab active="true" page="dayone.html">
<ul class="list">
<li class="list__item">Registration and viewing of exhibition stands</br>8.30 – 9.00AM</li>
<li class="list__item">Welcome and Introductions<br/>9.00 – 9.10AM</li>
</ul>
</ons-tab>
<ons-tab page="daytwo.html">
<ul class="list">
<li class="list__item">Registration and viewing of exhibition stands</br>9.30 – 9.00AM</li>
<li class="list__item">Welcome and Introductions<br/>9.00 – 9.10AM</li>
</ul>
</ons-tab>
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
The usage of tabbar is explained here: http://onsen.io/reference/ons-tabbar.html#usage
Your pages "dayone.html" and "daytwo.html" should be templates or different pages. Something like this:
<ons-page>
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Main page</div>
</ons-toolbar>
<ons-button onclick="myNavigator.pushPage('schedules.html');">Go to schedules</ons-button>
</ons-navigator>
</ons-page>
<ons-template id="schedules.html">
<ons-page>
<ons-tabbar>
<ons-tab page="day1.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Day 1</span>
</ons-tab>
<ons-tab page="day2.html">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Day 2</span>
</ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
<ons-template id="day1.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Day 1 schedule</div>
</ons-toolbar>
<p>Day 1 activities here...</p>
</ons-page>
</ons-template>
<ons-template id="day2.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Day 2 schedule</div>
</ons-toolbar>
<p>Day 2 activities here...</p>
</ons-page>
</ons-template>
Working example here: http://codepen.io/frankdiox/pen/bNZMPg
Hope it helps!