Web制作の現場で使えるjQuery　UIデザイン入門 ― 第21回

jQueryで自作するフローティングウィンドウ (2/2)

IE6での不具合を解消する

　サンプル01のフローティングウィンドウは、Internet Explorer 6（IE6）で開くと、ドラッグ操作時にハンドラー部分のテキストやWebページの一部が選択状態になってしまう場合があります。この問題は、IE6のテキスト選択機能がドラッグ処理に関係なく動作してしまうのが原因で、ドラッグ操作時だけIE6の選択機能を一時的にオフにすることで解決できます。

　IE6の選択機能は、mousedownイベントとmouseupイベントに以下の記述を追加するとオフにできます。

▼サンプル02（スクリプト部分）

$("#floatWindow dl dt").mousedown(function(e){
    $("body").bind('selectstart', function(){
        return false;
    })
}).mouseup(function(){
    $("body").unbind('selectstart');
})

「selectstart」は選択開始時の処理を設定できるIE独自のイベントで、selectstartに対して「return false」を設定するとIE6の選択機能を一時的にオフにできます。ドラッグが終わった時点でselectstartをunbind()に設定すれば、選択機能を元のようにオンに戻せます。

　また、今回のサンプルでは、ページ上に浮いている感じを出すために透過PNGを利用していますが、透過PNGに対応していないIE6では適切に表示されません。IE6で透過PNGを表示するには、backgroundプロパティではなくAlphaImageLoaderを使います(関連記事)。以下のCSSでは、スターハックを利用して、IE6の場合のみAlphaImageLoaderで背景を表示するように設定しています。なお、AlphaImageLoaderを設定した要素の子要素にはposition:relativeを指定しないと、mousedownイベントやmouseupイベントが動作しなくなるため、*(ユニバーサルセレクター)を利用してすべての要素にposition:relativeを設定しています。

▼サンプル02（CSS部分）

* html #floatWindow dl{
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/floatWindow.png',sizingMethod='scale');
}
* html #floatWindow dl *{
    position:relative;
}

【実務でハマる落とし穴】

透過PNGのフェードイン／アウトが黒くなる

　サンプル01／02のように透過PNGを含む要素をIE（6～8）でフェードイン／フェードアウトすると、一瞬、透過部分が黒で塗りつぶされて表示されることがあります。

サンプル01の表示、非表示をfadeInやfadeOutに変更した場合、透過部分が黒くなってしまう

　この現象はjQueryのfadeIn()／fadeOut()とIEとの相性で起こってしまう問題です。どうしても透過PNGを使いたい場合は、IEのみアニメーションを切ってしまう方法もあります。次のようにif文で処理を分岐させれば、IEの場合はshow()／hide()で、それ以外のブラウザーの場合はfadeIn()／fadeOut()で表示／非表示を切り替えられます。

if($.browser.msie){
    $("#floatWindow").show();
}else{
    $("#floatWindow").fadeIn("fast");
}

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。