colorboxでgetJSONを表示する
ページ内にダイアログを開く時によく使っていたjQueryのThickBoxが、
「もうメンテナンスしてないから他のを使ってね」
と宣言されていました。ちょっとさびしいですね。そしてありがとう。
http://jquery.com/demo/thickbox/
上記ページの紹介の中から「colorbox」を使います。
http://colorpowered.com/colorbox/
使い方は、ThickBoxより簡単でオプション豊富でデザインが選べて綺麗。
で、私の場合はたいてい特殊な用途に向かってしまうサガがまた出まして、
他ドメインのHTMLを参照して表示したい。
jQueryではクロスドメインに対してgetJSONでJSONデータとして持ってこれます。
$.getJSON(url+"&callback=?", function(data){
...
}
とするとサーバー側のPHPでは、$_GET['callback']で「jsonp0123456..」とかのコールバック関数名が得られます。
１．データをjson_encodeする
２．（）で囲む
３．前にコールバック名をつける
例：
jsonp0123456([{key1:value1},{key2:value2}])
とかの形で出力してあげます。header関数でmimeタイプも付けてあげましょう。
受けて側ですが、結論からいうと、colorboxの改造が必要です。
optionで、
{
html: function(){
$.getJSON(...);
}
}
とできればよかったんですが、なぜかリクエストが失敗します。
jquery.colorbox.jsの638行目あたりのelse前に、
} else if (settings.json) {
$.getJSON(href+"&callback=?", function(data){
resize(data.html);
});
} else {
と条件を追加します。使うコードはオプションで、
$(セレクタ).colorbox({json:true});
とします。