sikkuiです。
仕事でCSS3の効果をIEでも表現できるJavaScriptを一時期使用していましたが、不要な機能も一部あるためJavaScriptの読み込みに0.5秒ほど時間がかかってしまうことがありました。
現在進行している仕事でもCSS3の効果を使用しなければならない場所がありましたが、今までのJavaScriptを使用するとWebパフォーマンスを損なう恐れがあるので、Jqueryを使用して必要な機能のみを再現することにしました。
また外部リンクの場合、自動でアイコンを表示し、なおかつ自動で_blankを挿入するJavaScriptも必要でしたが、複数の他サイトのサンプルは簡潔ではなかったので、ついでなので作ってみました。
IE6~8,Opera,FireFox,Safari等で動きます。*Jqueryが必須です。
JavaScript
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$("a[href^=http://]").not("[href^=自サイトURLを記載]").addClass("extlink")
.click(function(){
window.open(this.href, '_blank');
return false;
});
});
</script>
CSS
.extlink {
background:url(アイコンのURL先) bottom right no-repeat;
padding:5px 0 0 20px; /*アイコンの幅数値を入れて下さい。*/
}
このブログ記事を参照しているブログ一覧: Jquery
このブログ記事に対するトラックバックURL: http://crebatec.info/mt4/mt-tb.cgi/1324
コメントする