JQUERY 1.7 RELEASED

ここを読めば分かると思うけど、一応メモ。

1.bind(), delegate(), live()に代わるon(), off()というものになる。

.on(events [, selector] [, data] , fn);
.off(events [, selector] , fn);

より、直感的になるんだろうと思う。Ginpenさんの記事にあったので、リンク。

2.jQuery.support.fixedPositionを追加

これも便利機能のひとつ。CSSのposition: fixed;を使えるか使えないかの判定ができる。
※検出方法がいろいろとあるらしいけど、こうやってライブラリに入っていると有り難い。

3.Callbackオブジェクトの追加

複数のコールバックを細かく管理できるオブジェクトのようだ。

JQuery 公式ドキュメント「Callbacks Object」
あんまり参考にならない。

Takazudo hamalogさんの
「jQuery1.7で追加された$.Callbacks」

 関連した記事

• JQuery1.6リリース
• JQuery1.4リリース！！だって
• コミュニティサイト「すきなばしょ」プレリリース
• [メモ]JQuery1.4の新機能のまとめその２
• safariでHTML上に画像サイズを取得する際の注意点

お仕事用サイト「Branberyheag!!.jp」を公開。

最初は、自分のポートフォリオサイトを作るつもりなかったのですが、段々、システムが出来上がってくると、いい感じの完成度になってしまって、これを単純に公開するのも勿体ないなと思って、自分用のサイトにしてみた。

技術的な話をするとWordPressでできていて、カテゴリー、ページ、記事というようなシンプルな構成でできあがっている。ただ、ページ遷移は、なくてJQueryのload()を使って、HTMLを呼び出している。戻る、進むボタンを有効にするため、ハッシュタグをURLに組み込んで、あとはプラグインでの処理を行っている。

あとは、スライドショーは、Arrayに画像のパス、サイズをつっこんで、ページおくりしたときに呼び出している。DOMを操作して、消えたり出したりするよりは、処理が速いような気がする。

これを作ったときにいろいろとTipsが溜まったので、ネタを公開していきたい。

これ、フェーズ１なんで、もう少し手直しと機能を追加する予定。

以前やった、クライアント案件で、この技術を使えばもっといいものができたとこれを作りながら思った。いつか修正したいけどね。関連した記事

• コミュニティサイト「すきなばしょ」プレリリース
• 「instagram Wall」を作った
• jQuery.Deferredってなんとなく便利のような気がする
• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった
• JQueryプラグイン「skroll.js」

何が一番魅力的かというとやっぱり読み込みのファイルがひとつでよいということだと思う。試しに今つくっているポートフォリオに実装してみたら、あっさり組み込むことができた。これは、いい。しかも、iOSも対応なので、このプラグインひとつでスクロールは良いということになるね。これをまともに作ったら相当時間がかかる。自分も前に作ったけど大体失敗というか不完全燃焼にに終わっている。

ちなみにライセンスはMITライセンスになっています。

作り込みというかディテールまでしっかりと組まれているので、とても完成度が高い。

デモページはこちら

OS X Lionぽいスクロールバーを実装できてiOSにも対応した Skroll.js関連した記事

• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった
• コミュニティサイト「すきなばしょ」プレリリース
• お仕事用サイト「Branberyheag!!.jp」をローンチしました〜
• [メモ]JQuery1.4の新機能のまとめその２
• jQueryでロールオーバー

大きく変わった点は、以下のとおり。

• チェックボックスのtrue/falseでチェックの操作が、attr()からprop()に分離。
• JQuryのパフォーマンスの向上。（バージョンアップするたびにあがっていて、すごい）

大きいところでは、こんな感じかなと思う。

あと、

• attr(),val()の拡張
• JQurey.map()が配列以外にも使える
• アニメーションの完全同期

他にもいろいろとバージョンアップしているぽいけど、インパクトの大きいものは、少ないかも。

JQuery Blog

http://blog.jquery.com/2011/05/03/jquery-16-released/

GinPen.com
http://ginpen.com/2011/05/04/jquery1-6/

Shinya Blog
http://shinya-blog.blogspot.com/2011/05/jquery16-attrprop.html

 関連した記事

• JQuery1.4リリース！！だって
• JQuery1.7リリース
• jQueryでロールオーバー
• コミュニティサイト「すきなばしょ」プレリリース
• Plupload、いいかも。

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;

$('.blocks').each(function() {

$el = $(this);
topPostion = $el.position().top;

if (currentRowStart != topPostion) {

// we just came to a new row.  Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}

// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);

} else {

// another div on the current row.  Add it to the list and check if it's taller
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

}

// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}

});

$(window).resize(function() {
equalizeThoseMoFos();
}

リサイズイベントに組み込めば、良いみたい。

出典元
http://css-tricks.com/equal-height-blocks-in-rows/関連した記事

• safariでHTML上に画像サイズを取得する際の注意点
• jQueryでロールオーバー
• jQueryで要素の見つける方法
• お仕事用サイト「Branberyheag!!.jp」をローンチしました〜
• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった

さてさて、どうしたのかな。。。

原因として考えられるのは、JQueryは、headerCleanというプラグインを使っているんだけど、それのJQuery(つまりライブラリ)がうまく読み込まれてないいないのかもしれない。調べてみようかな。関連した記事

• [メモ]JQuery1.4の新機能のまとめその２
• コミュニティサイト「すきなばしょ」プレリリース
• お仕事用サイト「Branberyheag!!.jp」をローンチしました〜
• JQueryプラグイン「skroll.js」
• safariでHTML上に画像サイズを取得する際の注意点

<pre>jQuery(document).ready(function($) {
	var postfix = '_on';<!--more-->
	$('#gNavi a img').not('[src*="'+ postfix +'."]').each(function() {
		var img = $(this);
		var src = img.attr('src');
		var src_on = src.substr(0, src.lastIndexOf('.'))
		           + postfix
		           + src.substring(src.lastIndexOf('.'));
		$('<img>').attr('src', src_on);
		img.hover(
			function() {
				img.attr('src', src_on);
			},
			function() {
				img.attr('src', src);
			}
		);
	});
});

たったこれだけのソースでロールオーバーが再現できるなら良いかなと思った。何気に便利だと思う。最大のポイントは、img要素にclassタグで指定しなくてもいいということ。これなら、余計なclassをつけなくてもいい。

んで、この作者さんは、プラグインも作っているようなので、こちらもリンク。

• input 要素にも使えるjQueryのロールオーバープラグイン
• jQueryだけで画像のロールオーバーを実装する方法

関連した記事

• ゲーム用JQuery「GameQuery」
• IE6でpngを対応させる（ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader）
• JQueryプラグイン「skroll.js」
• JQuery1.6リリース
• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった

要素が存在しない場合は
 jQuery("#id").size() == 0

 要素が存在する場合は
 jQuery("#id").size() > 0

関連した記事

• jQueryでロールオーバー
• safariでHTML上に画像サイズを取得する際の注意点
• シンプルな要素の高さを揃えるJavascript Tips
• Webサイト・WebシステムをIPhone専用UIを実現する「JQTouch」
• ゲーム用JQuery「GameQuery」

gameQueryを使ったオンラインゲームが出てきそうだ。昔、AJAXを使ったオンラインゲームがあったのを思い出した。いろんなゲームジャンルが作れそう。

ストリートファイター系ゲームまで！ゲーム用jQueryプラグイン「gameQuery」CommentsAdd Star
http://www.moongift.jp/2010/03/gamequery/関連した記事

• jQueryでロールオーバー
• JQueryプラグイン「skroll.js」
• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった
• Webサイト・WebシステムをIPhone専用UIを実現する「JQTouch」
• jQueryで要素の見つける方法

そんなときに「Plupload」は、いいかもしれない。
複数ファイルアップロードの他にドラッグアンドドロップなどの気の利いた機能があるようだ。
これだったら、ユーザに負担をかけずに気軽にアップロードできるかもしれない。

Plupload

関連した記事

• WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった
• JQuery1.7リリース
• Webサイト・WebシステムをIPhone専用UIを実現する「JQTouch」
• JQuery1.6リリース
• コミュニティサイト「すきなばしょ」プレリリース