SQLの窓

2015年04月19日


Monaca と 本当の 『Onsen UI最小限のテンプレート』



エクスポートしただけなので、インポートして使えます。



手元に Monaca 公式ガイドブックがあるのですが、インターネット上のドキュメントだけは情報が整理されていない上に一番キモとなるものは、検証しないと解らない事が多かったです。

とりあえず、ons-gesture-detector 要素の使い方のサンプルとして見て下さい。ちなみに、イベント内の gesture 情報を見るには通常 jQuery が必要です。jQuery mobile では、使えません。また、イベントの書き方としても、$(document).on('イベント', 'セレクタ', function(e){} でないと動作しませんでした。他の書き方で書いても、Monaca デバッガで動いても apk にビルドしたものは動作しませんでした。目安としては、プレビューで動かないものは、apk でも動かない可能性があります。

※ jQuery mobile は、コンソールのクリアがうまくいかないような気もします

index.html
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script src="components/loader.js"></script>
	<link rel="stylesheet" href="components/loader.css">
	<link rel="stylesheet" href="css/style.css">
	<script>
		ons.bootstrap();
		ons.ready(function(){
			console.clear();
			console.log("開始");

			$(document).on('click', '#gestureBtn', function(e){
				console.log("ページ移動\n------------");
				myNavigator.pushPage('page2.html');
			});

			// *************************************
			// gestureBtn 用
			// *************************************
			// タップ
			$(document).on('tap', '.gestureTest', function(e){
				console.log("tap");
				console.log("------------");
				for( prop in e.originalEvent.gesture) {
					console.log(prop);
				}
				
			});
			$(document).on('doubletap', '.gestureTest', function(e){
				console.log("doubletap");
			});

			// ホールド
			$(document).on('hold', '.gestureTest', function(e){
				console.log("hold");
			});
			$(document).on('release', '.gestureTest', function(e){
				console.log("release");
			});
			
			// ドラッグ
			$(document).on('drag', '.gestureTest', function(e){
				console.log("drag");
			});

			// その他
			$(document).on('touch', '.gestureTest', function(e){
				console.log("touch");
			});
			

			// *************************************
			// 共通
			// *************************************
			$(document).on('touchstart', '.gestureTest', function(e){
				console.log("touchstart");
			});

			$(document).on('touchend', '.gestureTest', function(e){
				console.log("touchend");
			});

		});
	</script>
</head>
<body>
	<ons-navigator var="myNavigator" page="page1.html">
	</ons-navigator> 
</body>
</html>


初期画面( page1.html )

ons-gesture-detector 内でのみ、スマホで必要ないろいろなイベントに対処できるようになっています。これを使わない場合は、touchstart と touchend とあといくつかの基本処理になります。ons-gesture-detector 内では、ここには無いもっと複雑なジェスチャー(スワイプ、ピンチ他)も対応されています。( 実機が無いので検証できませんでしたが )
<ons-page>
	<ons-toolbar>
		<div class="center">Navigator</div>
	</ons-toolbar>

	<div style="text-align: center">
		<br>
		<ons-gesture-detector>
		<ons-button
			class="gestureTest"
			id="gestureBtn">
			次のページを表示
		</ons-button>
		<br>
		(ジェスチャー対応)
		</ons-gesture-detector>
		
		<br>
		<ons-button
			class="gestureTest"
			onclick="myNavigator.pushPage('page2.html')"
			id="normalBtn">
			次のページを表示
		</ons-button>
		<br>
		(普通のボタン)
		
	</div>

</ons-page>


page2.html



<ons-page>
	<ons-toolbar>
		<div class="left"><ons-back-button>Back</ons-back-button></div>
		<div class="center">画像表示</div>
	</ons-toolbar>

	<div style="text-align: center">

		<h1>ページ&#10103;</h1>
		<ons-button
			onclick="myNavigator.popPage()">
		  Pop Page
		</ons-button>
		<br>
		<br>
		<img src="image/page2.jpg">

	</div>
</ons-page>


▼ 下の赤い枠内が gesture 情報



タグ:android MONACA
【Androidの最新記事】
posted by lightbox at 2015-04-19 20:57 | Android | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり