I have 4 files
index.html
page1.html
page2.html
page3.html
Here's my code...
page3.html
<ons-page>
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="favo.html" active="true">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Favorite</span>
</ons-tab>
<ons-tab page="settings.html" active="true">
<ons-icon icon="ion-social-twitter"></ons-icon>
<span style="font-size: 14px">Bird</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<p>Green home</p>
<p>White home</p>
<p>Pink home</p>
</ons-template>
<ons-template id="favo.html">
<p>Your favorite music.</p>
<p>Your favorite food.</p>
<p>Your favorite toy.</p>
<p>Your favorite snack.</p>
</ons-template>
<ons-template id="settings.html" >
<div ng-app="magic_land" >
<div ng-controller="morning">
<p> Cindy, {{greetings}} </p>
<p> Alice, {{greetings}} </p>
<p> Jessica, {{greetings}} </p>
<p> {{2+8}} </p>
</div>
</div>
</ons-template>
</ons-page>
Why do i get this error?
Error: Page is not found: favo.html
Then i swapped into this...
<ons-template id="favo.html">
<p>Your favorite music.</p>
<p>Your favorite food.</p>
<p>Your favorite toy.</p>
<p>Your favorite snack.</p>
</ons-template>
<ons-template id="home.html">
<p>Green home</p>
<p>White home</p>
<p>Pink home</p>
</ons-template>
<ons-template id="settings.html" >
<div ng-app="magic_land" >
<div ng-controller="morning">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="afternoon">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="evening">
<p> Cindy, {{greetings}} </p>
</div>
</div>
</ons-template>
Now im getting this error...
Page is not found: home.html
The 2nd position seems cursed.
...............................................
...............................................
...............................................
Here's the other files.
index.html
<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
//ons.bootstrap();
var magic_land = ons.bootstrap('magic_land', ['onsen']);
magic_land.controller
(
"morning" ,
function($scope)
{
$scope.greetings = "Rise and shine!" ;
}
) ;
magic_land.controller
(
"afternoon" ,
function($scope)
{
$scope.greetings = "Good afternoon!" ;
}
) ;
magic_land.controller
(
"evening" ,
function($scope)
{
$scope.greetings = "Good night. Sleep well." ;
}
) ;
</script>
</head>
<body>
<ons-navigator var="captain" page="page3.html">
</ons-navigator>
</body>
</html>
.................
page1.html
<ons-page>
<ons-scroller>
<ons-toolbar>
<div class="center">This is page ONE</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button
ng-click="captain.pushPage('page3.html')">
Push It
</ons-button>
<br>
<ons-list>
<ons-list-header>Fruits</ons-list-header>
<ons-list-item>Apple</ons-list-item>
<ons-list-item>Banana</ons-list-item>
<ons-list-item> {{5+5}} </ons-list-item>
</ons-list>
<br>
Party <ons-switch checked></ons-switch>
</div>
</ons-scroller>
</ons-page>
....................
page2.html
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Backware</ons-back-button></div>
<div class="center">You are in Page TWO</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Hello there!</h1>
<ons-button
ng-click="captain.popPage()">
Pop Corn {{5+5}}
</ons-button>
</div>
</ons-page>
Didnt find a solution. But i found a workaround.
As i said, 2nd & 4th template are cursed. So, i created dummy_1 and dummy_2 to take the curse.
^_^ . Thats a smiley!
Change page3.html like below.
page3.html (workaround)
<body>
<ons-page>
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="favo.html" active="true">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Favorite</span>
</ons-tab>
<ons-tab page="settings.html" active="true">
<ons-icon icon="ion-social-twitter"></ons-icon>
<span style="font-size: 14px">Bird</span>
</ons-tab>
</ons-tabbar>
</ons-page>
<ons-template id="favo.html">
<p>Your favorite music.</p>
<p>Your favorite food.</p>
<p>Your favorite toy.</p>
<p>Your favorite snack.</p>
</ons-template>
<ons-template id="dummy_1.html">
<p></p>
</ons-template>
<ons-template id="home.html">
<p>Green home</p>
<p>White home</p>
<p>Pink home</p>
</ons-template>
<ons-template id = "dummy_2">
<p></p>
</ons-template>
<ons-template id="settings.html" >
<div ng-app="magic_land" >
<div ng-controller="morning">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="afternoon">
<p> Cindy, {{greetings}} </p>
</div>
<div ng-controller="evening">
<p> Cindy, {{greetings}} </p>
</div>
</div>
</ons-template>
</body>
Here's the tabs in action, show as gif video.
http://postimg.org/image/vin7bak3x/
I think the problem is that you're putting the <ons-template> tags inside the <ons-page> tag.
Instead try to put the templates at the body:
<body>
<ons-tabbar>
...
</ons-tabbar>
<ons-template id="favo.html">
...
</ons-template>
<ons-template id="home.html">
...
</ons-template>
...
</body>
Here is my exact syntax for a split view I have as far as setting my pages. Hopefully the syntax helps for individual pages. This works well for me
<ons-split-view
var="app.splitView"
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="40%"
collapse="portrait">
<ons-template id="page1.html">
<ons-page>
<ons-tabbar>
<ons-tab page="books.html" icon="ion-ios-bookmarks" label="Books" active="true" onclick="app.splitView.setSecondaryPage('secondary.html')"></ons-tab>
<ons-tab page="topics.html" icon="ion-android-globe" label="Topics" onclick="app.splitView.setSecondaryPage('secondary.html')"></ons-tab>
<ons-tab page="espanol.html" icon="ion-ios-color-filter" label="Español" onclick="app.splitView.setSecondaryPage('triple.html')"></ons-tab>
</ons-tabbar>
</ons-page>
</ons-template>
<ons-template id="secondary.html">
<ons-page>
<ons-tabbar>
<ons-tabbar-item page="split/bible.html" label="Bible" icon="fa fa-book" active="true"></ons-tabbar-item>
<ons-tabbar-item page="split/browser.html" label="Browser" icon="fa fa-globe"></ons-tabbar-item>
</ons-page>
</ons-template>
<ons-template id="triple.html">
<ons-page>
<ons-tabbar>
<ons-tabbar-item page="biblia/gene.html" label="Bible" icon="fa fa-book" active="true"></ons-tabbar-item>
<ons-tabbar-item page="split/espbrowser.html" label="Browser" icon="fa fa-globe"></ons-tabbar-item>
</ons-page>
</ons-template>
</ons-split-view>
Related
I am trying to write a small Cordova App. Fortunatly found OnSenUI and now working on it. But I am facing this erorr:
Uncaught (in promise) Error: "html" must be one wrapper element.
at Object.util.createElement (util.js:147)
at page-loader.js:23
I searched for many solutions, but nothing worked for me.
My whole code:
<!DOCTYPE html>
<html>
<head>
<title>New App</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/onsenui.js"></script>
<script src="js/myJs.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item>
<ons-list-item id="ons-list-fetch" onclick="fn.load('fetchPage.html');" tappable> Fetch Data </ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page id="helloworld-page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Main </div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p>
<!-- Inputs-->
<h2 style="text-align: center; opacity: 0.6;">Just H2</h2>
<div style="text-align: center; margin-top: 30px;">
<p>
<ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
</p>
<p>
<ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
</p>
<p style="margin-top: 30px;">
<ons-button id="btnClickMe">Click Me!</ons-button>
</p>
<section style="padding: 8px">
<ons-button modifier="quiet">Forgot Password</ons-button>
</section>
</div>
<!-- eof Inputs-->
<p style="text-align: center; font-size: 14px; opicity: 0.6"> All rights reserved </p>
</ons-page>
</ons-template>
<!-- fetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
</body>
</html>
OMG Its too simple.
I was declaring <div id="divFtechHere"> outside <ons-page>
Wrong Code:
<!-- FetchPage-->
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
</ons-page>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-template>
Correct Code:
<ons-template id="fetchPage.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center"> Fetch </div>
</ons-toolbar>
<div id="divFtechHere">Fetched Data will be shown here</div>
</ons-page>
</ons-template>
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 want to program a chat in WhatsApp style.
The latest news will be shown below, and for new messages to be automatically scrolled down.
Can anyone help me how I can realize the automatic scrolling with ons-list?
<ons-template id="chat.html">
<ons-page ng-controller="ChatController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Chat</div>
</ons-toolbar>
<ons-list style="margin-top: 10px" scroll-glue>
<ons-list-item class="item" ng-repeat="msg in messages">
<header>
<span class="item-title">{{msg.user}}</span>
</header>
<p class="item-desc">{{msg.msg}}</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
I haven't used WhatsApp, but this might help. In an ons-page, you can use .page__content's scrollTop property for auto scroll. Like below. It uses jQuery for animation.
ons.bootstrap()
.controller('ChatController', function($scope, $timeout){
$scope.messages = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
$timeout(function(){
$('.page__content').animate({scrollTop: $('.ons-list-inner').height()}, 2000)
.animate({scrollTop: 0}, 2000);
});
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>
<ons-navigator page="chat.html"></ons-navigator>
<ons-template id="chat.html">
<ons-page ng-controller="ChatController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Chat</div>
</ons-toolbar>
<ons-list style="margin-top: 10px" scroll-glue>
<ons-list-item class="item" ng-repeat="msg in messages">
<header>
<span class="item-title">{{msg.user}}</span>
</header>
<p class="item-desc">{{msg.msg}}</p>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
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!
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>