JQTouchを使ってみた。

以前jqueryMobileを使ってみたので、今度はJQTouchを使ってみた。
印象としては、JQTouchは拡張性があって、こちらの方が使いやすそう。
UIはjqueryMobileの方が強そうだけど。

使ってみたExtensionは以下。

jqt.autotitles.js

リンク名をそのままタイトルに自動挿入してくれるもの。

jqt.floaty.js

フロートウィンドウを表示するもの。

jqt.location.js

GPS情報を取得するもの。

jqt.offline.js

オフラインでWEBページを表示するもの。
html5から使用できるローカルストレージにキャッシュするユーティリティ。

TouchScroll for JQTouch

タッチでスクロールできるようにするもの。
jqt.scroll.jsというのもあるけど、こちらの方が使えそう。
ただ、スクロールしたい要素を追加したときに再度イベントリスナーに登録しないといけないので、追加時に自動的にイベント登録できるように修正した。

↓↓修正内容↓↓

var scrollers = [];
$('.scroll').each(function(scroller) {
	scrollers.unshift(new TouchScroll(this, {elastic: true}));
});
//追加対象DIVのclass属性に「holdScroll」をつける。
$('.holdScroll').live('pageAnimationStart', function(e, data) {
	if(data.direction != 'out') {
		return;
	}
	$(this).find('.scroll').each(function() {
		scrollers.shift();
	});
});
$('.holdScroll').live('pageAnimationEnd', function(e, data) {
	if(data.direction != 'in') {
		return;
	}
	$(this).find('.scroll').each(function() {
		scrollers.unshift(new TouchScroll(this, {elastic: true}));
	});
});

↑↑修正内容↑↑

JQTouch Extensionの作り方も分かったので、自分もExtensionを作ってみた。

jqt.swipe.js

スワイプで別ページに遷移できるようにするもの。

//Swipe時のイベントを登録する。
//JQTocuch.goTo()は、存在する要素のみなので、拡張する。	
if ($.jQTouch) {
    $.jQTouch.addExtension(function SwipeExtension(jQTouch) {
    	var newSwipePageCount = 0,
    		history = new Object(),
    		isStart = false,
    		siwpeSelector = 'div.touch';
    	
    	/**
    	 * スワイプイベントを登録する。<br>
    	 */
    	function setUpSwipe() {
    	    $(siwpeSelector).swipe(swipePageChange);
    	}

    	/**
    	 * スワイプしてページ遷移する。
    	 * @param e	イベント
    	 * @param data イベントデータ
    	 */
    	var swipePageChange = function(e, data) {
    		if(isStart) {
    			return;
    		}
    		isStart = true;
    		
    	    var target = $(e.target);
    	    if(data.direction == 'left') {
    	        var swipeLeftHref = target.attr('swipe-left-href');
    	        if(!swipeLeftHref) {
    	    	    isStart = false;
    	        	return false;
    	        }
    	        goToPage(swipeLeftHref, 'slide');
    	    } else if(data.direction == 'right') {
    	        var swipeRightHref = target.attr('swipe-right-href');
    	        if(!swipeRightHref) {
    	    	    isStart = false;
    	        	return false;
    	        }
    	        goBackPage(swipeRightHref, 'slide');
    	    }
    	    
    	    isStart = false;
    	    
    	    /**
    	     * 指定のページに戻り遷移する。
    	     * @param href 遷移先のURL
    	     * @param animation アニメーション
    	     */
    	    function goBackPage(href, animation) {
    	    	if(!href || typeof(href) != 'string') {
    	    		return false;
    	    	}
    	    	
    	    	var newHref = href;
    	    	if(href.substring(0, 1) != '#') {
    	    		newHref = '#' + createPageElement(href);
    	    	}
    	    	jQTouch.goTo(newHref, animation, true);
    	    }
    	    
    	    /**
    	     * 指定のページに遷移する。
    	     * @param herf 遷移先のURL
    	     * @param animation アニメーション
    	     */
        	function goToPage(href, animation) {
    	    	if(!href || typeof(href) != 'string') {
    	    		return false;
    	    	}
    	    	
    	    	var newHref = href;
    	    	if(href.substring(0, 1) != '#') {
    	    		newHref = '#' + createPageElement(href);
    	    	}
    	    	jQTouch.goTo(newHref, animation);
    	    }

        	/**
        	 * ページの要素を新たに作成する。
        	 * @param 要素のURL
        	 * @return 新たに作成されたページのID
        	 */
    	    function createPageElement(href) {
    	    	if(history[href]) {
    	    		return history[href];
    	    	}
    	    	
    	    	var newSwipePageId;
    	    	// ページの作成完了まで行うので、同期して通信する。
    	    	$.ajax({
    	    		type: 'GET',
        			url: href,
        			dataType: 'html',
        			async: false,
        			success : function(data, textStatus) {
    	    			newSwipePageId = 'swipe-page-' + (++newSwipePageCount);
    	    			$data = $(data);
    	    			$data.attr('id', newSwipePageId);
    	    			$data.appendTo($('#jqt'));
    	    			history[href] = newSwipePageId;
    	    		},
    	    		error : function(data, textStatus, errorThrown) {
    	    			console.log('error handle');
    	    		}
    	    	});
    	    	return newSwipePageId;
    	    }
    	    
    	};
	    
    	return setUpSwipe();
    });
}

使い方は、下記の1行を追加するだけ。

<script src="../jqtouch/extensions/jqt.swipe.js" type="text/javascript" charset="utf-8"></script>

んで、HTML側はこう。

<div class="touch" swipe-left-href="../prevpage.html" swipe-right-href="../nextpage.html">
..コンテンツ
</div>

そうすると、DIV上で、スワイプイベントを検知して、画面遷移する。
ただ、ページ読み込みに時間がかかるとあまりよろしくない動きをするので、処理を再検討中。。。
他にもいろいろ作ってみたいなー。

現在は、TouchScroll for JQTouchを拡張して、最下部で自動ロードをする拡張JSを作成中。

JQTouch本家サイト