JS
2013.05.21
最近はIE6、7に対応させることが減ってきました。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
IE8以上を基準に制作し、IE6、7では「できるだけ」再現するといった
対応をすることも多いです。
そういうとき、ie9.jsを良く使っています。
このJSがどういうものかというと、
旧IEでは本来使えない
・position:fixed;
・max-width
などを再現し、IE9の挙動に近づけるというものです。
旧IE対応が前提の案件はもちろん、
手間をかけるほどではないけど、少しでも再現率を・・という場合にも
すぐに実装できて便利です。
■使い方
<head></head>内に以下を読み込むだけ。
----------------------------
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
----------------------------
ie9.jsについてはこちらを参考にさせていただきました。
■ie9.jsを使うと出来ること、出来なくなること。 ::: Toro_Unit
http://www.torounit.com/blog/2011/06/07/793/
上で書いたものの他にできるようになることや、
注意点など書かれています。
2013.01.08
製作用メモ。
jQuery/JavaScriptを高速化するための記述方法がまとめられています。
こういう、普段なかなか身に着けられない知識はとてもありがたい。
jQuery/JavaScriptの高速化テクニックまとめ
http://matome.naver.jp/odai/2134058372410380801
実践できていたのは1つ目と5つ目くらいでした。。
jQuery/JavaScriptを高速化するための記述方法がまとめられています。
こういう、普段なかなか身に着けられない知識はとてもありがたい。
jQuery/JavaScriptの高速化テクニックまとめ
http://matome.naver.jp/odai/2134058372410380801
実践できていたのは1つ目と5つ目くらいでした。。
2012.09.12
jQueryのget関数を使ってPHPをリクエストし、
結果を戻り値として受け取る・・だけだったのですが、
勘違いをしていてひどく苦戦したのでメモします。
JS側は
$.get("test.php", function(data){
alert(data);
});
というように、
PHPを実行してその結果を受けて
コールバック関数で表示させるというものです。
で、肝心のPHP側ですが、
処理の結果を return で返そうとしていて・・
（そもそも関数内じゃないので return は無意味ですね）
戻り値は XMLHttpRequestオブジェクトなので、
単純に print で出力してあげれば受け取ることができました。
結果を戻り値として受け取る・・だけだったのですが、
勘違いをしていてひどく苦戦したのでメモします。
JS側は
$.get("test.php", function(data){
alert(data);
});
というように、
PHPを実行してその結果を受けて
コールバック関数で表示させるというものです。
で、肝心のPHP側ですが、
処理の結果を return で返そうとしていて・・
（そもそも関数内じゃないので return は無意味ですね）
戻り値は XMLHttpRequestオブジェクトなので、
単純に print で出力してあげれば受け取ることができました。
2012.08.15
PCサイトの階層に「sp」などのスマホサイト用階層を作り、
その中にPCサイトと同じ構造でスマホサイトが作られているときに、
スマホサイトからPCサイトへのURLを自動取得するJSです。
ようするに「PC版を見る」ボタン用のURLを自動で入れるJSです。
タイトルも説明も長いですが、
ソース自体はURLから /sp/ を外すだけの簡単なものです。
2012.9.24 修正
ソースが大雑把過ぎたので追記しました（水色箇所）。
■JS
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn_pc").click(function(){
var s = location.pathname.split("/sp/");
location.href = s[0] + '/' + s[1];
});
});
</script>
■HTML
<a href="javascript:void(0);" id="btn_pc">PC版を見る</a>
サンプル
ダウンロード
赤文字が階層名ですので、任意のフォルダ名に変更してください。
.clickの部分にjQueryを使っていますので、
jQuery使わない方は書き換えてみてください。
その中にPCサイトと同じ構造でスマホサイトが作られているときに、
スマホサイトからPCサイトへのURLを自動取得するJSです。
ようするに「PC版を見る」ボタン用のURLを自動で入れるJSです。
タイトルも説明も長いですが、
ソース自体はURLから /sp/ を外すだけの簡単なものです。
2012.9.24 修正
ソースが大雑把過ぎたので追記しました（水色箇所）。
■JS
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn_pc").click(function(){
var s = location.pathname.split("/sp/");
location.href = s[0] + '/' + s[1];
});
});
</script>
■HTML
<a href="javascript:void(0);" id="btn_pc">PC版を見る</a>
サンプル
ダウンロード
赤文字が階層名ですので、任意のフォルダ名に変更してください。
.clickの部分にjQueryを使っていますので、
jQuery使わない方は書き換えてみてください。
2012.07.11
※14/10/8 追記
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。
ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。
よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。
ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
});
上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
'scrolling' : 'no',
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
$('#fancybox-overlay').height($(document).height());
});
}
});
これで高さが自動調整されます。
google chromeだとローカルでは動きません。
※12/7/11 追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。
不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。
また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。
ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・
時間があるときにいじってみたいです。
この記事で紹介している方法ですが、別ドメインのページを表示させようとすると
正しく動作しませんでした。
JavaScript自体が別ドメインのページ操作に対応しておらず、
高さが取得できないようです。
ただ、「JS クロスドメイン 高さ取得」等で検索すると多数ヒットしますので、
それらを上手く組み込めれば実装できるかもしれません。
よくお世話になっているFancybox。
画像と違い、type:iframeでHTMLを表示させるときはフレームサイズの自動調整ができません。
ただし表示完了時に関数を呼び出せるので、
それを利用してフレームサイズを変更する方法が紹介されていました。
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
});
上記のようにしてHTMLを表示させると思いますが、
それに下記の赤字部分を追加します。
$("#sample").fancybox({
'width' : 500,
'type' : 'iframe',
'scrolling' : 'no',
'onComplete' : function() {
$('#fancybox-frame').load(function() {
$('#fancybox-content').height($(this).contents().find('body').height());
$('#fancybox-overlay').height($(document).height());
});
}
});
これで高さが自動調整されます。
google chromeだとローカルでは動きません。
※12/7/11 追記
読み込み元のページよりもフレームのほうが長くなってしまう場合、
暗転部分が途中で切れてしまうので記述を追加しました。
これで問題ないはず・・です。
不要なスクロールバーが出てしまう場合は'scrolling' : 'no'も加えてください。
また、処理が実行されるのはページが表示された後なので、
高さを調整する前のデフォルト値として'height'を入れておいてもいいかもしれません。
ちなみに幅も変えられないものか探してみましたが、
それは見つけることができませんでした・・
時間があるときにいじってみたいです。
2012.03.28
すべての画像が読み込まれた後にスクリプトを実行する場合は
前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、
指定した画像が読み込まれたときに実行する場合や、
後から画像を読み込む場合には不十分です。
画像ありのRSSを読み込もうと思い、
--------------------------------------------------------------------
$("#rssList img").load(function(){
// 処理
});
--------------------------------------------------------------------
と書いたのですがブラウザによっては上手くいかず。。
↓こちらのサイトでぴったりのことが記事にされていましたので
参考にさせていただきました。
jqueryで画像のロード完了後に実行 - downstairs lab
http://www.stairsdesign.jp/blog/2011/07/jquery.html
■方法
imagesLoadedというプラグインを使用します。
https://gist.github.com/268257
こちらのサイトからJSファイルをダウンロードして<head>内で読み込み、
--------------------------------------------------------------------
<script type="text/javascript" src="js/imagesLoaded.js"></script>
--------------------------------------------------------------------
loadをimagesLoadedに書き換えれば完了です。
※2013/10/2 $(function(){}); を追加しました。
--------------------------------------------------------------------
$(function(){
$("#rssList img").imagesLoaded(function(){
// 処理
});
});
--------------------------------------------------------------------
前回のJS：ロード完了時に実行でほぼ足りてしまうのですが、
指定した画像が読み込まれたときに実行する場合や、
後から画像を読み込む場合には不十分です。
画像ありのRSSを読み込もうと思い、
--------------------------------------------------------------------
$("#rssList img").load(function(){
// 処理
});
--------------------------------------------------------------------
と書いたのですがブラウザによっては上手くいかず。。
↓こちらのサイトでぴったりのことが記事にされていましたので
参考にさせていただきました。
jqueryで画像のロード完了後に実行 - downstairs lab
http://www.stairsdesign.jp/blog/2011/07/jquery.html
■方法
imagesLoadedというプラグインを使用します。
https://gist.github.com/268257
こちらのサイトからJSファイルをダウンロードして<head>内で読み込み、
--------------------------------------------------------------------
<script type="text/javascript" src="js/imagesLoaded.js"></script>
--------------------------------------------------------------------
loadをimagesLoadedに書き換えれば完了です。
※2013/10/2 $(function(){}); を追加しました。
--------------------------------------------------------------------
$(function(){
$("#rssList img").imagesLoaded(function(){
// 処理
});
});
--------------------------------------------------------------------
2012.03.21
JSの実行タイミングとして「ページの読み込みが完了したとき」がありますが、
いまだに忘れて調べなおしてしまうのでメモです。
■HTMLコードを読み込み終わった時点で実行
要jQuery。タイミング的によく使います。
-------------------------------------------------
$(function(){
// 処理
});
または
$(document).ready(function(){
// 処理
});
-------------------------------------------------
■すべて読み込んだ後に実行
画像などもすべて読み込んだ後に実行。
-------------------------------------------------
window.onload=function(){
// 処理
}
-------------------------------------------------
・jQueryを使う場合
-------------------------------------------------
$(window).load(function () {
// 処理
});
または
jQuery.event.add(window, "load", function(){ /* 処理 */ });
-------------------------------------------------
・HTMLに書く場合
HTMLのbodyタグに書くことでも同じ処理ができます。
-------------------------------------------------
<body onload="処理">
-------------------------------------------------
いまだに忘れて調べなおしてしまうのでメモです。
■HTMLコードを読み込み終わった時点で実行
要jQuery。タイミング的によく使います。
-------------------------------------------------
$(function(){
// 処理
});
または
$(document).ready(function(){
// 処理
});
-------------------------------------------------
■すべて読み込んだ後に実行
画像などもすべて読み込んだ後に実行。
-------------------------------------------------
window.onload=function(){
// 処理
}
-------------------------------------------------
・jQueryを使う場合
-------------------------------------------------
$(window).load(function () {
// 処理
});
または
jQuery.event.add(window, "load", function(){ /* 処理 */ });
-------------------------------------------------
・HTMLに書く場合
HTMLのbodyタグに書くことでも同じ処理ができます。
-------------------------------------------------
<body onload="処理">
-------------------------------------------------
2012.03.07
googleアナリティクスは解析用のコードをページに埋め込む形式のため、
外部サイトへのリンクについては計測することができません。
その場合、解析タグを設置するのと合わせて、
<a>タグにonclickで次のようなコードを仕込むことで
クリックを計測することができるようになります。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackPageview', '仮想URL']);">
---------------------------------------------------------------------------------------
-- 2013/7/16 追記 --
上記の他に、下記のような記述の仕方もありました。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackEvent', '仮想URL']);">
---------------------------------------------------------------------------------------
_trackPageview と _trackEvent の違いになります。
_trackPageview は仮想ページビューを使う方法で、サイト全体のページビューも増えます。
_trackEvent はイベントトラッキングを使うので他の計測結果には影響しません。
基本的には外部サイトヘのリンクに設置するものですので、_trackEvent のほうが良さそうです。
逆にPDFなどへのリンクに仕込む場合は _trackPageview が良さそうですね。
-- 追記ここまで --
外部サイトへのリンクと書きましたが、
解析コードを仕込めない画像やPDFへのリンクも計測できるため
使いどころはいろいろとありそうです。
ちなみに、解析コードのバージョンによって記述が違うようで、
上記の記述が使えるのは↓のような非同期型の場合になります。
---------------------------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
---------------------------------------------------------------------------------------
外部サイトへのリンクについては計測することができません。
その場合、解析タグを設置するのと合わせて、
<a>タグにonclickで次のようなコードを仕込むことで
クリックを計測することができるようになります。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackPageview', '仮想URL']);">
---------------------------------------------------------------------------------------
-- 2013/7/16 追記 --
上記の他に、下記のような記述の仕方もありました。
---------------------------------------------------------------------------------------
<a href="xxx.html" onclick="javascript:_gaq.push(['_trackEvent', '仮想URL']);">
---------------------------------------------------------------------------------------
_trackPageview と _trackEvent の違いになります。
_trackPageview は仮想ページビューを使う方法で、サイト全体のページビューも増えます。
_trackEvent はイベントトラッキングを使うので他の計測結果には影響しません。
基本的には外部サイトヘのリンクに設置するものですので、_trackEvent のほうが良さそうです。
逆にPDFなどへのリンクに仕込む場合は _trackPageview が良さそうですね。
-- 追記ここまで --
外部サイトへのリンクと書きましたが、
解析コードを仕込めない画像やPDFへのリンクも計測できるため
使いどころはいろいろとありそうです。
ちなみに、解析コードのバージョンによって記述が違うようで、
上記の記述が使えるのは↓のような非同期型の場合になります。
---------------------------------------------------------------------------------------
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
---------------------------------------------------------------------------------------
2012.02.29
リンクURLにパラメータを付け、
リンク先のページで処理させるというのをやったのでメモです。
■index.html
---------------------------------------------------------------------------------------
<a href="page.html?sample1=yes&sample2=100">リンクです</a>
---------------------------------------------------------------------------------------
上記のようなリンクを設置。
URLの後に"?"でパラメータを繋ぎます。
複数ある場合はさらに"&"で繋ぎます。
■page.html
---------------------------------------------------------------------------------------
<script type="text/javascript">
var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
for(i=0;urlSearch[i];i++) {
var kv = urlSearch[i].split('=');
urlPrm[kv[0]]=kv[1];
}
alert(urlPrm.sample1);
alert(urlPrm.sample2);
</script>
---------------------------------------------------------------------------------------
飛び先のページに書くJSは上記のようになります。
最後のアラートで表示される文字はそれぞれ"yes","100"となります。
リンク先のページで処理させるというのをやったのでメモです。
■index.html
---------------------------------------------------------------------------------------
<a href="page.html?sample1=yes&sample2=100">リンクです</a>
---------------------------------------------------------------------------------------
上記のようなリンクを設置。
URLの後に"?"でパラメータを繋ぎます。
複数ある場合はさらに"&"で繋ぎます。
■page.html
---------------------------------------------------------------------------------------
<script type="text/javascript">
var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
for(i=0;urlSearch[i];i++) {
var kv = urlSearch[i].split('=');
urlPrm[kv[0]]=kv[1];
}
alert(urlPrm.sample1);
alert(urlPrm.sample2);
</script>
---------------------------------------------------------------------------------------
飛び先のページに書くJSは上記のようになります。
最後のアラートで表示される文字はそれぞれ"yes","100"となります。
2011.11.09
最近使うことが多いJSです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
2011.10.05
LightBox風に画像やswf、webページなどのコンテンツを表示できる
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。
(2016.7.19) 訳せてないものは原文入れました。
以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。
(2016.7.19) 訳せてないものは原文入れました。
以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。
| オプション | デフォルト値 | 説明 |
| 'padding' | 10 | 枠の幅 |
| 'margin' | 20 | 枠の外側の余白。 表示するコンテンツがウインドウより大きい場合、この幅を確保して縮小されます。 |
| 'opacity' | false | When true, transparency of content is changed for elastic transitions |
| 'modal' | false | true にすると、'overlayShow'→ true、'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton'→ talse になります |
| 'cyclic' | false | ギャラリーの一番端でNext/Backボタンを押した時にループするか |
| 'scrolling' | 'auto' | スクロールバーの有無（auto／yes／no） |
| 'width' | 560 | コンテンツの幅（iframe、swf時） |
| 'height' | 340 | コンテンツの高さ（iframe、swf時） |
| 'autoScale' | true | ビューポートに収まるようにスケーリングするか。 'true'の場合、表示するコンテンツがウインドウより大きいと自動的に縮小します。（画像だと無効？） |
| 'autoDimensions' | true | For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results |
| 'centerOnScroll' | false | コンテンツを常に中央に表示するか |
| 'ajax' | { } | Ajaxオプション |
| 'swf' | {wmode: 'transparent'} | SWFオブジェクトのparams設定 |
| 'hideOnOverlayClick' | true | オーバーレイ部分をクリックした時にfancyboxを閉じるか |
| 'hideOnContentClick' | false | コンテンツをクリックした時にfancyboxを閉じるか |
| 'overlayShow' | true | オーバーレイの有無 |
| 'overlayOpacity' | 0.3 | オーバーレイの不透明度 |
| 'overlayColor' | '#666' | オーバーレイの色 |
| 'titleShow' | true | タイトルの表示/非表示 |
| 'titleFormat' | null | Callback to customize title area. You can set any html - custom image counter or even custom navigation |
| 'titlePosition' | 'outside' | タイトルの位置（outside／inside／over） |
| 'transitionIn' 'transitionOut' |
'fade' | 開閉時の動き（fade／elastic／none） |
| 'speedIn' 'speedOut' |
300 | 開閉時のスピード |
| 'changeSpeed' | 300 | ギャラリーでコンテンツを切り替えた時のサイズ変更スピード |
| 'changeFade' | 'fast' | ギャラリーでコンテンツを切り替えた時のフェードスピード |
| 'easingIn' 'easingOut' |
'swing' | アニメーションに使用するイージング |
| 'showCloseButton' | true | クローズボタンの有無 |
| 'showNavArrows' | true | ギャラリーでNext/Backボタンを表示するか |
| 'enableEscapeButton' | true | Escボタンを押した時にfancyboxを閉じるか |
| 'onStart' | null | Will be called right before attempting to load the content |
| 'onCancel' | null | Will be called after loading is canceled |
| 'onComplete' | null | Will be called once the content is displayed |
| 'onCleanup' | null | Will be called just before closing |
| 'onClosed' | null | Will be called once FancyBox is closed |
| Advancedオプション | 説明 |
| 'type' | コンテンツタイプ。'image' 'ajax' 'iframe' 'swf' 'inline' が設定できます。 |
| 'href' | コンテンツのURL。HTMLのhref=""で設定したものよりも優先されます。 |
| 'title' | コンテンツのタイトル。HTMLのtitle=""で設定したものよりも優先されます。 |
| 'content' | コンテンツの内容。任意のHTMLデータを入れることができます。 |
| 'orig' | Sets object whos position and dimensions will be used by 'elastic' transition |
| 'index' | Custom start index of manually created gallery (since 1.3.1) |
2011.03.23
もうそろそろIE6対策の記事を書くことが減ってほしいものですが、
やはりまだ対応しなければならないのが現状です。
IE6で透過PNGを使う際のJSですが、
今まで使っていたものが諸事情により使えなかったため
別のJSを探していたところ、
各種JSをとてもわかりやすくまとめてくださっているサイトがありました。
ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
オススメされている DD_belatedPNG.js 以外にも、
各JSの特徴や注意点などがまとめられていて参考になります。
とりあえずメモでした。
やはりまだ対応しなければならないのが現状です。
IE6で透過PNGを使う際のJSですが、
今まで使っていたものが諸事情により使えなかったため
別のJSを探していたところ、
各種JSをとてもわかりやすくまとめてくださっているサイトがありました。
ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
オススメされている DD_belatedPNG.js 以外にも、
各JSの特徴や注意点などがまとめられていて参考になります。
とりあえずメモでした。
