現在 Monaca というサービスを使ってスマートフォンアプリを作っているのですが、Onsen UI と AngularJS って便利だなと思い、Webサイトでも使えそうだったので試してみました。
js、cssファイルの呼び出し
<head>内で次の5行を呼び出します。バージョンは一番新しいものを使ってみました。
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/onsenui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/angular-onsenui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsenui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsen-css-components.min.css">
サンプルコード
コードはこちらのサンプルを使ってみました。ons-splitter を使ってスワイプすると表示されるメニューを出しています。
https://ja.onsen.io/v2/api/angular1/ons-splitter.html
実際のサイト
CodePen とかを使ってカッコよく見せたかったのですが、なんだかうまく表示できなかったので、実際のサイトを公開します。
https://beelabo.com/services/design/d1/
コード
参考までにコード全体はこんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/onsenui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/js/angular-onsenui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsenui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/2.9.1/css/onsen-css-components.min.css">
<script>
ons.bootstrap()
.controller('AppController', function($scope) {
$scope.message = "Hello Onsen UI and Angular.js";
this.load = function(page) {
$scope.splitter.content.load(page);
$scope.splitter.left.close();
};
this.toggle = function() {
$scope.splitter.left.toggle();
};
});
ons.ready(function() {
});
</script>
</head>
<body>
<ons-splitter ng-controller="AppController as app" var="splitter">
<ons-splitter-side side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item ng-click="app.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item ng-click="app.load('settings.html')" tappable>
Settings
</ons-list-item>
<ons-list-item ng-click="app.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content page="home.html"></ons-splitter-content>
</ons-splitter>
<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="app.toggle()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Main<br>
{{message}}
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>
</ons-page>
</ons-template>
<ons-template id="settings.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="app.toggle()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Settings
</div>
</ons-toolbar>
</ons-page>
</ons-template>
<ons-template id="about.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="app.toggle()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
About
</div>
</ons-toolbar>
</ons-page>
</ons-template>
</body>
</html>
CodePen
なぜ表示されないのか。。
See the Pen Onsen UI and AngularJS by BeeLabo Master (@BeeLabo) on CodePen.