Website Design & Development Company - Pune, India.

Onsen UI
23Jan

Onsen UI

by Anjali Pawar   |   23 Jan, 2017

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>
</head>
<body> ... </body>
</html>
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>
<ons-page>
<ons-toolbar>
<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);
</script>

 

Share
input:focus, select:focus, textarea:focus { border-color: ##1abc9c; } a { color: ##1abc9c; } .radio i, .checkbox i { color: ##1abc9c; } .radio i:before { background-color: ##1abc9c; } .button, .btn-default { border-color: ##1abc9c; background-color: ##1abc9c; } .button:hover { color: ##1abc9c; } .page-header-top { background-color: ##1abc9c; } .page-header-bottom-alt { background-color: ##1abc9c; } .page-intro:after { background-color: ##1abc9c; } .page-intro:before { background-color: ##1abc9c; } .page-content-section-bg { background-color: ##1abc9c; } .page-content-section-bg:before { background-color: ##1abc9c; } .page-content-section-border { border-top-color: ##1abc9c; } .page-footer { background-color: ##1abc9c; } .block-head-1 { border-bottom-color: ##1abc9c; } .block-head-1 i { background-color: ##1abc9c; } .block-head-2:after { background-color: ##1abc9c; } .block-head-2 i:after, .block-head-2 i:before { background-color: ##1abc9c; } .block-head-3 { border-bottom-color: ##1abc9c; } .block-head-3 i:after { background-color: ##1abc9c; } .block-head-4:after { background-color: ##1abc9c; } .block-head-7 { border-bottom-color: ##1abc9c; } .block-head-7:after { background-color: ##1abc9c; } .page-content-section-bg .block-head-3 i { color: ##1abc9c; } .main-search button { color: ##1abc9c; } .main-search button:after { background: ##1abc9c; } .main-nav li a { color: ##1abc9c; } .main-nav li a:before { background-color: ##1abc9c; } .main-nav li ul { background-color: ##1abc9c; } .main-nav li li:hover > a, .main-nav li li.active > a, #block-newsletter-newsletter-subscribe .form-submit:hover, .block-product-details .add-wishlist .button-alt:hover, .block-product-details-2 .add-wishlist .button-alt:hover { color: ##1abc9c; } .main-nav .switcher { border-color: ##1abc9c; background-color: ##1abc9c; } .main-nav .mega > div { background-color: ##1abc9c; } #block-newsletter-newsletter-subscribe .form-submit, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { border-color: ##1abc9c; background-color: ##1abc9c; } .art-portfolio ol li.active, .ui-slider-horizontal .ui-slider-handle, .ui-slider-horizontal .ui-slider-range, .btn-primary.link { background-color: ##1abc9c; } .btn-primary, .button:hover, .btn-default:hover, .btn-default:focus, .btn-default:active { border-color: ##1abc9c; color: ##1abc9c; } .btn-primary.link:hover, .btn-primary.link:focus, .btn-primary.link:active { color: ##1abc9c; } } @media screen and (max-width: 767px) { /* phone */ .main-nav ul { background-color: ##1abc9c; } .main-nav li a { color: #ecf0f1; } .main-nav li ul { background: #e9e9e9; } .main-nav li li { border-top-color: ##1abc9c; } .main-nav li li a { color: ##1abc9c; } .main-nav li li a:hover { background-color: ##1abc9c; color: #fff; } .main-nav li li ul { border-top-color: ##1abc9c; } .main-nav .mega ul li { border-top-color: ##1abc9c; } } .slider-revolution .fa:after { background-color: ##1abc9c; } .slider-revolution .title { border-top-color: 1px solid ##1abc9c; border-bottom-color: 1px solid ##1abc9c; } .slider-revolution .button-my { border-color: ##1abc9c; background-color: ##1abc9c; } .slider-revolution .button-my:hover { color: ##1abc9c; } .pagination-1 a:hover { border-color: ##1abc9c; color: ##1abc9c; } .pagination-1 .active, .pagination-1 .active:hover { border-color: ##1abc9c; background: ##1abc9c; } .pagination-2 a:hover { color: ##1abc9c; } .pagination-2 .active, .pagination-2 .active:hover { background: ##1abc9c; } .pagination-3 a:before { box-shadow: inset 0 0 0 1px ##1abc9c; } .pagination-3 .active:before, .pagination-3 .active:hover:before { background: ##1abc9c; } .pagination-4 a:hover { border-color: ##1abc9c; } .pagination-4 .active { border-color: ##1abc9c; background: ##1abc9c; } .pagination-5 a { border-color: ##1abc9c; background-color: ##1abc9c; color: ##1abc9c; } .block-benefits div:hover { border-color: ##1abc9c; background-color: ##1abc9c; } .block-benefits i { color: ##1abc9c; } .block-benefits-2 li i { color: ##1abc9c; } .block-benefits-2 .tabs a:hover { border-color: ##1abc9c; background-color: ##1abc9c; } .block-benefits-2 .tabs .active a, .block-benefits-2 .tabs .active a:hover { color: ##1abc9c; } .block-benefits-3 i { color: ##1abc9c; } .block-about .button { border-color: ##1abc9c; color: ##1abc9c; } .block-about .button:hover { background: ##1abc9c; color: #ecf0f1; } .block-about .owl-prev:hover, .block-about .owl-next:hover { color: ##1abc9c; } .block-about-2 .bar { background: ##1abc9c; } .block-about-2 .value { color: ##1abc9c; } .block-about-4 .owl-pagination div { border-color: ##1abc9c; background: ##1abc9c; } .block-about-5 .owl-prev, .block-about-5 .owl-next { display: inline-block; border-color: ##1abc9c; background-color: ##1abc9c; } .block-about-5 .owl-prev:hover, .block-about-5 .owl-next:hover { color: ##1abc9c; } .block-about-6 .icons a:hover { color: ##1abc9c; } .block-mission .year { background: ##1abc9c; } .block-mission .years a:after { border-bottom-color: ##1abc9c; } .block-recent-works ol li:hover { color: ##1abc9c; } .block-recent-works ol .active { border-color: ##1abc9c; background: ##1abc9c; } .block-recent-works .description { background: ##1abc9c; } .block-recent-works .description:before { border-right-color: ##1abc9c; } .block-recent-works-3 h3 { border-top-color: ##1abc9c; } .block-recent-works-3 .link { border-color: ##1abc9c; } .block-recent-works-3 .fancybox { background-color: ##1abc9c; } .block-recent-works-3 .owl-pagination div { border-color: ##1abc9c; background: ##1abc9c; } .block-recent-works-4:before { background: ##1abc9c; } .block-recent-works-4 .fancybox { background: ##1abc9c; } .block-recent-works-4 .owl-prev:hover, .block-recent-works-4 .owl-next:hover { color: ##1abc9c; } .block-recent-works-6 a:before { background: ##1abc9c; } .block-recent-works-6 .owl-prev, .block-recent-works-6 .owl-next { border-color: ##1abc9c; background: ##1abc9c; } .block-recent-works-6 .owl-prev:hover, .block-recent-works-6 .owl-next:hover { color: ##1abc9c; } .block-portfolio ol li:hover { color: ##1abc9c; } .block-portfolio ol li.active { border-bottom-color: ##1abc9c; } .block-portfolio ul .pic span:after, .block-portfolio ul .pic span:before { background: ##1abc9c; } .block-portfolio ul .pic span i { color: ##1abc9c; } .block-portfolio-2 ol li:hover { color: ##1abc9c; } .block-portfolio-2 ol li.active { background: ##1abc9c; } .block-portfolio-2 ul .pic:before { background: ##1abc9c; } .block-portfolio-2 ul .pic a { background: ##1abc9c; } .block-portfolio-2 ul .pic a:hover { color: ##1abc9c; } .block-portfolio-3 ol li:hover { color: ##1abc9c; } .block-portfolio-3 ol li.active { background: ##1abc9c; } .block-portfolio-4 h3 { border-top-color: ##1abc9c; } .block-portfolio-4 .link { border-color: ##1abc9c; } .block-portfolio-4 .fancybox { background: ##1abc9c; } .block-portfolio-5 ol li:hover { color: ##1abc9c; } .block-portfolio-5 ol li.active { background: ##1abc9c; } .block-portfolio-5 .info:before { background: ##1abc9c; } .block-portfolio-6 ol li:hover { color: ##1abc9c; } .block-portfolio-6 ol li.active { background: ##1abc9c; } .block-portfolio-6 ul a:before { background: ##1abc9c; } .block-portfolio-7 ol li:hover { color: ##1abc9c; } .block-portfolio-7 ol li.active { background: ##1abc9c; } .block-portfolio-7 ul li:before { background: ##1abc9c; } .block-portfolio-7 ul a:hover { color: ##1abc9c; } .block-portfolio-8 li div:before { background: ##1abc9c; } .block-portfolio-8 li a { background: ##1abc9c; } .block-clients .owl-prev, .block-clients .owl-next { color: ##1abc9c; } .block-testimonials-3 .carousel h3 { border-bottom-color: ##1abc9c; } .block-testimonials-3 .owl-pagination div { border-color: ##1abc9c; } .block-testimonials-3 .owl-pagination .active { background: ##1abc9c; } .block-testimonials-4 .owl-prev, .block-testimonials-4 .owl-next { border-color: ##1abc9c; background: ##1abc9c; } .block-testimonials-4 .owl-prev:hover, .block-testimonials-4 .owl-next:hover { color: ##1abc9c; } .block-services li a { border-color: ##1abc9c; } .block-services li a:hover { background-color: ##1abc9c; } .block-services-2 li a:hover { background: none; } .block-services-2 li a:after { box-shadow: inset 0 0 0 2px ##1abc9c; } .block-services-2 li a:hover:after { background-color: ##1abc9c; } .block-services-3 li a:hover { background: none; } .block-services-3 li a:after { box-shadow: inset 0 0 0 2px ##1abc9c; } .block-services-3 li a:before { background: ##1abc9c; box-shadow: inset 0 0 0 2px ##1abc9c; } .block-services-3 li a:hover:after { background-color: ##1abc9c; } .block-services-4 li a { border-color: ##1abc9c; } .block-services-4 li a:hover { background-color: ##1abc9c; } .block-services-5 li i { color: ##1abc9c; } .block-services-5 li i:hover { background: ##1abc9c; } .block-services-6 h3 span { color: ##1abc9c; } .block-services-6 li a { border-color: ##1abc9c; background: ##1abc9c; } .block-services-6 li a:hover { color: ##1abc9c; } .block-services-7 .info i { background: ##1abc9c; } .block-services-7 .carousel .active { background: ##1abc9c; } .block-services-7 .carousel .owl-prev, .block-services-7 .carousel .owl-next { border-color: ##1abc9c; background: ##1abc9c; } .block-services-7 .carousel .owl-prev:hover, .block-services-7 .carousel .owl-next:hover { color: ##1abc9c; } .block-pricing dt { color: ##1abc9c; } .block-pricing .price:before { background: ##1abc9c; } .block-pricing li:hover .inner { background: ##1abc9c; } .block-pricing li:hover .button { color: ##1abc9c; } .block-pricing li:hover .button:hover { background: ##1abc9c; } .page-content-section .block-pricing .inner { box-shadow: 0 0 0 1px ##1abc9c; } .block-pricing-2 dt { color: ##1abc9c; } .block-pricing-2 .price { background: ##1abc9c; } .block-pricing-2 .button { color: ##1abc9c; } .block-pricing-2 li:hover .inner { background: ##1abc9c; } .block-pricing-2 li:hover .button:hover { background: ##1abc9c; } .block-progress li i { border-color: ##1abc9c; color: ##1abc9c; } .block-team-2 .pic:before { background-color: ##1abc9c; } .block-team-2 .icons a { color: ##1abc9c; } .block-team-3 .pic:before { background-color: ##1abc9c; } .block-team-3 .icons a { color: ##1abc9c; } .block-team-3 .info h3 { color: ##1abc9c; } .block-team-list .pic span:after { background-color: ##1abc9c; } .block-team-list .icons a:hover { color: ##1abc9c; } .block-team-list .icons a:before { background: ##1abc9c; } .block-team-list .skills { border-top-color: ##1abc9c; border-bottom-color: ##1abc9c; } .block-team-grid .pic:before { background-color: ##1abc9c; } .block-skills i:before { background-color: ##1abc9c; } .block-skills .bar { border-color: ##1abc9c; background-color: ##1abc9c; } .block-skills-2 i:before { background-color: ##1abc9c; } .block-skills-2 .bar { border-color: ##1abc9c; background-color: ##1abc9c; } .block-capabilities h3 { color: ##1abc9c; } .block-capabilities-2 h3 { color: ##1abc9c; } .block-recent-posts .info { background-color: ##1abc9c; } .block-recent-posts-2:before { background-color: ##1abc9c; } .block-recent-posts-2 li .button { color: ##1abc9c; } .block-recent-posts-2 li .button:hover { background-color: ##1abc9c; } .block-recent-posts-2 .button-more { color: ##1abc9c; } .block-recent-posts-2 .button-more:hover { background-color: ##1abc9c; } .block-featured-posts .pic:before { background-color: ##1abc9c; } .block-blog-list .link { background: ##1abc9c; } .block-blog-list .date:before { background-color: ##1abc9c; } .block-blog-list .date-alt { background-color: ##1abc9c; } .block-blog-list .zoom { background-color: ##1abc9c; } .block-blog-grid .link { background: ##1abc9c; } .block-blog-grid .date:before { background-color: ##1abc9c; } .block-blog-grid .pic:hover .date { color: ##1abc9c; } .block-blog-grid .zoom { color: ##1abc9c; } .block-blog-details .date:before, .block-blog-details .reply:before, .block-blog-details .type:before { background-color: ##1abc9c; } .block-blog-details .date-alt { background-color: ##1abc9c; } .block-blog-details .share a:before { border-color: ##1abc9c; background: ##1abc9c; } .block-blog-details .share a:hover { color: ##1abc9c; } .block-blog-details .about:before { background: ##1abc9c; } .block-catalog-toolbar .view a:hover { border-color: ##1abc9c; color: ##1abc9c; } .block-catalog-toolbar .view .active, .block-catalog-toolbar .view .active:hover { border-color: ##1abc9c; background: ##1abc9c; } .block-catalog-toolbar .direction { border-color: ##1abc9c; background: ##1abc9c; } .block-catalog-toolbar .direction:hover { color: ##1abc9c; } .block-catalog-grid .pic:before { background: ##1abc9c; } .block-catalog-grid .badge { background: ##1abc9c; } .block-catalog-grid .price { color: ##1abc9c; } .block-catalog-grid .owl-prev, .block-catalog-grid .owl-next { border-color: ##1abc9c; background: ##1abc9c; } .block-catalog-grid .owl-prev:hover, .block-catalog-grid .owl-next:hover { color: ##1abc9c;; } .block-catalog-list .pic:after { background-color: ##1abc9c; } .block-catalog-list .badge:before { background-color: ##1abc9c; } .block-catalog-list .price { color: ##1abc9c; } .block-catalog-list .owl-prev, .block-catalog-list .owl-next { border-color: ##1abc9c; background-color: ##1abc9c; } .block-catalog-list .owl-prev:hover, .block-catalog-list .owl-next:hover { color: ##1abc9c;; } .block-product-details .price { color: ##1abc9c; } .block-product-details .button-alt { color: ##1abc9c; } .block-product-details-2 .button-alt { color: ##1abc9c; } .block-product-details-2 .share a:before { background-color: ##1abc9c; box-shadow: 0 0 0 2px ##1abc9c; } .block-product-details-2 .share a:hover { color: ##1abc9c; } .block-product-info .owl-prev, .block-product-info .owl-next { border-color: ##1abc9c; background-color: ##1abc9c; } .block-product-info .owl-prev:hover, .block-product-info .owl-next:hover { color: ##1abc9c; } .block-product-tabs .head .active { color: ##1abc9c; } .block-product-tabs .head .active:before { border-top-color: ##1abc9c; } .block-shopping-cart th { border-top-color: ##1abc9c; color: ##1abc9c; } .block-shopping-cart .price { color: ##1abc9c; } .block-shopping-cart .remove { border-color: ##1abc9c; background-color: ##1abc9c; } .block-shopping-cart .remove:hover { color: ##1abc9c; } .block-shopping-cart .quantity a { color: ##1abc9c; } .block-shopping-cart .empty td { border-bottom-color: ##1abc9c; } .block-shopping-cart-totals dd { color: ##1abc9c; } .block-shopping-cart-totals .button-alt { color: ##1abc9c; } .block-checkout-order td:last-child { color: ##1abc9c; } .block-checkout-payment label { color: ##1abc9c; } .block-welcome .icons i:after { border-color: ##1abc9c; background: ##1abc9c; } .block-welcome .icons a:hover i { color: ##1abc9c; } .block-pasteboard:before { background: ##1abc9c; } .block-pasteboard .icons a:hover { color: ##1abc9c; } .block-map-3 .block-head { color: ##1abc9c; } .block-contacts ul li:after, .block-contacts ul li:before { border-color: ##1abc9c; background-color: ##1abc9c; } .block-contacts ul li:before { background-color: #fff; } .block-contacts ul li span { border-bottom-color: ##1abc9c; } .block-contacts ul .active { color: ##1abc9c; } .block-contacts ul .active:before { background-color: ##1abc9c; } .block-contacts ol { border-top-color: ##1abc9c; } .block-contacts ol li { color: ##1abc9c; } .block-contacts ol li i:after { background-color: ##1abc9c; } .block-feedback .message i, .block-feedback-2 .message i { color: ##1abc9c; } .block-not-found h3 { color: ##1abc9c; } .block-not-found .pic:before { background-color: ##1abc9c; } .block-not-found .pic div:before { background-color: ##1abc9c; } .block-not-found-2 .button { color: ##1abc9c; } .block-not-found-2 .button:hover { background: ##1abc9c; } .block-coming-soon li:before { background-color: ##1abc9c; } .block-coming-soon-2 li:after { background-color: ##1abc9c; } .widget-categories a:hover, .widget-categories a.active { color: ##1abc9c; } .widget-top-posts a:hover { color: ##1abc9c; } .widget-text hr { border-top-color: ##1abc9c; } .widget-text em { color: ##1abc9c; } .widget-archive a:hover, .widget-archive a.active { color: ##1abc9c; } .widget-tags a:hover { color: ##1abc9c; } .widget-categories-filter a:hover { color: ##1abc9c; } .widget-categories-filter .active { color: ##1abc9c; } .widget-categories-filter .active span { background-color: ##1abc9c; } .widget-price-filter .ui-slider-range { background-color: ##1abc9c; } .widget-price-filter .ui-slider-handle { background-color: ##1abc9c; } .widget-color-filter .active:before { border-color: ##1abc9c; } .widget-top-products .pic i { background-color: ##1abc9c; } .main-nav ul { background-color: ##1abc9c; }