I'm relatively new to ONSEN UI, I am using a tabbar layout and also pushing to different pages when an "option" is pressed, this is my solution for it to do so:
<ons-navigator id="myNavigator" animation="fade" page="timer.html">
<ons-page>
<ons-tabbar swipeable animation='slide' position="bottom">
<ons-tab page="classic.html" label="CLASSIC" icon="fa-smile" active>
</ons-tab>
<ons-tab page="drinking.html" label="DRINK" icon="fa-beer" badge="NEW">
</ons-tab>
</ons-tabbar>
<ons-toolbar>
<ons-toolbar>
<div class="center">Truth or Dare - Unlimited</div>
<div class="right menu">
<ons-toolbar-button>
<ons-icon icon="fa-ellipsis-v"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
</ons-toolbar>
</ons-page>
</ons-navigator>
<template id="classic.html">
<ons-navigator id="myNavigator" animation="fade" page="classic.html">
<ons-page id="classic">
<div class="options">
<div class="option vibrate easy">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/easy.png" class="level-img" alt="Easy">
<h2>Easy</h2>
</div>
<div class="option vibrate normal">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/normal.png" class="level-img" alt="Normal">
<h2>Normal</h2>
</div>
<div class="option vibrate hard">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/hard.png" class="level-img" alt="Hard">
<h2>Hard</h2>
</div>
<div class="option locked vibrate nightmare">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/nightmare.png" class="level-img" alt="Nightmare">
<h2>Nightmare</h2>
</div>
<div class="option locked vibrate random">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/random.png" class="level-img" alt="Random">
<h2>Random</h2>
</div>
<div class="option locked vibrate couple">
<ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
<img src="icons/couple.png" class="level-img" alt="Couple">
<h2>Couple</h2>
<p>(Dirty)</p>
</div>
</div>
</ons-page>
</ons-navigator>
</template>
<template id="drinking.html">
<ons-navigator id="myNavigator" animation="fade" page="drinking.html">
<ons-page id="drinking">
<p>PAGE 2</p>
</ons-page>
</ons-navigator>
</template>
No custom js is used for the tabbar elements.
Why isn't the content on my second tabbar page showing? I've tried removing the ons-navigator from the drinking template but still no progress, now I'm stuck.
What am I doing wrong?
Related
I'm using onsen ui to create a hybrid app.
I just need to know if it is possible to use ons-splitter with ons-tabbar at the same time as I cannot find any reference to that at all.
when I use ons-splitter with ons-tabbar, my ons-splitter stops working but when I remove the ons-tabbar from my page, everything starts working again.
This is my code:
<ons-splitter >
<ons-splitter-side id="menu" side="right" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item onclick="fn.load('settings.html')" tappable>
settings
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="navi" page="home.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
<ons-tabbar id="menu2" position="bottom">
<ons-tab page="home.html" label="Search For Personal Trainers" icon="search-plus" onclick="fn.load('home.html')" tappable disabled></ons-tab>
</ons-tabbar>
any help would be appreciated.
In order to get the ons-splitter and ons-tabbar to work together is by using the ons-navigator as the primary nav.
Here's my version of the code based off of Fran Diox post here: https://community.onsen.io/topic/623/trouble-with-tab-splitter-and-navigation-working-together/2
<!-- First navigation component: Navigator. This will remain always on top of the app. -->
<ons-navigator id="myNavigator" page="splitter.html">
</ons-navigator>
<!-- Second navigation component: Splitter. This will disappear if the first component changes its content. -->
<ons-template id="splitter.html">
<ons-splitter>
<ons-splitter-side id="mySplitter" swipeable width="250px" collapse swipe-target-width="50px">
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tabbar.html">
</ons-splitter-content>
</ons-splitter>
</ons-template>
<!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. -->
<ons-template id="tabbar.html">
<ons-page id="tabbarPage">
<ons-toolbar>
<div class="left">
<!-- Toolbar-button with different icons depending on the platform. -->
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Nav, Splitter & Tabs</div>
<div class="right">
</div>
</ons-toolbar>
<!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. -->
<ons-tabbar id="myTabbar" position="auto">
<ons-tab page="tab1.html" label="Tab 1" active>
</ons-tab>
<ons-tab page="tab2.html" label="Tab 2">
</ons-tab>
</ons-tabbar>
<ons-template id="tab1.html">
<ons-page>
<ons-toolbar>
<div class="center">Tab 1</div>
</ons-toolbar>
<p style="text-align: center;">
This is the first tab.
</p>
</ons-page>
</ons-template>
<ons-template id="tab2.html">
<ons-page>
<ons-toolbar>
<div class="center">Tab 2</div>
</ons-toolbar>
<p style="text-align: center;">
This is the second tab.
</p>
</ons-page>
</ons-template>
</ons-page>
</ons-template>
When I transtion to the person.html page using the 'slide' transition, I get the following error: "Fail to fetch PageView from ons-page element."
I don't get an error when I change the transition from 'slide' to 'fade'.
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
<ons-template id="index.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
People App
</ons-toolbar-button>
</div>
<div class="center">People</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-search" onclick="myNavigator.pushPage('search-global.html', { animation : 'fade' } )"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-more"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<!-- changing 'slide' to 'fade' below removes the error -->
<ons-list class="timeline" modifier="inset">
<ons-list-item class="timeline-li" modifier="tappable" ng-repeat="i in [1,2,3]" ng-click="myNavigator.pushPage('person.html', { animation : 'slide' } )">
<ons-row>
<ons-col width="50px">
<img ng-src="https://placeholdit.imgix.net/~text?txtsize=8&txt=50%C3%9750&w=50&h=50" class="timeline-image">
</ons-col>
<ons-col>
<div class="timline-from">
<span class="timeline-name">My Awesome Friend</span>
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="menu-timeline.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent">
<div class="right">
<ons-toolbar-button class="menu-closeMenu" ng-click="menu.closeMenu()">
</ons-icon>Close
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.closeMenu()">
<ons-icon icon="fa-plus"></ons-icon>
New Person
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="person.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Person Name. </div>
<div class="right">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-android-more-vertical"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Hello. I am Person Name.
</ons-list-item>
<ons-list-item>
If this page appeared using 'slide' then an error resulted.
</ons-list-item>
<ons-list-item>
If it appeared using 'fade' then it should still function fine.
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="search-global.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Search People</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Enter search text" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item style="padding-bottom:8px;padding-top:5px;">
<ons-button modifier="large" onclick="">
Search
</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>
I prefer to use the slide transition because I think it makes navigation look more linear. Does anyone know how I can fix this error?
Here is the CodePen: http://codepen.io/blarney2000/pen/qZoVzW
Basically it just isn't able to find the initial page. If you just wrap the sliding menu inside a page it will be fine. Demo
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
Why it bugs out only for slide is sort of a mystery, but the development of Onsen 1 is already finished, so if it's a bug then it's not very likely to be fixed in version 1. So the solution is just put the page and everything will work. Also if you want you could put the navigator inside the sliding menu if that's what you want. Then you can have ons-sliding-menu > ons-navigator > ons-page.
I have a menue like this:
<ons-navigator animation="slide" var="myNavigator">
<ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.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-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
Home
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>
after navigating to "link/to/some/other/page.html", I have a $scope.myNavigator.pushPage('anotherpage', {});
operation. This also works.
But after I performed the pushpage operation, I am not able to use the menu any more. I have to do a popPage before.
A page looks like this:
<div ng-controller="someNiceController">
<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">{{title}}</div>
</ons-toolbar>
My nice content
</ons-page>
</div>
I think there is a problem with the structure of my page...
Any suggestions?
You should put the sliding menu outside the navigator.
The content inside the navigator will be replaced by another page when you push, so the sliding menu in your example will disappear when you use pushPage().
The following code shows how you can use a sliding menu together with a navigator:
<ons-sliding-menu
main-page="main.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.pushPage('page2.html')">Push</ons-button>
</div>
</ons-navigator>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.popPage()">Pop</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable">
Some option
</ons-list-item>
<ons-list-item modifier="tappable">
Another option
</ons-list-item>
</ons-list>
</ons-template>
Here you can see it in action:
http://codepen.io/argelius/pen/ogXGeV
Here's a working sliding menu in Onsen UI. Two changes you should make is to put the sliding-menu element is outside of the navigator, and to reference it with a variable, var="menu". Using a variable simplifies your script. Click below for a simple example.
ons.bootstrap();
<head>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet" />
</head>
<body>
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.pushPage('page2.html')">Next Page</ons-button>
<ons-button onclick="menu.toggleMenu()">Toggle Menu</ons-button>
</div>
</ons-navigator>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<br>
<div style="text-align: center">
<ons-button onclick="myNavigator.popPage()">Back</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable">
First option
</ons-list-item>
<ons-list-item modifier="tappable">
Second option
</ons-list-item>
</ons-list>
</ons-template>
</body>
Not sure if this is an Angular question, or an onsenui question, but here goes...
I would like to data bind an element in an onsenui modal as follows:
<ons-modal var="modalUpload">
<ons-icon icon="cog" spin="true"></ons-icon>
<div>
<div>{{status}}</div>
</div>
</ons-modal>
<ons-page ng-controller="someController">
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Some Section</div>
</ons-toolbar>
<ons-row>
<ons-col align="center">
<div class="content-padded">
<div>{{status}}</div>
</div>
<div class="content-padded">
<ons-button modifier="large" ng-click="upload()">Submit</ons-button>
</div>
</ons-col>
</ons-row>
</ons-page>
... the controller
function someController($scope, $http) {
$scope.status = 'init';
$scope.upload = function() {
$scope.status('test test test');
modalUpload.show();
}
};
After calling $scope.upload(), $scope.status is updated. There are two references to {{status}} in the view, one in the modal, and one in the page... When setting $scope.status, the reference in ons-page works as expected, but the reference in ons-modal does not.
Anyone have any thoughts?
Cheers :)
I think the problem might be because of the modal is outside of the controller. How about trying putting it inside the controller as below:
<ons-page ng-controller="someController">
<ons-modal var="modalUpload">
<ons-icon icon="cog" spin="true"></ons-icon>
<div>
<div>{{status}}</div>
</div>
</ons-modal>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Some Section</div>
</ons-toolbar>
<ons-row>
<ons-col align="center">
<div class="content-padded">
<div>{{status}}</div>
</div>
<div class="content-padded">
<ons-button modifier="large" ng-click="upload()">Submit</ons-button>
</div>
</ons-col>
</ons-row>
</ons-page>
Let me know what happens.
I am working on a project and I need to be able to click .node-202 .field-name-field-pin-point and toggle the visibility of .node-202 .group-dealer.
I need both identifiers in the call because there will be multiple nodes, and I do not want all of them opening when I click on one of the pin points.
Edit: Here is an example of the HTML. I am using Drupal so there is a lot of unnecessary code, but it did my best to format it as quickly as I could.
<article class="node-202 node node-dealer node-teaser contextual-links-region node-by-viewer clearfix">
<div class="field-group-format field-group-div group-dealer collapsible speed-fast effect-none"><!-- Begin Class Group Dealer -->
<h3><span class="field-group-format-toggler">Dealer Container</span></h3>
<div class="field-group-format-wrapper" style="display: block;">
<div class="field field-name-field-dealer-image field-type-image field-label-hidden"><div class="field-items">
<div class="field-item even"><img src="image.jpg" width="280" height="114" alt="" />
</div>
</div>
</div>
<div class="field field-name-field-dealer-website field-type-link-field field-label-hidden">
<div class="field-items">
<div class="field-item even">
Company Titile
</div>
</div>
</div>
<div class="field field-name-field-dealer-address field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">81234 Ricardo Court
</div>
</div>
</div>
<div class="field field-name-field-dealer-location field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">Los Angeles, CA
</div>
</div>
</div>
<div class="field field-name-field-dealer-country field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">United States
</div>
</div>
</div>
<div class="field field-name-field-dealer-phone-number field-type-text field-label-hidden">
<div class="field-items"><div class="field-item even">123-555-2042
</div>
</div>
</div>
<div class="field field-name-field-dealer-email field-type-email field-label-hidden">
<div class="field-items">
<div class="field-item even">
sales#company.com
</div>
</div>
</div>
</div>
</div> <!-- END CLASS GROUP DEALER -->
<div class="field field-name-field-pin-point field-type-image field-label-hidden">
<div class="field-items"><div class="field-item even">
<img src="image.png" width="24" height="23" alt="" />
</div>
</div>
</div>
</article>
Edit 2: I need to set ".node-202 .group-dealer" to visibility:hidden rather than display:none. It seems that this may be helpful: Equivalent of jQuery .hide() to set visibility: hidden.
Assuming that the HTML structure looks like this (and that you have multiple instances of this structure, so you can't just use the class names):
<div class="node-202">
<div class="field-name-field-pin-point">...</div>
<div class="group-dealer">...</div>
</div>
you need something like this:
$('.node-202 .field-name-field-pin-point').click(function() {
$(this).siblings('.group-dealer').toggle();
});
TEST IN JSFIDDLE
Try this..
$('.node-202 .field-name-field-pin-point').bind('click', function(){
$('.node-202 .group-dealer').toggle();
})
FIDDLE DEMO