Onsen UI


0  0 2017-01-23 09:29:36

Onsen UI is a framework which is used in PhoneGap and Cordova With AngularJS, jQuery, Font Awesome and TopCoat as the foundation, Onsen UI can be a promising tools for developing amazing mobile apps. This framework
Build web and mobile app using concept web components
Onsen UI framework creating and designing the app and websites, This framework called as a hybrid framework.
The fastest way to develop beautiful HTML5 hybrid and mobile web apps
Easy to learn
Onsen UI is easy to learn while being a Powerful tool to create complex mobile apps its lightweight framework.

Onsen UI its a complete Web Components driven UI framework for hybrid apps like cordova/ Phonegap. It also was equipped with popular JS frameworks support, including Angular or Angular2 and React Although they are using the same, we are optimizing the APIs for each framework.
Using Onsen UI toolkit - Monaca CLI
$ npm install -g monaca # Install Monaca CLI - Onsen UI "monaca debug" to run on your device

Loading Onsen UI
To load Onsen UI in your project simply include onsenui.js and CSS files for styling.
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<linkrel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/onsenui.js"></script>
<body> ... </body>
How to Create a page
The starting of the page is <Ons-page> element it’s a root of page, It was covers the whole page and its used container for child and other element.
How to add toolbar
<ons-toolbar> or <ons-bottom-toolbar> this are the component. If you want add icons use <ons-icon>
<div class="left">
<ons-back-button>Back</ons-back-button> </div>
<div class="center">Title</div>
<ons-icon icon="md-menu"></ons-icon>
</div> </ons-toolbar> Some other content... </ons-page>
Page lifecycle    
<ons-page> provides a set of DOM events that it will be through in different moments of its life cycle. Use these events to alter the behavior on each and every page.
 Init event was fired after <ons-page> was attached to DOM. Use this event to initialize code or dynamic content of a page when it was created.
 Destroy event was fired before <ons-page> was destroyed and prior to DOM detachment. Use this event to clean up or save anything you need.
 Show event was fired every time <ons-page> comes into view, i.e. when a new page was created and shown immediately or when an existing page shows up. Use this event to run code every time a page appears.
 Hide event was shoot every time <ons-page> disappear from view, i.e. when ever a visible page was destroyed or its hidden but still exists in the page stack. Use this event to run code every time a page disappears.
Page lifecycle events will be propagated to the page’s descendants so they are correspondingly shown, hidden or destroyed. For example, destroying <ons-navigator> will throw hide event only for the displayed page (navigator’s top page) and destroy event for every page in navigator’s page stack.

<ons-page id="page1">This is a blank page</ons-page>
<script> document.addEventListener('init', function(event)
    if (event.target.matches('#page1'))
        ons.notification.alert('Page 1 is initiated.'); // Set up content...
}, false);


Comments (0)

Post Your Comments


Hong Kong Office

Find Us On