JavaScript: TabSet ver1.0

TabSetは、エレメントに対する操作と、それにより状態が変化する他のエレメントとの関連付けを行うクラスです。
WebJADE ナビゲーションメニューやWebJADE タブ切り替え では、全てこのクラスを元に実装していますように、非常に広範に利用出来るクラスとなります。

基本的には、あるエレメントに対するマウスクリックやマウスポインタ移動を感知し、 それに関連付けられた対象エレメントに対し、JavaScriptでCSSのプロパティの操作を行う事が主な機能になります。 機能的には単純なものですが、CSSでは表示/非表示,位置,サイズ,色,フォント,透過(CSS2.1非標準プロパティ)など多様な設定が出来ますので、 それにより多彩なUIを実装する事が可能です。

互いに関連付けられたエレメントIDのセット指定を元に、スクリプトでDOMを操作する事でエレメント設定や機能追加を行いますので、 HTML構文中にonClickなどのJavaScriptコードを追加する事無く実装出来ます。 また、TabSet側からは利用するエレメントのIDやCSSのクラス名の指定もありませんので、 JavaScriptとHTML/CSSとの高いレベルでの分離が可能であり、 新規ページは勿論、既存のページにTabSetを追加する場合のコストも少なくなるようになっています。


これは一般的に(ブラウザでは無くコンテンツでの)タブ切替と呼ばれる効果を実現する、TabSetの基本機能です。 また特に設定していない場合には、この機能がdefaultになっています。

タブと呼ばれる目印的なエレメントをクリックする事で、表示されるコンテンツを切り替えます。 実際の動作は、このページにもあるようなごく一般的なものになりますので、ご覧頂ければお判りになると思われます。

最小限の設定では、下記のように関連付けられるエレメントIDの組み合わせを引数に指定します。

new TabSet( {'liCLdm1_1':'dvCLdm1_1', 'liCLdm1_2':'dvCLdm1_2'} );

IDの最後が通し番号で、タブと対象エレメントが同じ番号の場合には、下記のような記述も可能です。

new TabSet( ['liCLdm1_','dvCLdm1_', '1-2'] );
  • Tab1
  • Tab2

 

Target Element1
Target Element2

単純にタブ(li)に関連付けられた対象エレメント(div)のCSSのdisplayプロパティを変更するだけの処理になります。 タブや対象エレメントの内容/デザインは全てHTMLやCSSで記述されたものを使用しています。

defaultでは、同時に選択状態に出来るタブは1つだけという排他設定になっていますが、 これを複数のタブが同時に選択出来るようにします。また初期に選択されるタブを指定すると共に、 選択されたタブが他と区別しやすいように、CSSクラスを指定します。

new TabSet( ['liCLdm2_','dvCLdm2_', '1-2'],
{defTab:'liCLdm2_1', selClass:'curSel', exclusive:false} );
  • Tab1
  • Tab2

 

Target Element1
Target Element2

同時に複数のタブが選択出来る設定では、対象エレメントの表示切り替えをdisplayプロパティで行うと、 positionプロパティなどの指定が無い場合、一々表示レイアウトが変更され多少見辛くなります。 そこでdisplayでは無くvisibilityプロパティや、任意のCSSクラスを指定します。

new TabSet( ['liCLdm3_','dvCLdm3_', '1-2'],
{defTab:'liCLdm3_2', selClass:'curSel', exclusive:false, style:TabSet.Style.visible} );
  • Tab1
  • Tab2

 

Target Element1
Target Element2
new TabSet( ['liCLdm4_','dvCLdm4_', '1-2'],
{defTab:'liCLdm4_1',selClass:'curSel',exclusive:false,style:TabSet.Style.setClass('grayBack')} );
  • Tab1
  • Tab2

 

Target Element1
Target Element2

マウスポインタ移動での切り替えは、タブとして指定したエレメントの範囲にマウスポインタが入った時と、ポインタが範囲から出たタイミングで行われます。 よってクリックでの切り替えとは違い、基本的には対象エレメントを一時的に表示したい場合に使われる事が多くなります。

最初の例では、簡易的なToolTip効果として利用します。 が、実際のところ、ToolTip利用目的ならばMooToolsのPluginであるTipsの方が高機能かつ軽量なのでお勧めです。

new TabSet( ['liMVdm1_','dvMVdm1_','1-2'],
{selClass:'curSel', evType:TabSet.EvType.mouseover} );
  • Tab1
  • Tab2
Target Element1
Target Element2

タブとして設定したエレメントの範囲内にポインタが入った場合に、対象エレメントの表示切替が行われますが、 タブエレメントの範囲から外れた場合は、たとえ対象エレメントの範囲内であっても表示切替が行われます。 よって、この設定ではサブメニューの表示などには利用出来ません。

タブエレメントの範囲は、その子エレメントの範囲も含みます。 そこで、メニューとして利用したい対象エレメントを、タブエレメントの子エレメントとして記述する事で、 対象エレメント内でのマウスポインタ移動が可能になります。

new TabSet( ['liMVdm2_','dlMVdm2_', '1-2'],
{selClass:'curSel', evType:TabSet.EvType.mouseover, inject:true} );
  • Tab1
  • Tab2

HTML構文で、タブエレメント内に対象エレメントを直接記述する事でも可能ですが、 実際はサブメニュー群としてタブエレメント外に記述される事が多いと思われますので、 injectオプションを使う事で、初期化処理時に自動的に対象エレメントをタブエレメント内に挿入出来ます。

現状のTabSetの仕様では、マウスポインタの感知はタブエレメントでしか行われていない為、 タブエレメントと対象エレメントの位置が離れている場合には、これまでの設定では対象エレメントを表示し続ける事は出来ません。 そこで、マウスポインタの移動でもクリックでの切り替えと同様に、タブの選択状態を保持するように設定します。

new TabSet( ['liMVdm3_','dlMVdm3_', '1-2'],
{selClass:'curSel', evType:TabSet.EvType.mouseover, toggle:true} );
  • Tab1
  • Tab2

toggleオプションを設定した場合は、タブエレメントの範囲内の入出時に切り替わるのではなく、 範囲内に入る時にだけ切り替えが行われます。 よって表示状態を非表示にするには、もう一度タブの範囲内にポインタを移動する事になります。 (defaultでは排他設定になっているので、他のタブを表示状態にする事でも現在のタブを非表示に出来ます)

上記のようにtoggleが設定されていなければ、タブエレメントからポインタが出た場合には、対象エレメントを表示し続ける事は出来ません。 が、ポインタが範囲外に移動した時に、対象エレメントが非表示になるまでの時間は設定出来ます。

new TabSet( ['liMVdm4_','dlMVdm4_', '1-2'],
{selClass:'curSel', evType:TabSet.EvType.mouseover, inject:true, delay:{inactive:1000}} );
  • Tab1
  • Tab2

非表示になるまでの短時間の間に(タブエレメントの子エレメントである)対象エレメントまでポインタを移動出来れば、 タブエレメントと隣接していない対象エレメントも表示し続ける事が可能です。

マウスクリックとポインタ移動の両方に対応した設定です。 基本的には前記2パターンの併用ですが、利用形態としては、ポインタ移動で表示しクリックで表示状態を固定するようなイメージとなります。

new TabSet( ['liCMdm1_','dvCMdm1_','1-2'],
{selClass:'curSel', evType:TabSet.EvType.both, toggle:true} );
  • Tab1
  • Tab2

マウスポインタの移動によりタブの切り替えが行われるのはポインタ移動と同様ですが、 クリックによってタブが選択状態になった場合には、ポインタがタブの範囲から出た場合でも対象エレメントは表示されたままになります。 非表示にするには、もう一度タブエレメントをクリックするか、他のタブエレメントを選択します。

多階層メニュー横
全てマウスポインタの移動による切替です。

 

new TabSet( ['liMSdm1_','ulMSdm1_','1-4'],
{evType:TabSet.EvType.mouseover, inject:true, delay:{active:200,inactive:200}} );
new TabSet( idSet,
{evType:TabSet.EvType.mouseover, inject:true, delay:{active:150,inactive:150}} );

delay:inactiveが設定してある為、エレメントの外にポインタが出てしまった場合でも、短時間ならば復帰可能になっています。

多階層メニュー縦

mainMenu1
mainMenu2
mainMenu3
mainMenu4
new TabSet( ['dtMSdm2_','ddMSdm2_','1-4'], {exclusive:false} );
new TabSet( dm2Set, {evType:TabSet.EvType.mouseover, inject:true,delay:{active:150,inactive:150}} );
縦並びの多階層メニューです。mainMenu[1-4]は複数選択可のクリックによる切替になっています。

MooToolsのFxクラスを利用して視覚効果を付加した、TabSetの派生クラスです。

前項の多階層メニュー横のFx対応版です。

 

new TabSet.Fx( ['liFXdm1_','ulFXdm1_','1-2'],
{fx:{options:{unit:'em'}, active:{'top':1.4,'opacity':1}, inactive:{'top':0.8,'opacity':0}, trans:TabSet.Trans.both}, evType:TabSet.EvType.mouseover, inject:true, delay:{active:100,inactive:200}} );
WebJADE
Copyright © 2006-2008 distraid Inc. All rights reserved.