simplelib with jQuery

概要

1.simplelibとは

simplelibとはjQueryを利用した様々なプラグインを動的にロードして、ウェブサイトを構築する上でよく使う機能を一元管理するためのツールです。
各プラグインを別ファイルにし、必要なファイルだけをロードします。ダウンロードはこのページの一番下にあります。

2.プラグイン一覧

現在以下のようなプラグインがあり、HTMLに1行追加するだけでこれら全ての機能を追加できます。

accordion シンプルなアコーディオンナビゲーション
button マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える
checkAll チェックボックスの一括選択
fixHeight 要素の高さを揃える
gaEventTracker Google Analyticsでローディング時間、スクロール量、バナーに対するアクションを取得
ie6Png2Gif Internet Explorer 6で、PNGをGIFに置換する
ie6PngFix Internet Explorer 6でも透過PNGを使えるようにする
ie6PositionFixed Internet Explorer 6でもCSSの position:fixed を使えるようにする
imgSwap a要素をクリックして、既存のimg要素の画像を切り替える
lightBox jQuery lightBoxプラグインを読み込む
overlayOthers 指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指定できる半透明の要素をかぶせる
scroll スムーススクロール
tab シンプルなタブナビゲーション
textHint 未入力で非選択時のテキストボックスにヒントを表示する
trimmedScroll img要素を含むa要素にマウスオーバーすると別の画像をそのimg要素のサイズにトリミングしてスクロールしながら表示する
zoomView img要素にマウスオーバーすると拡大画像を表示する

使い方

1.デフォルトの設定で簡単に使う

scriptタグでjQueryを読み込んだ後に、simplelib.jsを読み込みます。その際、src属性にsimplelib.jsのパス指定のあとに「?」(半角クエスチョンマーク)をつけて、読み込むプラグインを「,」(半角カンマ)区切りで指定します。

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="js/simplelib.js?rollOver,scroll,ie6PngFix"></script>
			

※プラグインのスペル間違いやpluginsフォルダにプラグインファイルが存在しない場合などはコンソールにエラーメッセージが出力されます。 コンソールはSafariの開発メニューやFirefoxのプラグインFirebugなどを利用すると確認できます。

2.設定をカスタマイズして使う

simplelibでは各プラグインのオプション設定を一元管理して設定することができます。
設定をカスタマイズするにはsimplelib.jsを読み込む前にJavaScriptで「SimpleLibSettings」というオブジェクトを定義して、オプション設定を記述します。
プラグインごとのオプション設定は各プラグインの使い方で説明します。

<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript">
var SimpleLibSettings = {
	//buttonプラグインのfadeオプションを設定
	button: { fade:true },
	//imgSwapプラグインをクリックではなく、ロールオーバーで発動させるように変更
	imgSwap: { trigger:"mouseover" }
};
</script>
<script type="text/javascript" src="js/simplelib.js?button,imgSwap"></script>
			

プラグイン

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

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

基本的な使い方

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

その他の設定

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

オプション設定

オプション デフォルト 設定内容
selector .accordion アコーディオンをグループ化するための親要素のセレクタ
handleSelector .handle 開閉させるためのボタンとして機能するa要素のセレクタ
selectedClass selected 選択状態の要素に付与するクラス
time 300 開閉するアニメーションの時間(ミリ秒)

サンプル

ハンドル1

パネル1。これはダミーテキストです。これはダミーテキストです。 これはダミーテキストです。これはダミーテキストです。 これはダミーテキストです。

ハンドル2

パネル2。ハンドル2にはあらかじめ「selected」というクラスが付与されています。 これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。 これはダミーテキストです。これはダミーテキストです。

ハンドル3

パネル3。これはダミーテキストです。これはダミーテキストです。 これはダミーテキストです。これはダミーテキストです。 これはダミーテキストです。

サンプルコード

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

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

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

基本的な使い方

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

オプション設定

オプション デフォルト 設定内容
buttonSelector a.button, input.button マウスオーバー/マウスダウンの画像切り替えを発動させる要素のセレクタ
rollOverSelector a.rollover, a.rollOver, input.rollover, input.rollOver マウスオーバーの画像切り替えを発動させる要素のセレクタ
over true マウスオーバーに反応させるかどうか
trueにするとマウスオーバー時に元の画像ファイル名に-overを付けた画像が表示されます。
画像は自動的にプリロードされます。
down true マウスダウンに反応させるかどうか
trueにするとマウスダウン時に元の画像ファイル名に-downを付けた画像が表示されます。
画像は自動的にプリロードされます。
selected true 選択状態を有効にして、必要な画像をプリロードするかどうか
以下のようにスクリプトで選択状態を変更できます。
$("selector").button("selected",true);
$("selector").button("selected",false);
enableMouseEventsSelected true 選択状態になったときにもマウスオーバー/マウスダウンの画像切り替えを発動させるかどうか
fade false 画像の切り替え時にフェードイン/フェードアウトさせるかどうか。(<a>要素のみ)
fadeTime 300 フェードイン/フェードアウト時間

サンプル

button

サンプルコード: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" );
				
			

サンプル

button

サンプルコード

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属性に対象要素のセレクタを設定すると、対象のチェックボックスを選択できます。

オプション設定

オプション デフォルト 設定内容
selector .checkAll プラグインを発動させる要素のセレクタ

サンプル

選択してください。

サンプルコード: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でユーザーのアクションを解析

ga

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

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

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

基本的な使い方

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

オプション設定

オプション デフォルト 設定内容
bannerSelector .gaBanner バナーとしてアクションを解析する要素のセレクタ

サンプルコード

ローディング時間をより正確に計測するためには、以下のコードを<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の値が置換されます。

オプション設定

オプション デフォルト 設定内容
selector .png2gif, .ie6Png2Gif プラグインを発動させる要素のセレクタ
(jQueryを利用しているので一部のCSS3セレクタが利用できます)

サンプル

PNG

サンプルコード

<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要素はデフォルトのセレクタで自動的に透過するようになっています。

オプション設定

オプション デフォルト 設定内容
selector img[src$=png], input[src$=png], .pngfix プラグインを発動させる要素のセレクタ
(jQueryを利用しているので一部のCSS3セレクタが利用できます)

サンプル

PNG

サンプルコード

<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」というクラスを付与してください。

オプション設定

オプション デフォルト 設定内容
selector .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を指定します。

オプション設定

オプション デフォルト 設定内容
selector .imgswap, .imgSwap プラグインを発動させる要素のセレクタ
trigger click 画像の切り替えを実行するイベント(mouseoverを指定するとロールオーバーで切り替わる)
attribute href 画像のURLを指定する属性
othersClass others あるa要素にロールオーバーした時にその他のa要素に付与されるクラス
scrolling false trueを指定すると画像を切り替えるときに対象のimg要素が画面内に収まっていない場合、img要素の位置までスクロールする
scrollingTime 400 scrollingオプションがtrueのとき、目的位置までスクロールする時間(ミリ秒)

サンプル

サンプルコード: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>
			

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

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

基本的な使い方

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

オプション設定

オプション デフォルト 設定内容
selector .overlayOthers プラグインを発動させる要素のセレクタ
opacity 0.8 かぶさる要素の不透明度
exceptionSelector .overlayException 対象から除外するa要素につけるクラス
othersClass others あるa要素にロールオーバーした時にその他のa要素に付与されるクラス
overClass over ロールオーバーしたa要素に付与されるクラス
time 400 ロールオーバーしたときに指定された不透明度までフェードする時間(ミリ秒)
afterTime 0 0以外を指定すると指定された不透明度までフェードした後にさらにここで指定した時間をかけて完全に不透明になる

サンプル

サンプルコード: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属性を「#」にします。

オプション設定

オプション デフォルト 設定内容
selector .scroll スムーススクロールを発動させる要素のセレクタ
time 600 スクロールする時間(ミリ秒)

サンプル

サンプルコード

<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でスタイルを設定します。

オプション設定

オプション デフォルト 設定内容
selector input.hint, textarea.hint プラグインを発動させる要素のセレクタ
attribute title ヒントを設定する属性
blurClass blur 非選択時に付与されるクラス

サンプル

サンプルコード: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重にロードすることはありません。

オプション設定

オプション デフォルト 設定内容
selector .tabSet タブと表示を切り替える対象要素を含む親要素のセレクタ
tabSelector a.tab タブ要素のセレクタ
trigger click タブ切り替えのトリガー
(click/mouseover/focusなどjQueryで扱えるイベント)
その他 他にbuttonプラグインと同様のオプションが利用できます。

サンプル

コンテンツ1
コンテンツ2
コンテンツ3

サンプルコード:HTML

<div class="tabSet">
	<ul class="clearfix">
		<li><a href="#TabPanel01" class="tab">タブ1</a></li>
		<li><a href="#TabPanel02" class="tab">タブ2</a></li>
		<li><a href="#TabPanel03" class="tab selected">タブ3</a></li>
	</ul>
	<div>
		<div class="panel clearfix" id="TabPanel01">
			<img src="./images/sanei-pict01m.jpg" alt="" width="40" height="40" />
			コンテンツ1
		</div>
		<div class="panel clearfix" id="TabPanel02">
			<img src="./images/sanei-pict02m.jpg" alt="" width="40" height="40" />
			コンテンツ2
		</div>
		<div class="panel clearfix" id="TabPanel03">
			<img src="./images/sanei-pict03m.jpg" alt="" width="40" height="40" />
			コンテンツ3
		</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」を付けた名前で同じディレクトリにアップします。

オプション設定

オプション デフォルト 設定内容
selector .trimmedScroll プラグインを発動させる要素のセレクタ
scrollTimePerPixcel 20 1ピクセル当たりのスクロール時間(ミリ秒)
fadeTime 1000 元の画像をフェードアウトさせる時間(ミリ秒)
scrollImgClass 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」オプションを空に設定します。

オプション設定

オプション デフォルト 設定内容
selector .zoomView プラグインを発動させる要素のセレクタ
viewParent body 拡大画像の要素を追加する親要素
cssPath 【SimpleLibのplugins】/zoomView/zoomView.css 拡大画像の枠の大きさや色のスタイルを記述したCSSファイルのパス
margin 20 拡大画像の元のimg要素からの距離
fadeTime 200 マウスアウトで拡大画像をフェードアウトさせる時間(ミリ秒)

サンプル

サンプルコード:HTML

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

ダウンロード

ライセンスはMITライセンスです。プラグインで取り込んでいる外部のライブラリについてはそれぞれのライセンスをご確認ください。

開発中のものはgithubからダウンロードしたりフォークしたりできます。

バグを発見された場合やご要望がある場合はgithubで課題を報告してください。

simplelib.js本体と全てのプラグインをまとめてダウンロード

全てのプラグインをダウンロードして、利用する際に<script>タグで必要なプラグインだけを指定して利用できます。
新たなプラグインを使いたくなったら<script>でプラグインの指定を増やすだけで使えるので、制作中に使うのはこちらをお勧めします。 こちらからダウンロードしてください。
simplelib.zip [ 36KB ]
jQueryのダウンロードはこちら

指定したプラグインを1つのjsファイルとしてダウンロード

制作が完了して公開する際にはファイルサイズが小さくなるこちらをお勧めします。
lightBoxおよびzoomViewにはCSSなどのファイルが必要になるため、simplelib.min.jsと同じディレクトリに「plugins」ディレクトリを置いて、その中に「lightBox」「zoomView」のディレクトリを置いてください。必要なファイルはsimplelib.zip [ 33KB ]の中のpluginsディレクトリ内にあります。

必要なプラグインを選択してダウンロードボタンをクリックしてください。