読者です 読者をやめる 読者になる 読者になる

pngfix & rollover library sisso.jsを作成しました。

通販で自転車のスポーク買いました。agoです。

社内から「yuga.jsみたいに呼べば使えて、環境に依存しないpngfixとrolloverライブラリがほしい」とリクエストを受けたので作成してみました。

使い方はファイルをダウンロードし、以下のようにマークアップすれば完了です。

<img src="opacity.png" class="btn" />
<!-- mouseover時にopacity_o.pngを表示 -->

<div class="bgpng" style="background-image:url(opacity.png); width:200px; height:200px"></div>
<!-- 背景のpngfix(img,input[type="button"]は自動的にpngfixする) -->

<div class="bgpng btn" style="background-image:url(opacity.png); width:200px; height:200px"></div>
<!-- 背景のpngfix+mouseover時にopacity_o.pngを表示 -->

<a href="/" class="external">target="_blank"</a>
<!-- linkへtarget="_blank"を設定する -->

<p class="wordBreak" style="width: 50px;border: 1px solid #000;">aaa<em>bbb<span>ccc</span>ddd</em>eee</p>
<!-- 強制改行 -->

また、以下の形式で設定を変更することができます。

読み込み時に指定
<script type="text/javascript"http://svn.coderepos.org/share/lang/javascript/sisso/sisso.js#setting1=value1&setting2=value2"></script>

読み込み時前に指定
<script type="text/javascript">
    if (!Sisso) var Sisso = {};
    Sisso.setting1 = 'value1';
    Sisso.setting2 = 'value2';
</script>
<script type="text/javascript"http://svn.coderepos.org/share/lang/javascript/sisso/sisso.js"></script>

同時に指定に指定した場合、読み込み時前に指定したものが優先されます。
(この場合、setting1=value1、setting2=value2となります)
<script type="text/javascript">
    window.Sisso.setting1 = 'value1';
    window.Sisso.setting2 = 'value2';
</script>
<script type="text/javascript"http://svn.coderepos.org/share/lang/javascript/sisso/sisso.js#setting1=value3&setting2=value4"></script>

指定できる値は以下の通りです。
blankUrl
    1x1の透過gif URL
    初期値
    http://tech.kayac.com/data/iepngfix-library-sisso-js/blank.gif
overClass
    rollover対象のクラス
    初期値
    btn
externalClass
    外部windowで開くリンクの対象クラス
    初期値
    external
wordBreakClass
    wordBreak対象のクラス
    初期値
    wordBreak
pngFixSelector
    pngFix対象selector(IE6が認識できるもののみ)
    初期値
    img, input, .bgpng
pngFixVersion
    pngFixを行うIEのバージョン(IE7もリンクがクリックできなくなる問題があるのでpngFixを行うことを推奨)
    初期値
    6,7
noRoll
    自動的にrolloverを行わない場合true
    初期値
    false
noPngFix
    自動的にpngFixを行わない場合true
    初期値
    false
noExternal
    自動的にexternalを行わない場合true
    初期値
    false
noBreakAll
    自動的にwordBreakを行わない場合true
    初期値
    false
noGMap2Error
    google maps apiと同時に読み込んだ場合、エラーを出さない場合true
    (仕様上google maps apiと同時に読み込むと非常に重くなるので、この値をtrueにする場合pngFixSelectorでgoogle maps領域を除外することを推奨)
    初期値
    false
制限事項

bgpngの指定に関しては以下のような制限があります。

  1. background-repeat
    • どの値を指定しても「no-repeat」と同じ表示になります。
  2. background-position
    • どの値を指定しても「top left」と同じ表示になります。

また、以下のような機能も備えています。

1 jQuery連携

先にjQueryが読み込まれている場合、mouseover、mouseoutのイベント設定をjQuery経由で行います。

(読み込まれていない場合、内部のfunctionを使用します)

これにより、外部からrolloverをとめたい場合でも、jQuery経由でunbind行うことが可能です。

また、イベントのネームスペースに「Sisso」を設定しているため、$(‘.btn’).unbind(‘.Sisso’);ですべてのイベントを停止することが可能です。

2 pngfixにbehaviorを使用

JSでpngfixする場合、window.loadでは($(function () {})でも)一瞬灰色の不透明色が見えてしまっていました。

この点に関しては.htcを使用すれば回避できるのですが、.htcはJSと別に記述する必要がありJS単体では動作しなくなります。

(ただ、このsisso.jsも空白のgifが必要なため、JS単体で動作しているわけではないですが。。。)

これに関して、sisso.jsでは動的にstyle tagを生成しhead内に追加することで、.htcを使用せずに同じ動作を実装しています。

また、behaviorを使用することにより動的に追加された要素に対しても自動的にpngfixがかかるため、JSから追加するたびに何らかのコードを呼ぶ必要がありません。

(その代わり、elem.srcからファイル名を取得することができないため、Sisso.store(elem)を使用する必要があります)

3 速度

要素を抽出する際、可能であればgetElementsByClassName、querySelectorAll、evaluateを使用するため、最新のブラウザでは高速に動作します。

4 mixiアプリ対応

opensocialのキャッシュ形式にも対応しているため、mixiアプリ、gooホームガジェット内でも使用することが可能です。

Plugin自体はMIT、GPLのDual license、公開場所はCodeReposを使用させていただいているので、興味のある方はご自由に組み込み、修正を行ってください。

例によって以下のリンクからお試しいただくことが可能です。

sisso.jsを試す

ちなみに、ライブラリの機能が質素なのであって、Web制作が質素になるという意味ではないのでご注意ください。

カヤックでは古いブラウザ向けのBKに詳しい方や、新しいブラウザ向けの機能に詳しい技術者を募集しています!

関連記事

jQuery.opensocial_simple Pluginを作成しました。

jQueryを使うときに気をつけるべき8のポイント

jQuery.ime_external Pluginを作成しました。

jQuery.autouploader Pluginを作成しました。

jQuery.brbr Pluginを作成しました。

jQuery.dataの使い方

jQueryのイベントネームスペース

以下のライブラリを参考にさせていただきました。

IEPNGFIX

(pngfixのかなりの部分を参考にさせていただきました)

jQuery

($.data、domManipの機能を一部取り入れています)

yuga.js

(名前とコンセプトを参考にさせていただきました)

(2008/½ 社内から「まともに動かない」と指摘されて直しました。また、onPropertyChangeを使用するように実装を変更しました)

(2008/2/5 link external、wordBreakを実装しました)

(2008/2/19 制限事項を追記しました)

(2009/5/1 設定方法を追記しました)

(2009/5/7 設定方法のエラーを修正しました)

(2010/3/10 IE6で背景hoverが実行されない問題を修正しました。この問題は社外の方からのご指摘で発見いたしました。ありがとうございます)