generator-onsenui-ngcordova
Version:
110 lines (85 loc) • 3.81 kB
HTML
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<!-- --------------- App init --------------- -->
<title>Onsen UI Split View</title>
<script>
angular.module('app', ['onsen', 'ngCordova']);
angular.module('app').controller('AppController', function ($scope) {
document.addEventListener("deviceready", function(){
//$cordovaPlugin available
console.log("deviceready");
}, false);
});
</script>
</head>
<body ng-controller="AppController">
<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/index.js"></script>
<!-- -->
<ons-split-view var="splitView"
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
<ons-template id="page1.html">
<ons-page class="center">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
<p>Rotate the device to landscape/portrait see the views split/collapse.</p>
<p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height (portrait).</p>
</div>
<ons-bottom-toolbar>
</ons-bottom-toolbar>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
<p>Rotate the device to landscape/portrait see the views split/collapse.</p>
<p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height (portrait).</p>
</div>
<ons-bottom-toolbar>
</ons-bottom-toolbar>
</ons-page>
</ons-template>
<ons-template id="secondary.html">
<ons-page style="border-right: 1px solid #ddd;">
<ons-list>
<ons-list-item modifier="chevron"
ng-click="splitView.toggle();
splitView.setMainPage('page1.html');">
<i class="fa fa-home fa-lg" style="color: #666"></i>
Page 1
</ons-list-item>
<ons-list-item modifier="chevron"
ng-click="splitView.toggle(); splitView.setMainPage('page2.html');">
<i class="fa fa-gear fa-lg" style="color: #666"></i>
Page 2
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</body>
</html>