エクスポートしただけなので、インポートして使えます。
手元に 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>ページ❷</h1> <ons-button onclick="myNavigator.popPage()"> Pop Page </ons-button> <br> <br> <img src="image/page2.jpg"> </div> </ons-page>
▼ 下の赤い枠内が gesture 情報
|
|
【Androidの最新記事】
- デバイスを探す / Find My Device - Google / Android Find
- JavaScript から Android へアクセス
- Android 5.1 リリース済み。SDK( android-sdk_r24.0.2-windows.zip ) でまずエミュレータ作って、あとから Eclipse と Android Studio..
- クラウドでアプリを作成してスマホで動作させる『Monaca』を Android エミュレータの 5.1 で動作確認しました
- Android で Post と Get
- 別の ADT(Android) で作成されたワークスペースを最新の ADT で開く場合の操作方法
- Android : ListView Twitter 検索テンプレート
- トラブル : AndroidManifest.xml に XML 宣言があるとエラーになる???
- Twitter API の自分のアプリのトークンを使って投稿するだけの class Android_Twitter
- Android 単純リストビューを google-gson で最速構築
- Android をテストするのにほんの少し楽になるかもしれないクラス
- Android : Google Spreadsheets API version 3.0でGoogleスプレッドシートを参照
- Android 4.2.2(ADT) : class MyDatePicker extends DatePickerDialog
- Android : 日付ダイアログをインナーで使う( 完了ボタンをクリックした場合としない場合の対応 )
- Android(4.2.2) ADT から Post や Get をできるかぎり簡単にするサンプル
- Android ADT : 単純画面遷移
- HashMap の Key と Value をそれぞれソートして、最終的には 配列に変換して テンプレートを使って for ループを簡単に記述する
- ADT Eclipse : sysout テンプレートの変更
- Android(ADT Eclipse) 用 ボタンイベントテンプレート
- Android から Post 投稿 / HttpPostAndXml extends AsyncTask<Map, Void, Document>
