2012.01.25
変数名を動的に指定できる、
Flashでは配列アクセス演算子と呼ばれるものがあるのですが、
JSでこれにあたるものはどれだろう？と思い
探してみるもなかなか見つかりません。
最終的に、eval() を使うことで似たようなことができたので
忘れないようにメモしておこうと思います。
eval() は中の式を評価するので、
例えば名前が連番になるような変数を作るなら
for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}
上記のように書くことで
「sample_1」～「sample_5」の変数を作成することができます。
Flashでは配列アクセス演算子と呼ばれるものがあるのですが、
JSでこれにあたるものはどれだろう？と思い
探してみるもなかなか見つかりません。
最終的に、eval() を使うことで似たようなことができたので
忘れないようにメモしておこうと思います。
eval() は中の式を評価するので、
例えば名前が連番になるような変数を作るなら
for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}
上記のように書くことで
「sample_1」～「sample_5」の変数を作成することができます。
2011.12.13
Lightboxを使用する際、
aタグのtitleの中に入れた文言を
改行したいようなシチュエーションがあると思います。
そういった場合はどうすればいいかですが、
<a href="sample_big.gif" title="いちぎょうめ<br />にぎょうめ"><img src="sample.gif" alt="sample" /></a>
これで何とかなってしまいます。
ですが、titleの中にHTMLタグを書きたくないと考える方も多いはず、
その場合は、HTMLソースに多少変更を加え、
jquery.lightbox-0.5.jsのほうを弄れば解決できます。
LightBoxのtitleコメント内で改行の続きを読む
2011.11.16
リンクをクリックしてページ移動をする際、
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
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.19
ボックス内の要素を縦中央に揃えたい、ということは良くあると思いますが、
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）
そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。
tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた
こちらのJSですが、
・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素
という条件で要素を縦中央に揃えることができるようです。
使用方法も詳しく説明されています。
組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。
--------------------------------------------------------------------------------------------
<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>
--------------------------------------------------------------------------------------------
3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は
--------------------------------------------------------------------------------------------
$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定
--------------------------------------------------------------------------------------------
という感じで追加すればOKです。
枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）
そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。
tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた
こちらのJSですが、
・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素
という条件で要素を縦中央に揃えることができるようです。
使用方法も詳しく説明されています。
組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。
--------------------------------------------------------------------------------------------
<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>
--------------------------------------------------------------------------------------------
3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は
--------------------------------------------------------------------------------------------
$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定
--------------------------------------------------------------------------------------------
という感じで追加すればOKです。
枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。
