accordion - シンプルなアコーディオン

HTMLの記述だけで実現できるシンプルなアコーディオンナビです。入れ子もできます。

基本的な使い方

1. アコーディオン全体を包括する親要素に「accordion」というクラスを付与してください。
2. 開閉させるためのボタンとして機能するa要素に「handle」というクラスを付与してください。
3. 「handle」というクラスを付与したa要素のhref属性に開閉させる対象の要素のidを「#id名」のように指定してください。

その他の設定

• あらかじめ開いた状態にしておきたいa要素に「selected」というクラスをつけておくと、その対象の要素が開いた状態になります。
  
• 選択されている状態のa要素には「selected」というクラスが付与されるので、CSSで見た目の設定ができます。

オプション設定

サンプル

サンプルコード

	<div class="accordion">
		<dl>
			<dt><a href="#AccordionPanel01" class="handle selected">ハンドル１</a></dt>
			<dd id="AccordionPanel01">
				<p>
					パネル１。これはダミーテキストです。これはダミーテキストです。
					これはダミーテキストです。これはダミーテキストです。
					これはダミーテキストです。
				</p>
			</dd>
			<dt><a href="#AccordionPanel02" class="handle">ハンドル２</a></dt>
			<dd id="AccordionPanel02">
				<p>
					パネル２。ハンドル２にはあらかじめ「selected」というクラスが付与されています。
					これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。
					これはダミーテキストです。これはダミーテキストです。
				</p>
			</dd>
			<dt><a href="#AccordionPanel03" class="handle">ハンドル３</a></dt>
			<dd id="AccordionPanel03">
				<p>
					パネル３。これはダミーテキストです。これはダミーテキストです。
					これはダミーテキストです。これはダミーテキストです。
					これはダミーテキストです。
				</p>
			</dd>
		</dl>
	</div>
			

button - マウスイベントに合わせて画像を切り替え

マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替えます。

基本的な使い方

1. 切り替えたい画像を含むa要素やinput要素にの「button」というクラスを付与し、元の画像ファイル名に「-over」を付けたマウスオーバー用の画像と、「-down」を付けたマウスダウン時用の画像を用意しておきます。
2. 切り替えたい画像を含むa要素やinput要素に「rollOver」というクラスを付与し、元の画像ファイル名に「-over」を付けたマウスオーバー用の画像を用意しておきます。

オプション設定

サンプル

サンプルコード：HTML

<a href="#" class="button"><img src="./images/button.gif" alt="button" width="120" height="55" /></a>
			

JavaScriptからの呼び出し

JavaScriptから利用する場合、jQueryのプラグインとして、 $("#Selector").button( options ) のようにして呼び出すことができます。

また、タブメニューなどで使えるように選択状態の管理もできるようになっています。
選択状態の機能を利用する場合は「-selected」や「-selected-over」などのファイル名の付いた画像を用意しておく必要があります。選択状態の時のマウスイベントによる画像切り替えをOFFにする場合は「enableMouseEventsSelected」オプションをfalseに設定します。

//マウスオーバー、マウスダウン、選択状態、フェードイン／フェードアウトを有効にする
$("#Selector").button( { over:true, down:true, selected:true, fade:true } );

//画像の状態を切り替える
$("#Selector").button( "over" );
$("#Selector").button( "out" );
$("#Selector").button( "down" );
$("#Selector").button( "up" );

//選択状態にする
$("#Selector").button( "selected", true );
//選択状態を解除
$("#Selector").button( "selected", false );
//選択状態を交互に切り替え
$("#Selector").button( "selected", "toggle" );
				
			

サンプル

サンプルコード

SimpleLib.bind( "init_button", function(){
	$(function(){
		$(".customButton").button( { over:true, down:true, selected:true, fade:true } );
		$(".customButton").click( function(){
			$(this).button( "selected", "toggle" );
			return false;
		});
	});
}, true );
			

checkAll - チェックボックスの一括選択

対象のチェックボックスを一括で選択／解除できるチェックボックスを作成します。

基本的な使い方

1. すべてのチェックボックスを選択する機能を持たせたいinput要素（checkbox）に「checkAll」というクラスを付与します。
   （同じformの親要素内のチェックボックスが対象になります）
2. 「checkAll」クラスを付与したinput要素のvalue属性に対象要素のセレクタを設定すると、対象のチェックボックスを選択できます。

オプション設定

サンプル

サンプルコード：HTML

<form>
	選択してください。<label><input type="checkbox" class="checkAll" /> 全てを選択</label>
	<ul>
		<li><label><input type="checkbox" /> XHTML</label></li>
		<li><label><input type="checkbox" /> CSS</label></li>
		<li><label><input type="checkbox" /> JavaScript</label></li>
		<li><label><input type="checkbox" /> ActionScript</label></li>
	</ul>
</form>
			

fixHeight - 要素の高さを揃える

複数のブロック要素の高さを揃えます。
高さを揃えたい要素たちの親要素に「fixHeight」というクラスを付与すれば、行ごとにそれぞれ一番高い要素に合わせて高さが設定されます。
詳しい使い方はこちらにあります。
http://www.starryworks.co.jp/blog/tips/javascript/fixheightjs.html

基本的な使い方

1. 高さを揃えたい要素の直属の親要素に「fixHeight」というクラスを付与します。
2. 「fixHeight」クラスを付与した要素の直属の子要素ではない、子孫要素の高さを揃えたい場合は、その要素たちに「fixHeightChild」という付与します。
3. 高さを揃える子要素に「fixHeightChild○○○」（○○○は任意の文字）というクラスを付与すると同じクラス名の付いた要素のグループごとに高さが揃えられます。

サンプル

サンプルコード

<div class="fixHeight clearfix">
	<div>
		<strong class="fixHeightChildTitle">これはタイトルです</strong>
		<p class="fixHeightChildBody">これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">これは長めのタイトルです</strong>
		<p class="fixHeightChildBody">これはダミーテキストです。これはダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">これは長〜〜〜〜〜〜〜いタイトルです</strong>
		<p class="fixHeightChildBody">これはダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">これはタイトルです</strong>
		<p class="fixHeightChildBody">これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>
	</div>
	<div>
		<strong class="fixHeightChildTitle">これはタイトルです</strong>
		<p class="fixHeightChildBody">これはダミーテキストです。</p>
	</div>
</div>
			

gaEventTracker - Google Analyticsでユーザーのアクションを解析

ローディング時間の計測、スクロールバーの有無やスクロール量の計測、バナーのインプレッション、表示（実際に見える位置までスクロールされたかどうか）、マウスオーバー、クリックなどのアクションなどをGoogle Analyticsのカスタムイベントとして解析できるようにします。

Google Analyticsの「イベントのトラッキング」で、「Loading」「Scrolling」「Banner」のカテゴリが作成されます。

※新しいトラッキングコード（ga.js）にのみ対応しています。

基本的な使い方

1. ローディング時間：プラグインを読み込むだけで使えますが、ローディングの開始時刻をより正確に計るために、HTMLのできるだけ始めの方に「var gaLoadingStartedOn = new Date().getTime();」の１行のJavaScriptを追加してください。「Load」というアクションが登録され、ミリ秒単位のローディング時間が登録されます。合計値は役に立たないので、平均値を見てください。1,000で1秒です。
   
2. スクロールバーの有無：プラグインを読み込むだけで使えます。スクロールバーが表示された場合（コンテンツのサイズよりウィンドウのサイズが小さいとき）、縦方向は「VerticalScrollbarExists」、横方向は「HorizontalScrollbarExists」というアクションが登録されます。
   
3. スクロール：プラグインを読み込むだけで使えます。スクロールしたかどうかを解析します。スクロールした場合に、「Scroll」というアクションが1回だけ登録されます。
   
4. スクロール量：1番下までスクロールした場合、「ScrollTop100」、80%までスクロールした場合「ScrollTop80」というように20%刻みでアクションが登録されます。
   
5. バナーのアクション：バナーに「gaBanner」というクラスを付与して、id属性を設定してください。id属性の文字列をラベルとして、「Impression」「RealImpression」「MouseOver」「Click」の各アクションが登録されます。「RealImpression」はページが表示されただけでなく、そのバナーが表示される位置までスクロールしたことを示します。
   

オプション設定

サンプルコード

ローディング時間をより正確に計測するためには、以下のコードを<head>内の一番始めの方に記述してください。

<script type="text/javascript">var gaLoadingStartedOn = new Date().getTime();</script>
			

ie6Png2Gif - IE6でPNGをGIFに置換

IE6で閲覧された場合だけ、PNG画像（<img>のsrc属性やCSSのbackground-image）をGIFに置換します。

基本的な使い方

1. 画像を置換したい要素に「png2gif」というクラスを付与してください。クラスを付与された要素の、拡張子が「png」のsrc属性や、background-imageの値が置換されます。

オプション設定

サンプル

サンプルコード

<div style="background-image:url(images/ie6pngfix-bg.gif); padding:90px 80px 60px 80px;">
	<img src="images/ie6pngfix-img.png" alt="PNG" width="600" height="100" class="png2gif" />
</div>
			

ie6PngFix - IE6でPNG透過

DD_belatedPNGというスクリプトを読み込んで、Internet Explorer 6でも透過PNGを利用できるようにします。

基本的な使い方

1. 背景を透過させたい要素や透過させたいimg要素に「pngfix」というクラスを付与してください。src属性の拡張子が「png」のimg要素やinput要素はデフォルトのセレクタで自動的に透過するようになっています。

オプション設定

サンプル

サンプルコード

<div style="background-image:url(images/ie6pngfix-bg.gif); padding:90px 80px 60px 80px;">
	<img src="images/ie6pngfix-img.png" alt="PNG" width="600" height="100" class="pngfix" />
</div>
			

ie6PositionFixed - IE6でposition:fixed

jQuery.exFixedというプラグインを利用して、Internet Explorer 6でもCSSのposition:fixedを利用できるようにします。

基本的な使い方

1. position:fixedを指定する要素に「fixed」というクラスを付与してください。

オプション設定

サンプル

このページの中央下にあるこの画像（）のようになります。

サンプルコード

<div style="position:fixed; bottom:0px; left:50%;" class="fixed showIfScroll">
	<a href="#" class="scroll rollover"><img src="images/pagetop.gif" alt="このページの先頭へ" width="40" height="40" /></a>
</div>
			

imgSwap - 画像の切り替え

a要素をクリックして、既存のimg要素の画像を切り替えます。

基本的な使い方

1. a要素に「imgSwap」というクラスを付与します。
2. a要素のhref属性に表示したい画像のURLの後に「#」と画像を切り替えたいimg要素のidを指定します。

オプション設定

サンプル

• 
• 
• 
• 
• 

サンプルコード：HTML

<ul class="clearfix">
	<li><a href="images/sanei-pict01.jpg#MainImg" class="imgSwap"><img src="images/sanei-pict01m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="images/sanei-pict02.jpg#MainImg" class="imgSwap"><img src="images/sanei-pict02m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="images/sanei-pict03.jpg#MainImg" class="imgSwap"><img src="images/sanei-pict03m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="images/sanei-pict04.jpg#MainImg" class="imgSwap"><img src="images/sanei-pict04m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="images/sanei-pict05.jpg#MainImg" class="imgSwap"><img src="images/sanei-pict05m.jpg" alt="" width="40" height="40" /></a></li>
</ul>
<div>
	<img src="images/sanei-pict01.jpg" alt="" id="MainImg" width="600" height="992" />
</div>
			

lightBox

jQuery lightBoxプラグインを読み込みます。
simplelibの「plugins」→「lightBox」ディレクトリ内にある「jquery.lightbox-0.5.css」を自動的に読み込み、同ディレクトリ内にある各画像が利用されます。

基本的な使い方

1. a要素に「lightBox」というクラスを付与します。

オプション設定

サンプル

サンプルコード：HTML

<ul class="clearfix">
	<li><a href="./images/sanei-pict01.jpg" class="lightBox"><img src="./images/sanei-pict01m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="./images/sanei-pict02.jpg" class="lightBox"><img src="./images/sanei-pict02m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="./images/sanei-pict03.jpg" class="lightBox"><img src="./images/sanei-pict03m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="./images/sanei-pict04.jpg" class="lightBox"><img src="./images/sanei-pict04m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="./images/sanei-pict05.jpg" class="lightBox"><img src="./images/sanei-pict05m.jpg" alt="" width="40" height="40" /></a></li>
</ul>
			

overlayOthers - ロールオーバーしたもの以外が薄くなる

指定した要素の子孫のa要素にロールオーバーすると、他のa要素にcssで背景色や背景画像を指定できる半透明の要素がかぶさります。

基本的な使い方

1. 複数のa要素を子孫に持つ要素に「overlayOthers」というクラスを付与します。
2. CSSで「overlay」というクラスを持つ要素の背景を指定します。

オプション設定

サンプル

サンプルコード：HTML

<ul class="overlayOthers">
	<li><a href="#"><img src="images/sanei-pict01m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="#"><img src="images/sanei-pict02m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="#"><img src="images/sanei-pict03m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="#"><img src="images/sanei-pict04m.jpg" alt="" width="40" height="40" /></a></li>
	<li><a href="#"><img src="images/sanei-pict05m.jpg" alt="" width="40" height="40" /></a></li>
</ul>
			

サンプルコード：CSS

.overlay { background-color:#ffffff; }
			

scroll - スムーススクロール

指定した要素の位置までアニメーションしながらスクロールします。

基本的な使い方

1. a要素のhref属性にスクロールする先の要素のidを「#id名」のように指定し、「scroll」というクラスを付与します。
2. ページの先頭までスクロールする場合はhref属性を「#」にします。

オプション設定

サンプル

サンプルコード

<div>
	<ul>
		<li><a href="#usage01" class="scroll">使い方1</a></li>
		<li><a href="#usage02" class="scroll">使い方2</a></li>
		<li><a href="#" class="scroll">ページの先頭へ</a></li>
	</ul>
</div>
			

textHint - 非選択時のテキストボックスにヒントを表示

未入力で非選択時のテキストボックスおよびテキストエリアにヒントを表示します。

基本的な使い方

1. テキストボックスやテキストエリアに、「hint」というクラスを付与します。
2. その要素のtitle属性にヒントのテキストを設定します。
3. 非選択時には「blur」というクラスが付与されるのでCSSでスタイルを設定します。
   

オプション設定

サンプル

サンプルコード：HTML

<form>
	<input type="text" class="hint" size="30" value="" title="キーワードを入力してください" />
	<input type="submit" value="検索" />
</form>
			

サンプルコード：CSS

input.blur, textarea.blur { color:#cccccc; }
			

tab - タブ

タブ機能

基本的な使い方

1. タブと表示を切り替える対象要素を含む親要素に「tabSet」というクラスを付与します。
2. 「tab」というクラスを付与したa要素のhref属性に表示を切り替える対象要素のセレクタを設定します。
   （例）タブ：<a href="#Panel01" class="tab"> 　切り替える対象要素：<div id="Panel01">
3. タブに「selected」というクラスを付与すると、そのタブがあらかじめ選択状態になります。

依存関係

buttonプラグインが必要です。
このプラグインは自動的にbuttonプラグインをロードします。plubinsディレクトリにbutton.jsがない場合は正しく動作しません。 明示的にbuttonプラグインをロードしても2重にロードすることはありません。

オプション設定

サンプル

• タブ１
• タブ２
• タブ３

コンテンツ１

コンテンツ２

コンテンツ３

サンプルコード：HTML

<div class="tabSet">
	<ul class="clearfix">
		<li><a href="#TabPanel01" class="tab">タブ１</a></li>
		<li><a href="#TabPanel02" class="tab">タブ２</a></li>
		<li><a href="#TabPanel03" class="tab selected">タブ３</a></li>
	</ul>
	<div>
		<div class="panel clearfix" id="TabPanel01">
			<img src="./images/sanei-pict01m.jpg" alt="" width="40" height="40" />
			コンテンツ１
		</div>
		<div class="panel clearfix" id="TabPanel02">
			<img src="./images/sanei-pict02m.jpg" alt="" width="40" height="40" />
			コンテンツ２
		</div>
		<div class="panel clearfix" id="TabPanel03">
			<img src="./images/sanei-pict03m.jpg" alt="" width="40" height="40" />
			コンテンツ３
		</div>
	</div>
</div>
			

サンプルコード：CSS

div.tabSet ul {
	display:block;
}

div.tabSet ul li {
	display:block;
	float:left;
	margin:0px;
	padding:0px;
}

div.tabSet ul li a {
	display:block;
	padding:5px;
	background-color: #ccc;
	color:#333;
	margin-right:5px;
}

div.tabSet ul li a:hover {
	background-color: #666;
	color:#fff;
}

div.tabSet ul li a.selected,
div.tabSet ul li a.selected:hover {
	background-color: #fff;
	color:#333;
}

div.tabSet div.panel {
	background-color: #fff;
	padding:15px;
}

div.tabSet div.panel img {
	float:left;
	padding-right:10px;
}
			

trimmedScroll - マウスオーバーで画像をスクロール

img要素を含むa要素にマウスオーバーすると別の画像を元のimg要素のサイズにトリミングしてスクロールしながら表示します。

基本的な使い方

1. img要素を含むa要素に「trimmedScroll」というクラスを付与します。
2. 元の画像と同じ幅で高さが大きい画像を用意して、元の画像のファイル名の後に「-scroll」を付けた名前で同じディレクトリにアップします。

オプション設定

サンプル

サンプルコード：HTML

<a href="#" class="trimmedScroll"><img src="images/tonan01-thumbnail.jpg" alt="" width="300" height="60" /></a>
			

zoomView - マウスオーバーで拡大画像を表示

img要素マウスオーバーすると、マウスポインタの位置に合わせた拡大画像を表示します。

基本的な使い方

1. img要素に「zoomView」というクラスを付与します。
2. 元の画像と同じ比率の大きい画像を用意して、元の画像のファイル名の後に「-big」を付けた名前で同じディレクトリにアップします。
3. 見た目をカスタマイズする場合は、plugins/zoomView/zoomView.css のファイルを参考にCSSを記述してください。デフォルトのCSSを読み込まないようにするには、「cssPath」オプションを空に設定します。

オプション設定

サンプル

サンプルコード：HTML

<img src="./images/sanei.jpg" alt="" width="120" height="200" class="zoomView" />