豪華なエフェクトでソートや絞り込みを行うjQueryプラグイン「Isotope」

Isotopeは非常に美しいエフェクトで要素の絞り込みや並び替えを行えるjQueryプラグイン。プラグイン本体の読み込みとCSSに次の記述を追加しておきます。

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

次のように指定すると子要素の高さが揃えられ準備が完了です。

$('#unitItem').isotope({
	layoutMode : 'fitRows'
})

次のようなメソッドを実行するとfilterで要素を絞り込みアニメーションして表示されるようになります。

$('#unitItem').isotope({ filter: ".hoge" });

ハッシュチェンジイベントに対応する「jQuery hashchange event」

URLのハッシュチェンジ時にイベントを実行する実行するハッシュチェンジイベントがBen Alman » jQuery hashchange eventで公開されています。

$(window).hashchange(function() {
   hoge(location.hash.replace('#', ''));
});
$(window).hashchange(); 

などとするとハッシュが変更された際にhoge()が実行されます。どういういいことがあるかというと通常イベントとして捉えることができないhistory.back()でハッシュが変わった際もイベントを捉えることができます。知っているとちょっと便利。

IEでXMLをjQueryオブジェクトに変換する方法

$(xmlデータ)といった感じでXMLデータを$メソッドに通したらjQueryオブジェクトに変換してくれると思ったらIEだけ変換してくれませんでした！

色々試したら次のように ActiveXObjectクラスを利用するとIEではjQueryオブジェクトに変換できます。

var parseXML = function(str){
	if(!$.support.htmlSerialize){
		var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async="false";
		xmlDoc.loadXML(str); 
		return $(xmlDoc);
	}else{
		return $(str);
	}
}

jQueryのbrowserメソッドをiPhoneやAndroidでも利用

jQueryのbrowserメソッドをiPhoneやAndroidでも利用する方法

var ua = navigator.userAgent.toLowerCase();
$.browser.android = /android/.test(ua);
$.browser.iphone = /iphone/.test(ua);

こんな感じで$.browserに新しいプロパティを追加してあげればOK


デバイスごとにも定義可能です。xperia(無印)だと次のような感じ。

$.browser.xperia = /so\-01b/.test(ua);

AndroidはバージョンアップするとUAが変わることもあるので、変わりにくそうな所で判定するのがよいかと。

jQuery.cssHooksによるCSSプロパティの拡張

jquery cssプロパティ拡張を読んでてすごいなと思い試してみたところうまく動かない。jQuery1.4.4ではcurCSSを拡張してもちゃんとうごかないっぽい。変わりにソースコードを眺めているとcssHooksというプロパティがあってこれでいけるっぽい。

(function ($) {
	jQuery.cssHooks.hoge = {
		get: function( elem, computed ) {
			return jQuery(elem).css("backgroundColor");
		},
		set: function( elem, value ) {
			jQuery(elem).css("backgroundColor",value);
		}
	}
})(jQuery);
$(function(){
	var hoge = $("body");
	hoge.css("hoge","red")
	alert(hoge.css("hoge"));
});

便利になってる！もうちょっと調べたら萌え萌えCSSに行き着いた。

jQuery.extendとjQuery.fn.extendによるオブジェクトの拡張

jQuery.extendではjQueryオブジェクトそのものを拡張することができる。

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

などとすると

console.log($.min(10,5));//5
console.log($.max(10,5));//10

などのメソッドが利用できるようになる。

一方jQuery.fn.extendではjQueryオブジェクトのプロトタイプを拡張できる。簡単に言うとメソッドチェーンが利用可能になるわけだ、

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

ブックマークレットでjQueryを利用

いろいろと試したけど次のような感じにするとブックマークレットでjQueryを利用可能

javascript:(function(){
  if(typeof jQuery=='undefined'){
    var d=document,s=d.createElement('script');
    s.type='text/javascript';
    s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
    d.getElementsByTagName('body')[0].appendChild(s);
    function c(){
      setTimeout(function(){
        if(typeof jQuery=='undefined'){
          c()
        }else{
          bookmarklet()
        }
      },500)
    }
    c()
  }else{
    bookmarklet()
  }
  function bookmarklet(){
    /*ここに処理を記述*/
    jQuery('a').css('color','red');
  }
})()

圧縮しても結構な文字数になるのね・・・

jQueryのカスタムイベント 1

jQueryのカスタムイベント。独自の名前をbindしておきtriggerで実行できる。

$("p").bind("myCustomEvent", function(e, myName){
  $(this).text(myName + ", hi there!");
  $("span").stop().css("opacity", 1)
           .text("myName = " + myName)
           .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  $("p").trigger("myCustomEvent", [ "John" ]);
});

使いどころがよくわからんけど。（関数とほぼおなじ？）

jQueryのテストフレームワーク「QUnit」

jQueryのテストフレームワーク「QUnit」を使ってみました。

QUnitプロジェクト
QUnit　ソースコード

まずはgithubよりソースコードをダウンロードします。

ダウンロードしたファイルで利用するのは「qunit.js」と「qunit.css」。
次のようにダウンロードせずに直接githubから参照することも出来る。

<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>

QUnitでは次のようにテストを行います。

test("a basic test example" , function(){
  ok(true , "this test is fine");
  var value = "hello";
  equals(value , "helo", "We expect value to be hello");
  same(value , "helo", "We expect value to be hello");
});

testメソッドの第１引数にテスト名、第２引数にテストケースを含めた関数を定義します。

テストの出力用に次のようなHTMLを追加しておきます。

<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>

テスト時は次の３つのアサーションが利用できます。

ok(true , "this test is fine");

okメソッドでは第１引数がtrueの場合にテストが通りfalseの場合テストに通りません。第２引数にメッセージが定義できます。

equals(value , "helo", "We expect value to be hello");

equalsメソッドでは第１引数と第２引数が等しい場合にテストに通ります。第２引数にメッセージが定義できます。

same(value , "helo", "We expect value to be hello");

sameメソッドはequalsメソッドより厳格には第１引数と第２引数が等しいかチェックします。(値だけではなく型まで同じかどうか確認)

アサーション以外にも次のようなメソッドでテストが制御できます。

expect( 数値) : 

expectはtestメソッド中で実行されているアサーションの数が指定できます。第２引数にメッセージが定義できません。

module("Module");

moduleメソッドでは続くテストの名前を付けることが出来ます。setupとteardownの関数をリセットしてくれる効果もあります

module("Module B",{
	setup:function(){
		hoge1=100
	},
	teardown:function(){
		hoge1=0
	}
});

setupとteardownの関数は次のように定義できます。(teardownが良くわかってない)

次のサイトが非常に詳しく解説されていてわかりやすかったです。

[JavaScript][jQuery][QUnit]QUnitの基本的な使い方

$.supportのサポート状態を確認するスクリプト

$.supportの対応状況を確認するスクリプトを作成しました。

$(function(){
	var supports = ["boxModel","cssFloat","hrefNormalized","htmlSerialize","leadingWhitespace","noCloneEvent","opacity","scriptEval","style","tbody","checkOn","checkClone","deleteExpando"];
	var table =$("<table></table>");
	$.each(supports,function(){
		$(table).append("<tr><td>"+this+"</td><td>"+$.support[this]+"</td></tr>");
	})
	$("body").html(table)
})

このスクリプトを確認したいブラウザで実行してください

jQueryでイベントのbind時にデータを付加

知らなかったけどjQueryでbindする際に第２引数にデータを付加ことが出来る

$("#hoge").bind("click","aa",function(e){
	console.log(e.data)//aa
})

jQueryのNamespaced Events

jQueryではNamespaced Eventsが定義されています。

$('.class').bind('click.namespace', function(){}); 
$('.class').trigger('click.namespace');
$('.class').unbind('click.namespace');

イベントをbindする際にclick.namespaceのようにイベントに名前をつけます。

namespaceはtriggerとunbindで利用でき、特定のイベントの実行や特定のイベントの削除が可能になります。

jQueryでセレクタを自作する

jQueryでは次のようにセレクタを自作する

jQuery.extend(jQuery.expr[":"], {
	over100pixels: function(a) {
		return $(a).height() > 100;
	}
});

このようにすると高さが100px異常の要素のみを絞り込むセレクタを自作することが出来ます。

$('.box:over100pixels').click(function() {
	alert('The element you clicked is over 100 pixels high');
});

jQuery1.4で強化されたDOM操作系関数

jQuery1.4でDOM操作系関数に対して関数が設定できるようになりました。

$('#foo').append(function() {
    return $(this).hasClass('hoge') ? 'hoge' : 'fuga';
});

以下のメソッドで利用できます。
attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), .toggleClass()

$('a').html(function(i,html){
  return html.replace(/&/gi,'<span class="amp">&');
});

関数内では第一引数としてインデックス番号、第２引数として現在の値を引き渡すことができます。

jQuery1.4で強化されたCSS()

jQuery1.4ではCSSのプロパティに関数を設定できるようになった。

$('div').css("width",function(index, value){
	return parseFloat(value)*2;
})

こうすることで現在の倍のサイズのwidthが設定できる。

$('div').css("width",function(index, value){
	if(index==0)return parseFloat(value)*2;
})

このようにすると一番最初のdiv要素のサイズだけ変更できる。

$('div').css("width",function(index, value){
	if($('div').size()==index+1)return parseFloat(value)*2;
})

このようにすると一番最後のdiv要素のサイズだけ変更できる。

関数を設定できることにより複雑な条件指定や、他の処理を組み込むことが可能になった。

オブジェクトでCSSを指定する際にも同様の指定が可能です。

$('div').css({
	width: function(index, value) {
		return parseFloat(value) * 1.2;
	}, 
	height: function(index, value) {
		return parseFloat(value) * 1.2;
	}
});

jQuery1.4のanimate()

jQuery1.4でanimate関数が大幅に強化された

$('#animate').animate({
	width: 500,
	height:500
},500,'swing');

基本はこのようにanimate(プロパティ[,スピード][,イージング][,コールバック関数])のように設定する。

$('#animate').animate({
	width: '-=10',
	height:'+=100'
}, 500,'swing');

CSSプロパティ値は上のように書くと徐々に増やすや減らすなんかが可能になる。(jQuery1.3からあるんですね)

$('#animate').animate({
	width: '-=10',
	height:'toggle'
}, 500,'swing');

heightプロパティに「toggle」を設定することで要素がある場合はheightを0にし消し、要素がない場合はheightを戻して表示するなんかできる。(これもjQuery1.3からあるんですね)

$('#animate').animate({
	width: ['toggle', 'swing'],
	height: ['toggle', 'linear']
}, 500,'swing');

1.4からは各アニメーションに対してイージングを指定できるようになった。

$('#animate').animate({
	width: 'toggle',
	height: 'toggle'
}, {
	duration: 1000, 
	specialEasing: {
		width: 'linear',
		height: 'swing'
	}, 
	complete: function() {
		$(this).after('Animation complete.');
	}
});

さらにduration（速度）specialEasing（イージング）complete(コースバック関数)をまとめてオブジェクトで指定できるようになった。

jQueryのbind()で複数イベントの指定

jQuery1.4からbind()で複数イベントの設定が可能になりました。

$('#bind').bind({
    click: function() {
        // click event
    },
    mouseover: function() {
        // mouseover event
    },
    mouseout: function() {
        // mouseout event
    }
});

ちょっとだけオブジェクティブなプログラムを書けるようになったかな

jQueryでclickイベントに引数を渡す

クロージャーの箇所で気づいたんだけどclickイベントに引数を渡す場合は次のように書けばよい

$("#btn2").click(function(e){
		return function() {
			console.log(e.value)// Proxy
		}
	}({
		value:"Proxy"
	})
); 

clickイベントの第一引数はfunctionなのでreturn functionを行うと引数が渡せる。

jQueryでクロージャー

クロージャーネタ　jQueyrバージョン

このままだとやはり4を返す。

$(function(){
	var i=0;
	$("li").each(function(){
		i++;
		$(this).click(function(){
			console.log(i)
		})
	})
})

このように関数をすぐに返すことで0,1,2,3のようにクリックした要素の番号を返す。

$(function(){
	var i=0;
	$("li").each(function(){
		i++;
		$(this).click(function(n){
			return function() {
				console.log(n)
			};
		}(i))
	})
})

オブジェクトの有無を判定する$.isEmptyObject()、$.isPlainObject()

jQuery1.4では新たに空のオブジェクトか判定するメソッド$.isEmptyObject()とオブジェクトかどうかを判定するメソッド$.isPlainObject()が追加されています。

$.isEmptyObject({});          //=> true
$.isEmptyObject([]);          //=> true
$.isEmptyObject('');          //=> true
$.isEmptyObject(0);           //=> true
$.isEmptyObject(null);        //=> true
$.isEmptyObject(undefined);   //=> true
$.isEmptyObject('foo');       //=> false
$.isEmptyObject({foo:'bar'}); //=> false
$.isEmptyObject(new Object);  //=> true
 
$.isPlainObject({});          //=> true
$.isPlainObject([]);          //=> false
$.isPlainObject('');          //=> false
$.isPlainObject(0);           //=> false
$.isPlainObject(null);        //=> false
$.isPlainObject(undefined);   //=> false
$.isPlainObject('foo');       //=> false
$.isPlainObject({foo:'bar'}); //=> true
$.isPlainObject(new Object);  //=> true