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>
<!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>© aaa </p> </div> </div> </body> </html>
<!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>© aaa </p> </div> </div> </body> </html>