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/
上で書いたものの他にできるようになることや、
注意点など書かれています。
IE6 , js
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つ目くらいでした。。
jQuery , JS
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 で出力してあげれば受け取ることができました。
jQuery , JS , PHP
2012.08.29
コーディングをする際にできるちょっとした工夫をメモ。
■マウスオーバー
画像をふわっとオーバーします。
jQueryで簡単実装！フェードエフェクト付き画像ロールオーバー
サンプル
■マウスオーバー
背景色をふわっとオーバーします。
[jQuery] メニューの背景色をロールオーバーでふわっと変える
サンプル
■画像の表示
ふわっと表示させられます。
画像に遅延表示っぽいエフェクトを与えるだけのm5LazyDisplay
サンプル
■マウスオーバー
画像をふわっとオーバーします。
jQueryで簡単実装！フェードエフェクト付き画像ロールオーバー
サンプル
■マウスオーバー
背景色をふわっとオーバーします。
[jQuery] メニューの背景色をロールオーバーでふわっと変える
サンプル
■画像の表示
ふわっと表示させられます。
画像に遅延表示っぽいエフェクトを与えるだけのm5LazyDisplay
サンプル
jQuery , マウスオーバー
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使わない方は書き換えてみてください。
JS , スマホ
