jQuery mobileでpage swipe

　jQuery mobileの1.3.0のサンプルを改造した自分のためのメモ

　html内で、javascriptを記述しないで、ライブなりの読み込みと、htmlないのちょっとした記載で、スワイプができないかと、探していたら、良いのがありました。

jQuery mobileの1.3.0のサンプルです。
http://view.jquerymobile.com/1.3.0/docs/examples/swipe/swipe-page.php

　しかし、これだとhtml単位？のスワイプだったので、ページ単位に出来ないものかと思い。
　swipe-page.jpを数文字改造。
(ただ単に、htmlの記載をカットしただけですが)
バグがあるかもしれない。
(今度はhtml単位で移動が出来ない。なぜ？)

【何やっているか】
　ページごとに、"pageinit"に設定している感じでしょうか？
　そんでもって、swipeleftなどのイベントでprevやnextにページを変更。
　prevやnextは、「data-prev="#question1" data-next="#question3"」などと記載されているところから持ってくる。

【swipe-page.js】

$( document ).on( "pageinit", "[data-role='page'].page", function() {
	var page = "#" + $( this ).attr( "id" ),
		// Get the filename of the next page that we stored in the data-next attribute
		next = $( this ).jqmData( "next" ),
		// Get the filename of the previous page that we stored in the data-prev attribute
		prev = $( this ).jqmData( "prev" );
	
	// Check if we did set the data-next attribute
	if ( next ) {
		// Prefetch the next page
		$.mobile.loadPage( next );
		// Navigate to next page on swipe left
		$( document ).on( "swipeleft", page, function() {
			$.mobile.changePage( next, { transition: "slide" });
		});
		// Navigate to next page when the "next" button is clicked
		$( ".control .next", page ).on( "click", function() {
			$.mobile.changePage( next, { transition: "slide" } );
		});
	}
	// Disable the "next" button if there is no next page
	else {
		$( ".control .next", page ).addClass( "ui-disabled" );
	}
	// The same for the previous page (we set data-dom-cache="true" so there is no need to prefetch)
	if ( prev ) {
		$( document ).on( "swiperight", page, function() {
			$.mobile.changePage( prev , { transition: "slide", reverse: true } );
		});
		$( ".control .prev", page ).on( "click", function() {
			$.mobile.changePage( prev , { transition: "slide", reverse: true } );
		});
	}
	else {
		$( ".control .prev", page ).addClass( "ui-disabled" );
	}
});

【使い方】

　本当にこの半数じゃないと駄目かは不明。

<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="swipe-page.js"></script>

<div class="page" id="question2" data-role="page"  data-prev="#question1" data-next="#question3">

　みたいにページごとに設定する。question1などはページのＩＤで任意です。数字に意味はありません。
　各ページに付ける必要があります。

PS
①htmlを読み込む場合は、file〜のパスでは上手く行きません。
②htmlを読み込む場合は、読込先は１ページじゃないと駄目です。複数あっても先頭の１ページしか読まれません。