normalian blog

Let's talk about Microsoft Azure, ASP.NET and Java!

jQuery Mobile × jQuery UI は混ぜるな危険！？

jQuery jQuery Mobile JavaScript

jQuery Mobile の利用に際しての注意点をもう一点追記したい。 jQuery Mobile を利用する場合、 jQuery UI を同時に利用してはいけない点だ。これらの部品は以下の様に用途が異なるためである。

実際、jQuery Mobile のソースを確認すると、 jQuery UI から拡張していることが読み取れる。では、実際に jQuery Mobile と jQuery UI を共存させた場合に起こる問題について紹介する。

ダイアログの表示が壊れる

jQuery Mobile にも jQuery UI にもダイアログと呼ばれる部品があるが、これらを組み合わせた場合、以下の問題が発生する。jQuery Mobile のダイアログが壊れているのが理解できると思う。

jQuery Mobile のみ	jQuery Mobile × jQuery UI

ソースコード例は以下となる。

jQuery Mobile のみ

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>jQuery Mobile: 基礎部分 ダイアログ編</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
	<div data-role="header"> 
			<p> ヘッダ </p> 
	</div>
	<div data-role="content"> 
		<a href="#mydialog" data-role="button" data-rel="dialog">
		ダイアログを開く</a>
	</div>
	<div data-role="footer"> 
			<p> フッタ </p> 
	</div>
</div> 

<div data-role="page" id="mydialog">
	<div data-role="header">
		<h1>確認</h1>
	</div>
	<div data-role="content">
		中身
	</div>
</div>

</body> 
</html>

jQuery Mobiel × jQuery UI

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>jQuery Mobile: 基礎部分 ダイアログ編</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script> 
</head> 
<body>

<div data-role="page"> 
	<div data-role="header"> 
		<p> ヘッダ </p> 
	</div>
	<div data-role="content"> 
		<a href="#mobile_dialog" data-role="button" data-rel="dialog">
		jQuery Mobileのダイアログを開く</a>
		<a href="#" data-role="button" onclick="$('#ui_dialog').dialog();">
		jQuery UIのダイアログを開く</a>
	</div>
	<div data-role="footer"> 
			<p> フッタ </p> 
	</div>
</div> 

<!-- jQuery Mobileのダイアログで利用するDOM要素 -->
<div data-role="page" id="mobile_dialog">
	<div data-role="header">
		<h1>確認</h1>
	</div>
	<div data-role="content">
		中身
	</div>
</div>

<!-- jQuery UIのダイアログで利用するDOM要素 -->
<div id="ui_dialog" title="jQuery UIのダイアログ">
	<p>ダイアログの中身</p>
</div>

</body> 
</html>

UIコンポーネントの描画が壊れる

以下の様にUIコンポーネントの描画が壊れてしまう。

ソースコードは以下となる。

jQuery Mobile のみ

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>jQuery Mobile: input要素について</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home"> 
	<div data-role="content"> 
	    <fieldset data-role="controlgroup">
	    	<legend>ペットの選択:</legend>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
	         	<label for="radio-choice-1">猫</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
	         	<label for="radio-choice-2">犬</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
	         	<label for="radio-choice-3">色々</label>
	    </fieldset>
	    <fieldset data-role="controlgroup" data-type="horizontal" >
	    	<legend>年代の選択</legend>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
	         	<label for="radio-choice-1">30代</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
	         	<label for="radio-choice-2">40代</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
	         	<label for="radio-choice-3">50代</label>
	    </fieldset>
<div data-role="fieldcontain">
	<label for="slider">Select slider:</label>
	<select name="slider" id="slider" data-role="slider">
		<option value="off">Off</option>
		<option value="on">On</option>
	</select> 
</div>
	</div>
	<div data-role="footer" class="footer-docs" data-theme="c"> 
			<p>&copy; aaa </p> 
	</div>
</div> 
</body> 
</html>

jQuery Mobile × jQuery UI

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>jQuery Mobile: input要素について</title> 
	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
	<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script> 
</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home"> 
	<div data-role="content"> 
	    <fieldset data-role="controlgroup">
	    	<legend>ペットの選択:</legend>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
	         	<label for="radio-choice-1">猫</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
	         	<label for="radio-choice-2">犬</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
	         	<label for="radio-choice-3">色々</label>
	    </fieldset>
	    <fieldset data-role="controlgroup" data-type="horizontal" >
	    	<legend>年代の選択</legend>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
	         	<label for="radio-choice-1">30代</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
	         	<label for="radio-choice-2">40代</label>
	         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
	         	<label for="radio-choice-3">50代</label>
	    </fieldset>
<div data-role="fieldcontain">
	<label for="slider">Select slider:</label>
	<select name="slider" id="slider" data-role="slider">
		<option value="off">Off</option>
		<option value="on">On</option>
	</select> 
</div>
	</div>
	<div data-role="footer" class="footer-docs" data-theme="c"> 
			<p>&copy; aaa </p> 
	</div>
</div> 
</body> 
</html>