イージングの設定も

メソッドで操作することも

入れ子にすることも

縦だってイケる!

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.kwicks.min.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.kwicks.min.js"></script>
<style>
	#kwicks .title {
		width: 615px;
		font-weight: bold;
		color: #8C0000;
		margin: 40px auto 10px;
	}
	#kwicksP01 { text-align: center; }
	#kwicks .kwicks-demo { margin: 0 auto; }
	#kwicks .kwicks-horizontal li {
		background-color: #ecd16f;
		margin-left: 5px;
	}
	#kwicks .kwicks-demo li:hover { cursor: pointer; }
	#kwicksDemo02 li:hover,
	#kwicksDemo03 li:hover { cursor: default!important; }
	#kwicks .kwicks-demo li:nth-of-type(1) {
		margin-left: 0;
		background-color: #658193;
	}
	#kwicks .kwicks-demo li:nth-of-type(2) { background-color: #8c0000; }
	#kwicks .kwicks-demo li:nth-of-type(3) { background-color: #ecd16f; }
	#kwicks .kwicks-demo li:nth-of-type(4) { background-color: #3c948b; }
	#kwicks .kwicks-selected { background-color: #666!important; }
	
	#kwicksDemo01 {
		width: 615px;
		height: 100px;
	}
	#kwicksDemo01 > li {
		height: 100px;
		width: 150px;
	}
	
	
	#kwicksDemo02 {
		width: 615px;
		height: 100px;
	}
	#kwicksDemo02 > li {
		height: 100px;
		width: 150px;
	}
	#kwicksDemo02 > li.kwicks-expanded {
		background-color: #777;
	}
		
	#kwicksBox {
		margin-top: 20px;
		text-align: center;
	}
	
	
	#kwicksDemo03.kwicks-vertical {
		width: 615px;
		height: 445px;
	}
	#kwicksDemo03.kwicks-vertical > li {
		height: 150px;
		margin-top: 5px;
		background-color: transparent!important;
	}
	#kwicksDemo03 .kwicks-horizontal {
		width: 615px;
		height: 100%;
	}
	#kwicksDemo03 .kwicks-horizontal > li {
		height: 100%;
		width: 150px;
	}
	
	
	#kwicksDemo04 {
		width: 125px;
		height: 415px;
	}
	#kwicksDemo04 > li {
		width: 125px;
		/* overridden by kwicks but good for when JavaScript is disabled */
		height: 100px;
		margin-top: 5px;
	}
</style>
<script>
	$(window).load(function(){
		$('#kwicksDemo01').kwicks({
			behavior: 'menu',
			easing: 'easeOutBounce'
		});
		
		var $kwicksControl = $('#kwicksDemo02').kwicks({
			maxSize : 250,
			spacing : 5
		});			
		$('#kwicksBox button').click(function(e) {
			e.preventDefault();
			var index = $(this).data('index');
			$kwicksControl.kwicks('expand', index);
		});
		
		$('#kwicksDemo03.kwicks-vertical').kwicks({
			maxSize : 295,
			spacing : 5,
			isVertical: true,
			behavior: 'menu',
			selectOnClick: false
		});
		
		$('#kwicksDemo03 .kwicks-horizontal').kwicks({
			maxSize: 295,
			spacing: 5,
			behavior: 'menu',
			selectOnClick: false
		});
		
		$('#kwicksDemo04').kwicks({
			maxSize : 220,
			spacing : 5,
			behavior: 'menu',
			isVertical: true
		});
	});
</script>
<p class="title">イージングの設定も</p>
<ul id="kwicksDemo01" class="kwicks-demo kwicks-horizontal">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

<p class="title">メソッドで操作することも</p>
<ul id="kwicksDemo02" class="kwicks-demo kwicks-horizontal">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<div id="kwicksBox">
	<button class="blue" data-index="0">パネル1</button>
	<button class="red" data-index="1">パネル2</button>
	<button class="yellow" data-index="2">パネル3</button>
	<button class="green" data-index="3">パネル4</button>
</div>

<p class="title">入れ子にすることも</p>
<ul id="kwicksDemo03" class="kwicks-demo kwicks-vertical">
	<li>
		<ul class="kwicks-horizontal">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
	<li>
		<ul class="kwicks-horizontal">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
	<li>
		<ul class="kwicks-horizontal">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
	<li>
		<ul class="kwicks-horizontal">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</li>
</ul>

<p id="kwicksP01" class="title">縦だってイケる!</p>
<ul id="kwicksDemo04" class="kwicks-demo kwicks-vertical">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

kwicksについて

kwicksは、スライドパネルでマウスオーバーした要素の高さ、幅をミョーンと伸ばしてくれるプラグインです。
イージングも設定できるのでおもしろい動きのスライドパネルにすることもできそうです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Flip

    Flip

    Flipは、フリップアニメーションを簡単に実装できる

  • color

    color

    jQueryのanimateメソッドでは実現できない色のアニメーションを可能にする

  • transit

    transit

    animateメソッドを使うように手軽にcss3のtransitionアニメーションなどが使える

  • gridly

    gridly

    要素を格子状に配置し、それを移動させることができる

  • Vague

    Vague

    Vagueは、要素にブラーアニメーションをセットできる