A good read:
https://community.onsen.io/topic/589/using-a-splitter-menu-with-a-navigator-example-inside
with the accompanying codepen:
https://codepen.io/anon/pen/NALzWZ
and my own solution implementing the above in my own app:
https://github.com/paulchin/Construct2-Admob-Guide
Showing posts with label onsen. Show all posts
Showing posts with label onsen. Show all posts
Friday, May 3, 2019
Tuesday, April 16, 2019
Onsen: list of available icons
Onsen does not publish a list of available icons instead sends you to this page:
https://material.io/tools/icons/?icon=delete_outline&style=baseline
But not every icon on that page is available in the default Onsen download.
To see what's available look in this file:
https://material.io/tools/icons/?icon=delete_outline&style=baseline
But not every icon on that page is available in the default Onsen download.
To see what's available look in this file:
Update:
You can see a list of icons here:
Just append md- in front.
It is accessed from here:
The 3rd link: 'Material Design Iconic Font'.
Then, in the zavoloklom page, click on Icons link on top.
Onsen: how to center toolbar text
Use the style:
text-align: center in the div
Here is an example:
You don't need to do that for iOS. But if you want to center it for both iOs and Android then use it.
text-align: center in the div
Here is an example:
<ons-toolbar id="home-toolbar">
<div class="center" style="text-align: center">Home</div>
</ons-toolbar>
You don't need to do that for iOS. But if you want to center it for both iOs and Android then use it.
Sunday, April 14, 2019
Onsen ons object
Difference between document init and ons.ready:
https://onsen.io/v2/guide/fundamentals.html#the-ons-object
https://onsen.io/v2/guide/fundamentals.html#the-ons-object
The
ons JavaScript object is globally available, and has several useful methods and properties.
For example,
ons.ready(callback) method can be used to wait for app initialization. Specifically, this function waits until “DOMContentLoaded” and Cordova’s “deviceready” events are fired. This is useful, for instance, to know when is safe to make calls to Cordova APIs.Loading external html files with Onsen
Using Onsen navigator.
Create a separate page called page2.html:
Then load it as follows:
The index.html:
That's it. Note that
Create a separate page called page2.html:
<ons-page id="page2">
<ons-toolbar>
<div class="left"><ons-back-button>Page 1</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>This is the second page.</p>
</ons-page>
Then load it as follows:
$(document).on('init', function(event) {
//ons.notification.alert('Button is tapped!');
var page = event.target;
if (page.id === 'page1') {
$('#push-button').on('click', function() {
$('#myNavigator')[0].pushPage('page2.html', {
data: { title: 'Page 2' }
});
});
}
});
The index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"
/>
<title>Blank App</title>
<link rel="stylesheet" href="css/onsenui.css" />
<link rel="stylesheet" href="css/onsen-css-components.min.css" />
</head>
<body>
<ons-navigator swipeable id="myNavigator" page="page1.html"></ons-navigator>
<template id="page1.html">
<ons-page id="page1">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<p>This is the first page.</p>
<ons-button id="push-button" onclick="pushPage()">Push page</ons-button>
</ons-page>
</template>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/onsenui.min.js"></script>
<script src="js/jquery-3.4.0.min.js"></script>
<script src="app.js"></script>
</body>
</html>
That's it. Note that
<ons-template> is only necessary inside index.html, not in a separated file.
Onsen pushPage with jquery
How to pushPush with Onsen using jquery:
function pushPage() {
$('#myNavigator')[0].pushPage('page2.html', { data: { title: 'Page 2' } });
}
Subscribe to:
Posts (Atom)