jQueryシリーズ続きます
Allabout >> プログラミング >> JavaScript
jQueryのセレクタ 基本フィルタ1
今回は、jQueryのセレクタで基本フィルタの1回目です。「最初の要素」「奇数要素」「○番目の要素」など手軽な検索が可能になります。
Light Boxはいろいろなライブラリ版がありますが、どれもブラウザ画面より大きい画像はリサイズしてくれず、はみ出してしまうということなので、先月jQuery Lightboxを修正してみました。
ArmadilloBrain&Co.さんのギャラリー用に提供していて、そこでダウンロードもでき、ライセンスはオリジナル通りGNU AGPL で使えます。
デモページ
http://hwg.web6.jp/armadillobrain/special/jquery_lightbox_ab/demo.html
#オリジナルより動きが良いような気がするのは＜親バカです。
#ところで、jQuery 版は最新版がIE6で動かなくなってしまってますね、、、。
YUIもjQueryもお気に入りのライブラリなんですが、YUIのブログでaddClass的な処理のチュートリアルがあって、「ああ、最近はこうだよね」と、思いつつも、ふと、試しにjQueryに書き換えてみたら、やっぱりjQueryの楽チンさが際立ちました。
ちなみにこのjQueryコードで書き換えるのに要した時間は30秒です(^^;。CSSやHTMLはまったく同じでコード部分だけが違います。＜むしろ、ブログに書くのに時間がかかりますf^^;;
Introduction to Unobtrusive JavaScript, DOM Scripting, and the Yahoo! User Interface (YUI) Library
http://2tbsp.com/node/91
Unobtrusive Rollovers Using YUI
http://yuiblog.com/blog/2008/04/28/unobtrusive-rollovers-using-yui/
このYUIサンプル
http://jsgt.org/lib/jquery/test/yui-rollover.html
YUIソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with YUI Goodness</title>
<link rel="stylesheet"
href="yui-rollover_files/yui-rollover.css"
type="text/css" media="screen">
<script type="text/javascript"
src="yui-rollover_files/yahoo-dom-event.js"></script>
<script type="text/javascript">
// Create a menu object, put everything we need into it
var menu = {
// Initialize the menu rollover
init : function() {
// Get the btn elements
btns = YAHOO.util.Dom.getElementsByClassName('btn', 'div', 'menu');
// Assign event listeners to the btns
for (var i=0; i<btns.length; i++) {
YAHOO.util.Event.addListener(btns[i], 'mouseover', menu.roll, i);
YAHOO.util.Event.addListener(btns[i], 'mouseout', menu.roll);
}
},
// First, turn 'em all off, then turn one on
roll : function(e, i) {
YAHOO.util.Dom.removeClass(btns, 'btn-over');
YAHOO.util.Dom.addClass(btns[i], 'btn-over');
}
};
// Initialize the menu
YAHOO.util.Event.on(window, 'load', menu.init);
</script></head><body>
<div id="menu">
<div class="btn">
<a href="#">Link 1</a>
<p>Description for link 1</p>
</div>
<div class="btn">
<a href="#">Link 2</a>
<p>Description for link 2</p>
</div>
<div class="btn">
<a href="#">Link 3</a>
<p>Description for link 3</p>
</div>
</div>
</body>
</html>
試しに作ったjQueryサンプル
http://jsgt.org/lib/jquery/test/yui-rollover.html
jQueryソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with jQuery</title>
<link rel="stylesheet"
href="jquery-rollover_files/jquery-rollover.css"
type="text/css" media="screen">
<script type="text/javascript"
src="jquery-rollover_files/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
btns = $('.btn');
btns.hover(
function(){ $(this).addClass('btn-over')},
function(){ $(this).removeClass('btn-over')}
)
})
</script></head><body>
<div id="menu">
<div class="btn">
<a href="#">Link 1</a>
<p>Description for link 1</p>
</div>
<div class="btn">
<a href="#">Link 2</a>
<p>Description for link 2</p>
</div>
<div class="btn">
<a href="#">Link 3</a>
<p>Description for link 3</p>
</div>
</div>
</body>
</html>
もちろん、こんなhoverはCSSでやれば良い(笑)と思うんですけれど、addClass/removeClassという考え方は、いろんな場面でスマートに使える良い手法で、このサンプルはその基本手法がわかりやすくて良いかなと。
たとえば、ドラッグ中のフラグや、アニメーション中のフラグをclass名に追記したり削除しながらコントロールするという使い方は、実際にjQuery UIなどでもよく使われていますが、構造が把握しやすく便利です。
jQueryシリーズ続きます
Allabout >> プログラミング >> JavaScript
jQueryのセレクタ 基本
今回から、jQueryのAPI自体の使い方についても目配りしていきます。今回はまず、jQueryセレクタの基本的なものから順番に試してみます。
document.bodyなブラウザ画面の内寸を取ろうと思って、jquery.dimensions.jsのinnerWidth()やHeight()でOKだろうと思っていたら、IEとFirefoxの動作が異なっていました。。。がっかり。
$(document.body).innerWidth()と$(document.body).innerHeight()を取ったのですが、ざっくりみたところ、Firefoxは表示されている領域、IEはスクロールしないと見えないページ全体を測っているようです。
しょうがなく、なんとなく修正してみたのでメモ。もう少しましな方法がありそうですけれど、とりあえず。WinのIE6,Opera9,Safari3.1,firefox2.0で、今のところ、なんとなくうまくいっているようにはみえる気がしますf^^;。＜ほんとか？
if(document.documentElement){
var bWidth=document.documentElement.clientWidth;
var bHeight=document.documentElement.clientHeight;
} else {
var bWidth = Math.min(
screen.avaiWidth ,
$(document.body).innerWidth()
);
var bHeight = Math.min(
screen.availHeight ,
$(document.body).innerHeight()
);
}
jQueryシリーズ続きます
Allabout >> プログラミング >> JavaScript
今回は、メニューを飾るjQuery プラグインLavaLampを紹介します。カーソルの移動に合わせてアニメーションエフェクトが動きます。
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
