JQueryUI

提供: KZK memo wiki
移動: 案内検索

jQueryUIを組み込む際に躓いた点と解決をメモしておく

Toggle

Toggleを利用する際に気をつけること

サンプル

開閉式のメニューなどに使えるサンプルソース jQueryUIのToggleに関するデモページのソースを参考に作り直したもの。

<!doctype html>
 
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jQuery UI Effects - Toggle</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css" />
 
	<style>
		.toggler	{ width: 500px;}
		.button		{ padding: .5em 1em; text-decoration: none;}
		.effect		{ position: relative; width: 240px; padding: 0.4em;}
		.effect h3	{ margin: 0; padding: 0.4em; text-align: center;}
	</style>
 
	<script>
		$(function() {
			$( ".button" ).click(function() {
			$(this).next("ul").toggle( "blind", {}, 500);
			});
		});
	</script>
 
</head>
<body>
 
	<div class="toggler">
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul>
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul>
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul>
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul>
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	</div>
 
</body>
</html>

注意点

toggleさせる要素の指定方法に注意。 以下の通り書き換えると問題が発生する。

<script>
		$(function() {
			$( ".button" ).click(function() {
			/*$(this).next("ul").toggle( "blind", {}, 500);*/	// <- 元の記述
			$(this).next().toggle( "blind", {}, 500);		// <- 書き換えた記述。このような記述はNG!
			});
		});
 
</script>

一見、動作はするのだがダブルクリックや、アニメーションに再度クリックを行った場合に問題が発生する。 現象としては閉じたメニュがそれ以降開かなくなる


また、もう1パターン

<script>
		$(function() {
			$( ".button" ).click(function() {
			/*$(this).next("ul").toggle( "blind", {}, 500);*/	// <- 元の記述
			$(this).next("div").toggle( "blind", {}, 500);		// <- 書き換えた記述。このような記述はNG!
			});
		});
 
</script>

これもNGである。

解説?

toggleの対象となった要素(今回の場合はulタグ)は、アニメーションする際に一時的にdivタグに囲まれる。divタグはアニメーション後に消える。 NGとした記述の問題点は、開閉する要素を厳密に指定していない点。ClassやIdを利用して開閉する要素を指定すれば良い。 それを怠った場合、一時的に組み込まれたdivに対してtoggleアニメーションが発生してしまうため動作がおかしくなってしまう。


サンプルで提示した例も不十分? 以下のようにしたほうがいいのかも。

<!doctype html>
 
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jQuery UI Effects - Toggle</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css" />
 
	<style>
		.toggler	{ width: 500px;}
		.button		{ padding: .5em 1em; text-decoration: none;}
		.effect		{ position: relative; width: 240px; padding: 0.4em;}
		.effect h3	{ margin: 0; padding: 0.4em; text-align: center;}
	</style>
 
	<script>
		$(function() {
			$( ".button" ).click(function() {
			$(this).next("ul.menulist").toggle( "blind", {}, 500);
			});
		});
	</script>
 
</head>
<body>
 
	<div class="toggler">
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul class="menulist">
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul class="menulist">
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul class="menulist">
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	  <div class="effect ui-widget-content ui-corner-all">
	    <h3 class="ui-widget-header ui-corner-all button">Toggle</h3>
	    <ul class="menulist">
	    	<li>Item 0</li>
	    	<li>Item 1</li>
	    	<li>Item 2</li>
	    	<li>Item 3</li>
	    	<li>Item 4</li>
	    </ul>
	  </div>
	</div>
 
</body>
</html>