2008年10月29日水曜日

 

【Javascript】Web制作会社が作ったJSライブラリ - MJL

MJL — MITSUE-LINKS JavaScript Library - MITSUE-LINKS
マニュアル

使ってみたよ。
用意するのは、ライブラリ本体の「mjl.jp」とライブラリを使ったスクリプトと設定を記述する「run.js」の二つ。

mjl.js
run.js

こんな感じで読み込むよ。

<script type="text/javascript" src="mjl.js"></script>
<script type="text/javascript" src="run.js"></script>

MJLに関するコードは以下の関数内に記述するよ。

/* MJL - run.js サンプル */
MJL.event.add(window, "load", function(event) {
  // MJL に関係するコードはこの中に記述

MJLが提供する機能・関数は以下の6つのみ。とてもシンプルだね。

/* MJL の機能 */
MJL.enable.rollover:        ロールオーバー
MJL.enable.flash:           Adobe Flash オブジェクトの追加機能
MJL.enable.window:          新規ウインドウ
MJL.enable.tab:             タブインターフェイス
MJL.enable.styleSwitcher:   代替スタイルスイッチ
MJL.enable.heightEqualizer: 対象要素群の高さ揃え

使いたい機能の関数にクラス名を与えて実行させるよ。

/* MJL - run.js サンプル */
MJL.event.add(window, "load", function(event) {
  // MJL に関係するコードはこの中に記述
 MJL.enable.rollover("roll");
 MJL.enable.flash("flash");
 MJL.enable.window("window");
 MJL.enable.tab("tabs");
 MJL.enable.styleSwitcher("styleSwitcher");
 MJL.enable.heightEqualizer("equalize"); }, false);

MJL.enable.rollover - img要素・input要素にロールオーバー効果

MJL.enable.rolloverにクラス名「roll」を与えると、「roll」内のimginput要素にロールオーバーが出来るよ。
ロールオーバー用の画像は「img.jpg」に対して「img_o.jpg」を一緒に作成しておいてね。

/* ロールオーバー効果 MJL.enable.rollover の run.js サンプル */
MJL.event.add(window, "load", function(event) {
 MJL.enable.rollover("roll");
 }, false);

次の様に<ul>要素にクラス名「roll」をつけると全てのimg要素・input要素がロールオーバーするんだね。
この場合、用意する画像は「image/」内に「foo.png、bar.png、baz.png」と一緒に「foo_o.png、bar_o.png、baz_o.png」だね。

/*  ロールオーバー効果 MJL.enable.rollover の html サンプル */
<ul class="roll">
 <li class="foo" ><img src="media/foo.png" alt="Foo" /></li>
 <li class="bar" ><a href="index.html"><img src="media/bar.png" alt="Bar" /></a></li>
 <li class="baz" ><input type="image" src="media/baz.png" alt="Baz" /></li>
</ul>

ロールオーバーさせたくない要素がある時は「{disable}」でクラス名を指定するんだ。
次の様にするとクラス「roll」の要素の中でクラス「foo」だけロールオーバーしないよ。

/* ロールオーバー効果 MJL.enable.rollover の run.js サンプル */
MJL.enable.rollover("roll", {disable:"foo"});

他にも使い方やオプションがあるから詳しくはマニュアルを見てね。

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google