JavaScript + Ajax 実践サンプル集 - jQueryのAccordionプラグインを利用したアコーディオンメニュー (Part3)

jQueryのAccordionプラグインを利用したアコーディオンメニュー (Part3)

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのaccordion()プラグインを利用してアコーディオン型のメニューを表示します。マウスをタブ上に移動すると自動的にサブメニューが展開されます。

このサンプルを編集して試してみる ←サンプルが背後に隠れて見えないときは左をクリック！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Accordion Menu (Part3) </title>
  <link href="jQuery/accordion1/demo.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/accordion1/chili-1.7.pack.js" type="text/javascript"></script>
  <script src="jQuery/accordion1/jquery.easing.js" type="text/javascript"></script>
  <script src="jQuery/accordion1/jquery.dimensions.js" type="text/javascript"></script>
  <script src="jQuery/accordion1/jquery.accordion.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#navigation').accordion({
        active: false,
        header: '.head',
        navigation: true,
        event: 'mouseover',
        fillSpace: true,
        animated: 'easeslide'
      });
    });    
  </script>
</head>
<body>
  <div style="height: 250px; margin-bottom: 1em;">
    <ul id="navigation">
      <li><a class="head" href="?p=1.1.1">Guitar</a>
        <ul>
          <li><a href="?p=1.1.1.1">Electric</a></li>
          <li><a href="?p=1.1.1.2">Acoustic</a></li>
          <li><a href="?p=1.1.1.3">Amps</a></li>
          <li><a href="?p=1.1.1.4.1">Effects A</a></li>
          <li><a href="?p=1.1.1.4.2">Effects B</a></li>
          <li><a href="?p=1.1.1.4.3">Effects C</a></li>
          <li><a href="?p=1.1.1.4.4">Effects D</a></li>
          <li><a href="?p=1.1.1.5">Accessories</a></li>
        </ul>
      </li>
      <li><a class="head" href="?p=1.1.2">Bass</a>
        <ul>
          <li><a href="?p=1.1.2.1">Electric</a></li>
          <li><a href="?p=1.1.2.2">Acoustic</a></li>
          <li><a href="?p=1.1.2.3">Amps</a></li>
          <li><a href="?p=1.1.2.4">Effects</a></li>
          <li><a href="?p=1.1.2.5">Accessories</a></li>
        </ul>
      </li>
      <li><a class="head" href="?p=1.1.3">Drums</a>
        <ul>
          <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
          <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
          <li><a href="?p=1.1.3.4">Cymbals</a></li>
          <li><a href="?p=1.1.3.5">Hardware</a></li>
          <li><a href="?p=1.1.3.6">Accessories</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/*
 * jQuery UI Accordion 1.6
 * 
 * Copyright (c) 2007 Jörn Zaefferer
 *
 * http://docs.jquery.com/UI/Accordion
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.accordion.js 4876 2008-03-08 11:49:04Z joern.zaefferer $
 *
 */

;(function($) {
	
// If the UI scope is not available, add it
$.ui = $.ui || {};

$.fn.extend({
	accordion: function(options, data) {
		var args = Array.prototype.slice.call(arguments, 1);

		return this.each(function() {
			if (typeof options == "string") {
				var accordion = $.data(this, "ui-accordion");
				accordion[options].apply(accordion, args);
			// INIT with optional options
			} else if (!$(this).is(".ui-accordion"))
				$.data(this, "ui-accordion", new $.ui.accordion(this, options));
		});
	},
	// deprecated, use accordion("activate", index) instead
	activate: function(index) {
		return this.accordion("activate", index);
	}
});

$.ui.accordion = function(container, options) {
	
	// setup configuration
	this.options = options = $.extend({}, $.ui.accordion.defaults, options);
	this.element = container;
	
	$(container).addClass("ui-accordion");
	
	if ( options.navigation ) {
		var current = $(container).find("a").filter(options.navigationFilter);
		if ( current.length ) {
			if ( current.filter(options.header).length ) {
				options.active = current;
			} else {
				options.active = current.parent().parent().prev();
				current.addClass("current");
			}
		}
	}
	
	// calculate active if not specified, using the first header
	options.headers = $(container).find(options.header);
	options.active = findActive(options.headers, options.active);

	if ( options.fillSpace ) {
		var maxHeight = $(container).parent().height();
		options.headers.each(function() {
			maxHeight -= $(this).outerHeight();
		});
		var maxPadding = 0;
		options.headers.next().each(function() {
			maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
		}).height(maxHeight - maxPadding);
	} else if ( options.autoheight ) {
		var maxHeight = 0;
		options.headers.next().each(function() {
			maxHeight = Math.max(maxHeight, $(this).outerHeight());
		}).height(maxHeight);
	}

	options.headers
		.not(options.active || "")
		.next()
		.hide();
	options.active.parent().andSelf().addClass(options.selectedClass);
	
	if (options.event)
		$(container).bind((options.event) + ".ui-accordion", clickHandler);
};

$.ui.accordion.prototype = {
	activate: function(index) {
		// call clickHandler with custom event
		clickHandler.call(this.element, {
			target: findActive( this.options.headers, index )[0]
		});
	},
	
	enable: function() {
		this.options.disabled = false;
	},
	disable: function() {
		this.options.disabled = true;
	},
	destroy: function() {
		this.options.headers.next().css("display", "");
		if ( this.options.fillSpace || this.options.autoheight ) {
			this.options.headers.next().css("height", "");
		}
		$.removeData(this.element, "ui-accordion");
		$(this.element).removeClass("ui-accordion").unbind(".ui-accordion");
	}
}

function scopeCallback(callback, scope) {
	return function() {
		return callback.apply(scope, arguments);
	};
}

function completed(cancel) {
	// if removed while animated data can be empty
	if (!$.data(this, "ui-accordion"))
		return;
	var instance = $.data(this, "ui-accordion");
	var options = instance.options;
	options.running = cancel ? 0 : --options.running;
	if ( options.running )
		return;
	if ( options.clearStyle ) {
		options.toShow.add(options.toHide).css({
			height: "",
			overflow: ""
		});
	}
	$(this).triggerHandler("change.ui-accordion", [options.data], options.change);
}

function toggle(toShow, toHide, data, clickedActive, down) {
	var options = $.data(this, "ui-accordion").options;
	options.toShow = toShow;
	options.toHide = toHide;
	options.data = data;
	var complete = scopeCallback(completed, this);
	
	// count elements to animate
	options.running = toHide.size() == 0 ? toShow.size() : toHide.size();
	
	if ( options.animated ) {
		if ( !options.alwaysOpen && clickedActive ) {
			$.ui.accordion.animations[options.animated]({
				toShow: jQuery([]),
				toHide: toHide,
				complete: complete,
				down: down,
				autoheight: options.autoheight
			});
		} else {
			$.ui.accordion.animations[options.animated]({
				toShow: toShow,
				toHide: toHide,
				complete: complete,
				down: down,
				autoheight: options.autoheight
			});
		}
	} else {
		if ( !options.alwaysOpen && clickedActive ) {
			toShow.toggle();
		} else {
			toHide.hide();
			toShow.show();
		}
		complete(true);
	}
}

function clickHandler(event) {
	var options = $.data(this, "ui-accordion").options;
	if (options.disabled)
		return false;
	
	// called only when using activate(false) to close all parts programmatically
	if ( !event.target && !options.alwaysOpen ) {
		options.active.parent().andSelf().toggleClass(options.selectedClass);
		var toHide = options.active.next(),
			data = {
				instance: this,
				options: options,
				newHeader: jQuery([]),
				oldHeader: options.active,
				newContent: jQuery([]),
				oldContent: toHide
			},
			toShow = options.active = $([]);
		toggle.call(this, toShow, toHide, data );
		return false;
	}
	// get the click target
	var clicked = $(event.target);
	
	// due to the event delegation model, we have to check if one
	// of the parent elements is our actual header, and find that
	if ( clicked.parents(options.header).length )
		while ( !clicked.is(options.header) )
			clicked = clicked.parent();
	
	var clickedActive = clicked[0] == options.active[0];
	
	// if animations are still active, or the active header is the target, ignore click
	if (options.running || (options.alwaysOpen && clickedActive))
		return false;
	if (!clicked.is(options.header))
		return;

	// switch classes
	options.active.parent().andSelf().toggleClass(options.selectedClass);
	if ( !clickedActive ) {
		clicked.parent().andSelf().addClass(options.selectedClass);
	}

	// find elements to show and hide
	var toShow = clicked.next(),
		toHide = options.active.next(),
		//data = [clicked, options.active, toShow, toHide],
		data = {
			instance: this,
			options: options,
			newHeader: clicked,
			oldHeader: options.active,
			newContent: toShow,
			oldContent: toHide
		},
		down = options.headers.index( options.active[0] ) > options.headers.index( clicked[0] );
	
	options.active = clickedActive ? $([]) : clicked;
	toggle.call(this, toShow, toHide, data, clickedActive, down );

	return false;
};

function findActive(headers, selector) {
	return selector != undefined
		? typeof selector == "number"
			? headers.filter(":eq(" + selector + ")")
			: headers.not(headers.not(selector))
		: selector === false
			? $([])
			: headers.filter(":eq(0)");
}

$.extend($.ui.accordion, {
	defaults: {
		selectedClass: "selected",
		alwaysOpen: true,
		animated: 'slide',
		event: "click",
		header: "a",
		autoheight: true,
		running: 0,
		navigationFilter: function() {
			return this.href.toLowerCase() == location.href.toLowerCase();
		}
	},
	animations: {
		slide: function(options, additions) {
			options = $.extend({
				easing: "swing",
				duration: 300
			}, options, additions);
			if ( !options.toHide.size() ) {
				options.toShow.animate({height: "show"}, options);
				return;
			}
			var hideHeight = options.toHide.height(),
				showHeight = options.toShow.height(),
				difference = showHeight / hideHeight;
			options.toShow.css({ height: 0, overflow: 'hidden' }).show();
			options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
				step: function(now) {
					var current = (hideHeight - now) * difference;
					if ($.browser.msie || $.browser.opera) {
						current = Math.ceil(current);
					}
					options.toShow.height( current );
				},
				duration: options.duration,
				easing: options.easing,
				complete: function() {
					if ( !options.autoheight ) {
						options.toShow.css("height", "auto");
					}
					options.complete();
				}
			});
		},
		bounceslide: function(options) {
			this.slide(options, {
				easing: options.down ? "bounceout" : "swing",
				duration: options.down ? 1000 : 200
			});
		},
		easeslide: function(options) {
			this.slide(options, {
				easing: "easeinout",
				duration: 700
			})
		}
	}
});

})(jQuery);

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
*
{
  margin: 0;
  padding: 0;
}
html, body, #main
{
  height: 100%;
}
body, div
{
  font-family: 'lucida grande' , helvetica, verdana, arial, sans-serif;
}
body
{
  margin: 0;
  padding: 0;
  font-size: small;
  color: #333;
}
h1, h2
{
  font-family: 'trebuchet ms' , verdana, arial;
  padding: 10px;
  margin: 0;
}
h1
{
  font-size: large;
}
h3
{
  margin-top: .5em;
}
#main
{
  padding: 1em;
}
#banner
{
  padding: 15px;
  background-color: #06b;
  color: white;
  font-size: large;
  border-bottom: 1px solid #ccc;
  background: url(bg.gif) repeat-x;
  text-align: center;
}
#banner a
{
  color: white;
}
fieldset
{
  padding: 8px;
}
legend
{
  font-weight: bold;
}

pre
{
  margin-bottom: 1em;
}

.jscom, .mix htcom
{
  color: #4040c2;
}
.com
{
  color: green;
}
.regexp
{
  color: maroon;
}
.string
{
  color: teal;
}
.keywords
{
  color: blue;
}
.global
{
  color: #008;
}
.numbers
{
  color: #880;
}
.comm
{
  color: green;
}
.tag
{
  color: blue;
}
.entity
{
  color: blue;
}
.string
{
  color: teal;
}
.aname
{
  color: maroon;
}
.avalue
{
  color: maroon;
}
.jquery
{
  color: #00a;
}
.plugin
{
  color: red;
}

li
{
  list-style-type: none;
}
.basic, #list2, #list3, #navigation
{
  width: 20em;
}

#log
{
  position: fixed;
  bottom: 0;
  right: 1em;
  text-align: right;
}
#switch
{
  position: fixed;
  bottom: 0;
  right: 15em;
}

.basic
{
  width: 260px;
  font-family: verdana;
  border: 1px solid black;
}
.basic div
{
  background-color: #eee;
}

.basic p
{
  margin-bottom: 10px;
  border: none;
  text-decoration: none;
  font-weight: bold;
  font-size: 10px;
  margin: 0px;
  padding: 10px;
}
.basic a
{
  cursor: pointer;
  display: block;
  padding: 5px;
  margin-top: 0;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  color: black;
  background-color: #00a0c6;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #999;
  background-image: url("AccordionTab0.gif");
}
.basic a:hover
{
  background-color: white;
  background-image: url("AccordionTab2.gif");
}
.basic a.selected
{
  color: black;
  background-color: #80cfe2;
  background-image: url("AccordionTab2.gif");
}

#list2
{
  height: 178px;
  border: 1px solid #eee;
  overflow: hidden;
}
#list2 .red
{
  color: red;
  background-color: red;
}
#list2 .green
{
  color: green;
  background-color: green;
}
#list2 .blue
{
  color: blue;
  background-color: blue;
}
#list2 dd
{
  height: 130px;
  overflow: hidden;
}

#list3
{
  border: 1px solid #111;
}
#list3 div.selected .title
{
  font-weight: bold;
}
#list3 div div
{
  border-left: 8px solid #6699CC;
  padding: 5px;
}
#list3 div.title
{
  border: 1px solid #3366AA;
  background-color: #6699CC;
  padding: 10px;
  cursor: pointer;
}
#list3 div.selected
{
  border-bottom: none;
}

#navigation
{
  border: 1px solid #5263AB;
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
  background-color: #E2E2E2;
  width: 200px;
}
#navigation a.head
{
  cursor: pointer;
  border: 1px solid #CCCCCC;
  background: #5263AB url(collapsed.gif) no-repeat scroll 3px 4px;
  color: #FFFFFF;
  display: block;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
  text-indent: 14px;
  text-decoration: none;
}
#navigation a.head:hover
{
  color: #FFFF99;
}
#navigation a.selected
{
  background-image: url(expanded.gif);
}
#navigation a.current
{
  background-color: #FFFF99;
}
#navigation ul
{
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  text-indent: 0px;
}
#navigation li
{
  list-style: none outside none;
  display: inline;
}
#navigation li li a
{
  color: #000000;
  display: block;
  text-indent: 10px;
  text-decoration: none;
}
#navigation li li a:hover
{
  background-color: #FFFF99;
  color: #FF0000;
}

#wizard
{
  width: 200px;
  border: 1px solid black;
}
#wizard .title
{
  background-color: #DDDDDD;
}

@media print
{
  .basic div, #navigation ul, #list2 dd, #list3 div
  {
    display: block !important;
    height: auto !important;
  }
}

このサンプルを編集して試してみる!

    $(function() {
      $('#navigation').accordion({
        active: false,
        header: '.head',
        navigation: true,
        event: 'mouseover',
        fillSpace: true,
        animated: 'easeslide'
      });
    });   

  <div style="height: 250px; margin-bottom: 1em;">
    <ul id="navigation">
      <li><a class="head" href="?p=1.1.1">Guitar</a>
        <ul>
          <li><a href="?p=1.1.1.1">Electric</a></li>
          <li><a href="?p=1.1.1.2">Acoustic</a></li>
          <li><a href="?p=1.1.1.3">Amps</a></li>
          <li><a href="?p=1.1.1.4.1">Effects A</a></li>
          <li><a href="?p=1.1.1.4.2">Effects B</a></li>
          <li><a href="?p=1.1.1.4.3">Effects C</a></li>
          <li><a href="?p=1.1.1.4.4">Effects D</a></li>
          <li><a href="?p=1.1.1.5">Accessories</a></li>
        </ul>
      </li>
      <li><a class="head" href="?p=1.1.2">Bass</a>
        <ul>
          <li><a href="?p=1.1.2.1">Electric</a></li>
          <li><a href="?p=1.1.2.2">Acoustic</a></li>
          <li><a href="?p=1.1.2.3">Amps</a></li>
          <li><a href="?p=1.1.2.4">Effects</a></li>
          <li><a href="?p=1.1.2.5">Accessories</a></li>
        </ul>
      </li>
      <li><a class="head" href="?p=1.1.3">Drums</a>
        <ul>
          <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
          <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
          <li><a href="?p=1.1.3.4">Cymbals</a></li>
          <li><a href="?p=1.1.3.5">Hardware</a></li>
          <li><a href="?p=1.1.3.6">Accessories</a></li>
        </ul>
      </li>
    </ul>
  </div>

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

jQueryのAccordionプラグインを利用したアコーディオンメニュー (Part3)

JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

jQueryのAccordionプラグインを利用したアコーディオンメニュー (Part3)

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...