jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。
このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますｗｗｗ
以下デモはＩＥ以外だと何も表示されません。
View Demo »
jQuery ver 1.2.6以上用プラグインです
jQuery.browserのサポートの関係で1.3以上が必要でした。
Usage
ヘッダに以下ソースを書く。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jAnalogIE.plugin.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("body").jAnalogIE();
});
//]]>
</script>
上記記述でbody直下にdiv要素を挿入します。
Options
Element.jAnalogIE({options});
Elementは$(“body”)みたいな書き方で、挿入先の要素を指定する。
- site:
クリックした時ジャンプさせるサイトを指定する。デフォルトは”STOP”
“STOP”→stop IE6 campain
“END”→end 6
“FF”→Firefox ダウンロード
“http://example.com”→URL挿入 - title:
アンカーのタイトル。デフォルトはnull - text:
アイコンの中身。デフォルトはテキストで”アナログ”
html形式も有効なので画像も使えます - message:
マウスオーバー時に入れ替えるメッセージ。デフォルトは”今すぐバージョンアップ！”
これもタグが有効です。 - top:
画面上端からの位置。数値で記述する事。デフォルトは20 - right:
画面右端からの位置。数値で記述する事。デフォルトは20 - delay:
fadeIn()のduration。数値が少ないほど早くなります。単位はmsでデフォルトは300
“jAnalogIE” をダウンロード
WTN-jAnalogIE.zip – 1912 回のダウンロード – 21.98 KB補足
アナログアイコンのhtml構造は次の通り。（デフォルト）
<div id="analog"><a href="http://www.stopie6.org/" target="_blank" title="stop IE6 campain">アナログ</a></div>
上記要素を指定した要素の直下に挿入します。
その時、syle属性でposition・top・rightプロパティを直接要素に指定します。
スクロールイベントが発生した際にstyle属性を変更するため、
filterなどのプロパティが反映されなくなることがあります。
75行目付近の以下ソースがそのCSS指定部分です。
icon.css({"top":size,"right":options.right + "px"});
スクロールで消えてしまうCSSは上記部分を変更してください。
当然ながら、javascriptオフでは動作しませんｗ