meca.js

meca.jsについて

meca.jsとは

meca.jsはマークアップエンジニアのコーディングを補助するためのjavascriptです。画像のロールオーバーやIE6の透過png対応などを実装しており、それぞれの機能を簡単にon/offできるので、使わない機能は無効にしてたりできます。その他にも、ターゲットになる要素のセレクタを設定でたりするのである程度柔軟に対応できます。（→元エントリー）

ダウンロード

meca.js

githubにもアップしてますのでそちらからもどうぞ。

使い方

jQueryとmeca.jsを読み込みます。meca.jsの一番上の方に設定を書いてあるところがありますので、そこを自分の好きな設定に書き換えて下さい。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="meca.js"></script>

ページ毎に設定を変更する

meca.js本体の設定で無効にしておいて、特定のページで有効にするには以下のようにします。上書きする設定はmeca.jsを読み込んだ後に書きます。

[meca.js]
$.Meca.heightAlign.config.enable = false;

[html]
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="meca.js"></script>
<script type="text/javascript">
$.Meca.heightAlign.config.enable   = true;
$.Meca.heightAlign.config.selector = '#itemList li';
</script>

画像ロールオーバー

指定したセレクタのマウスオーバー時のsrc属性を、指定した接尾語を付加したもの切り替えます。

デモ

この場合デフォルトの設定ではsample_o.gifを用意します。

<img src="img/sample.gif" alt="sample" width="200" height="100" class="btn" />

設定

$.Meca.hover.config.enable

default: true
type: Boolean
detail: ロールオーバーの有効/無効を切り替えます。trueで有効、falseで無効になりまます。

$.Meca.hover.config.selector

default: .btn
type: String(CSS Selecter)
detail: ロールオーバーの対象となるセレクタを指定します。

$.Meca.hoverconfig.postfix

default: _o
type: String
detail: ロールオーバー後の画像の接尾語を指定します。

ページの一番上へ

外部リンク

指定されたセレクタにtarget="_blank"を付加します。デフォルトはa[rel~="external"]です。

デモ

external link

<a href="http://webtech-walker.com" rel="external">external link</a>

設定

$.Meca.external.config.enable

default: true
type: Boolean
detail: 外部リンク付加の有効/無効を切り替えます。trueで有効、falseで無効になりまます。

$Meca.external.config.selector

default: a[rel~="external"]
type: String(CSS Selecter)
detail: 外部リンク付加の対象となるセレクタを指定します。この設定はexternalRelがfalseのときのみ動作します。

ページの一番上へ

透過png

IE6で透過pngを使えるようにします。背景画像、img要素の両方で使えますが、背景画像のbackground-repeat、background-positionには対応していません。ただし、background-repeatにno-repeat以外だった場合、sizingMethodをscaleにするので、背景画像が伸びて表示されます。これは伸びても問題なく表示される画像の場合repeatするのと同じように表示することができます。また、img要素の場合はロールオーバーにも対応しています。

img要素を透過pngに対応させる場合は透過gifを使用するか、span要素でimg要素をラップするかのいずれかが選べます（デフォルトではspanでラップになっています）。

デモ（img要素）

<img src="img/sample.png" alt="alpha png sample" class="pngfix" />

デモ（ロールオーバー）

<img src="img/sample.png" alt="alpha png sample" class="pngfix btn" />

デモ（背景要素 no-repeatの場合）

CSSでno-repeatを指定していれば、no-repeatと同様の動作をします。ただしbackground-positionは常に「left top」になります。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="bg">
    <div class="bgpng" id="pngfix_bg_norepeat">
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
</div>

div.bg {
    background: url(sample_bg.jpg) no-repeat;
    width: 500px;
    height: 200px;
    padding: 50px;
}

div#pngfix_bg_norepeat {
    background: url(sample_bg.png) no-repeat;
    padding: 10px 40px;
    color: #FFF;
}

デモ（背景要素 no-repeatでない場合）

no-repeat以外の場合は、透過pngを指定しいる要素の幅、高さに合わせて画像の大きさが拡大/縮小します。今回サンプルに使っているような画像だと、垂直方向に拡大する分にはリピートするのと同じように表示されます。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<div class="bg">
    <div class="bgpng" id="pngfix_bg_repeat">
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
</div>

div.bg {
    background: url(sample_bg.jpg) no-repeat;
    width: 500px;
    height: 200px;
    padding: 50px;
}

div#pngfix_bg_repeat {
    background: url(sample_bg.png) repeat-y;
    padding: 10px 40px;
    color: #FFF;
    height: 180px;
}

設定

$Meca.pngfix.config.enable

default: true
type: Boolean
detail: IE6の透過png対応の有効/無効を切り替えます。trueで有効、falseで無効になりまます。

$.Meca.pngfix.config.bgpngSelector

default: .bgpng
type: String(CSS Selecter)
detail: 背景画像に透過pngを使用するセレクタを指定します。

$.Meca.pngfix.config.imgpngSelector

default: .pngfix
type: String(CSS Selecter)
detail: img要素に透過pngを使用するセレクタを指定します。

$.Meca.pngfix.config.imgpngHoverSelector

default: .pngfix.btn
type: String(CSS Selecter)
detail: img要素に透過pngかつ、ロールオーバーするセレクタを指定します。

$.Meca.pngfix.config.postfix

default: _o
type: String
detail: pngfixのロールオーバー後の画像の接尾語を指定します。

$.Meca.pngfix.config.blankGif

default: false
type: false or image path
detail: 透過pngの上にかぶせるための透過gifのパスを指定します。falseが指定されていた場合は、透過gifは使用せずにspan要素でimg要素をラップします。

$.Meca.pngfix.config.imgpngBlankGif

default: $.Meca.pngfix.config.wrapSpanClass
type: imgpngWrapSpan
detail: 透過gifを使わない設定のときにimg要素をラップするspanに付加するclass名を指定します。

ページの一番上へ

要素の高さ揃え

指定したセレクタの要素の高さを一番高いものに揃えます。対象の親セレクタと子セレクタをそれぞれ指定します。デフォルトのセレクタは親セレクタが「.heightAlign」で子セレクタが「> *」です。この指定ではheightAlignクラスが指定されている要素の直接の子要素の高さを揃えるという動作をします。

デモ

だみーだみーだみーだみー
だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー
だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー
だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー
だみーだみーだみーだみーだみーだみーだみーだみーだみーだみー
だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー
だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー
だみー

ダミーダミー
ダミーダミーダミーダミーダミーダミー

<ul class="heightAlign" id="heightAlignRed">
    <li>だみーだみーだみーだみー</li>
    <li>だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー</li>
    <li>だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー</li>
    <li>だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー</li>
    <li>だみーだみーだみーだみーだみーだみーだみーだみーだみーだみー</li>
    <li>だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー</li>
    <li>だみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみーだみー</li>
    <li>だみー</li>
</ul>

<ul class="heightAlign" id="heightAlignBlue">
    <li>ダミーダミー</li>
    <li>ダミーダミーダミーダミーダミーダミー</li>
<ul>

ul.heightAlign li {
    padding: 0;
    margin: 5px;
    width: 200px;
    float: left;
}

ul#heightAlignRed li {
    border: 1px solid #C00;
}

ul#heightAlignBlue li {
    border: 1px solid #00C;
}

設定

$.Meca.heightAlign.config.enable

default: true
type: Boolean
detail: 高さ揃えの有効/無効を切り替えます。trueで有効、falseで無効になりまます。

$Meca.heightAlign.config.selectorParent

default: .heightAlign
type: String(CSS Selecter)
detail: 高さ揃えの対象となるセレクタの親要素を指定します。

$.Meca.heightAlign.config.selectorChild

default: > *
type: String(CSS Selecter)
detail: 高さ揃えの対象となるセレクタの子要素を指定します。

ページの一番上へ

position:fixed

IE6のposition:fixedを実現する。position:fixedが指定されている要素を自動的にIE6にも対応させます。特に設定等は指定する必要はありません。topとleftのみ対応でrightとbottom対応はtodoです。

デモ

デモページ

設定

$.Meca.positionFixed.config.enable

default: true
type: Boolean
detail: position:fixedの有効/無効を切り替えます。trueで有効、falseで無効になりまます。

ページの一番上へ