jQueryの利用頻度が上がってきたので、このブログで使っているJavascriptライブラリを、prototype.js + script.aculo.us から jQuery に変更してみた。ブログで利用している機能は、こんなもの。それぞれを、jQuery で置き換えてみる。
- 新着記事を、記事の個別ページに表示する
- 写真をスライドショー表示する、Lightboxエフェクト
- マウスオーバーしたエリアをハイライト表示
新着記事を、記事の個別ページに表示する
これは、jQueryのプラグインを、Movable Typeのテンプレートで作成することで実現。
jQuery のプラグインを作成する : ブログの新着記事を表示
prototype.js での実現方法はこちら。
写真をモーダルエフェクトで、スライドショー表示する
これはprototype.js用の、Lightbox.jsを使っていた。これと、全く同じ動きをしてくれるjQuery のプラグインがありました。
利用方法は簡単。ライブラリをサーバーにアップして、<head>内で読み込む。そして、lightbox 表示するHTMLオブジェクト（<img>タグを囲んでいる<a>タグ）を、jQueryセレクタで選択する。 $('a[@rel*=lightbox]').lightBox(); と記述すると、prototype.js 用のlightbox.js で指定する方法と同じになるので、今までのブログ記事を修正しなくても、そのままjQueryプラグインでスライドショー表示できます。これは便利。
<script src="./jquery-latest.js" type="text/javascript"></script>
<script src="./plugins/lightbox/js/jquery.lightbox-0.3.1.js" type="text/javascript" ></script>
<link href="./plugins/lightbox/css/jquery.lightbox-0.3.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
<!--
$(document).ready(function(){
// Select all links that contains lightbox in the attribute rel
$('a[@rel*=lightbox]').lightBox();
});
-->
</script>
prototype.js はこちらで。
写真をスライドショーするjavascriptライブラリは、本当に沢山ありますねえ。
ハイライト・エフェクト表示
マウス・オーバーすると、背景色をモワーとハイライト表示する。jQuery には、Color Animation というプラグインがあります。
Color Animations 1.0 | jQuery Plugins
<div class="fade">というHTML要素にハイライト・エフェクトを追加するには、以下のように記述します。animate()の中は、backgroundColor は変化させるCSS要素、#888888 などで色を指定、最後の300はアニメーションを実行する速度。
このエリアに、マウス・オーバーすると
ハイライト・エフェクトが表示されます。
<script src="./jquery-latest.js" type="text/javascript"></script>
<script src="./plugins/jquery.color.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("div.fade").hover(
function() { $(this).animate({ backgroundColor: "#888888" },300 );},
function() { $(this).animate({ backgroundColor: "#ffffff" },300 );}
);
});
-->
</script>
script.aculo.us版はこちら。
ひとまずは、こんなところで、prototype.jsからjQueryへの移行終了！
ブックマーク & はてなスター
コメント