jqueryMobileのα版を使ってみた。

javascript jquery

現在スマートフォン用のサイトを作るために、簡単にデザイン変更が可能なJqueryMobileがあったので、使ってみた。

下記のように、サイトに基づいて作ってみた。
あと、こちらのまとめサイトも参考にさせていただいた。

<!DOCTYPE HTML>
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<head>
<title>Jquery Mobile Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="d">

    <div data-role="header">
        <h1>title</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li data-role="list-divider">outer-test-links</li>
            <li><a href="./jq-mobile-test-2.html">test-link</a></li>
            <li><a href="./jq-mobile-test.html">my-link</a></li>
        </ul>
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li data-role="list-divider">inner-test-links</li>
            <li><a href="#inner-test">test-link</a></li>
        </ul>
    </div>
    
    <div data-role="footer">
        <h4>footer</h4>
    </div>

</div>

</body>
</html>

HTMLの属性にJqueryMobile特有のものを記述すると、それを解釈して、デザインをスマートフォン用に変換してくれるようだ。

使っていくうちに1点問題があった。
同じページに遷移すると、HTMLが壊れるという問題。。

JqueryMobileのソースを追っていくと、下記の部分が問題があることが分かった。

if(transition && (transition !== 'none')){	
	$pageContainer.addClass('ui-mobile-viewport-transitioning');
	// animate in / out
	from.addClass( transition + " out " + ( back ? "reverse" : "" ) );
	to.addClass( $.mobile.activePageClass + " " + transition +
		" in " + ( back ? "reverse" : "" ) );
	
	// callback - remove classes, etc
	to.animationComplete(function() {
		from.add( to ).removeClass(" out in reverse " + $.mobile.transitions.join(' ') );
		from.removeClass( $.mobile.activePageClass );
		loadComplete();
		$pageContainer.removeClass('ui-mobile-viewport-transitioning');
	});
}
else{
	from.removeClass( $.mobile.activePageClass );
	to.addClass( $.mobile.activePageClass );
	loadComplete();
}

3200行目あたり。

transitionは遷移時の切り替えActionをしている部分。
fromは遷移元のページ（or要素）、toは遷移先のページ（or要素）。

この処理は、fromの要素を消して、切り替えActionが指定されている場合は、その切り替えActionでtoの要素を表示するというもの。
つまり、fromの要素とtoの要素が同じであれば、最終的に何も表示されない。。

そこで、下記のように変更した。

if(transition && (transition !== 'none')){	
	$pageContainer.addClass('ui-mobile-viewport-transitioning');
	// animate in / out
	from.addClass( transition + " out " + ( back ? "reverse" : "" ) );
	to.addClass( $.mobile.activePageClass + " " + transition +
		" in " + ( back ? "reverse" : "" ) );
	
	// callback - remove classes, etc
	to.animationComplete(function() {
		from.add( to ).removeClass(" out in reverse " + $.mobile.transitions.join(' ') );
		
		// chenged by ochi0218 start
//		from.removeClass( $.mobile.activePageClass );
		if(to.attr('id') != from.attr('id')) {
			from.removeClass( $.mobile.activePageClass );
		}
		// chenged by ochi0218 end

		loadComplete();
		$pageContainer.removeClass('ui-mobile-viewport-transitioning');
	});
}
else{
	from.removeClass( $.mobile.activePageClass );
	to.addClass( $.mobile.activePageClass );
	loadComplete();
}

これで、とりあえず表示されるようになった。

早く安定版でないかなー。