Ajaxを調べてて、なんじゃそりゃって思ったのでメモとして書いておきます。
JavascriptでAの要素の中にBがあるとして、この場合Aは親要素、Bは子要素という立ち位置になります。
ソースでいうとこんな感じ。
<div>
<div></div>
</div>
この場合、親の要素にも子の要素にもonclickなどのイベントハンドラが設定されてると、子供をクリックしたときに親のイベントハンドラまで実行されてしまう、ということ。
これはCSSのposition:relativeなどで親と子が見た目的に重ならないようにしても同じです。
この現象をバブリングと言います。泡が下から上へプクプク上がっていくことからそう呼ばれてるそうです。
これを避けるにはeventオブジェクトのstopPropagation();を使います。まぁ今回はバブリングってなーに?ということのメモなので、そのあとのことはまた今度。
jqueryを使っている場合はこちらのサイトにいろいろ書いてあります。jQuery日本語リファレンス
恋に焦がれて眠れないジョナサンは、どうか安らかに眠れるように女神さまに祈りました。
すると女神はこう言いました。
「そなたにオライリーのサイ本を与えよう。DOMの章にいくまでには安らかな眠りにつけるだろう。」
なんかjQueryを使いたくなったので、jQueryでランダムに表示される画像ギャラリー、の ようなもの を作ってみました。
ローディングのグルグル回る画像を使ってみたかったので、なんか始めて使ってうれしいです。
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
HTMLはこんな感じです。jQueryと今回作成したスクリプトを外部から読み込んでいます。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>
<body>
<p id="button">CLICK</p>
<div>
<p id="gallery"><img src="img/default.gif" /></p>
</div>
</body>
</html>
次に今回作成したloading.jsのスクリプトです。
//画像の数
imgLength = 3;
//画像の拡張子
imgExtension = ".jpg";
//画像の保存ディレクトリ
imgDirectory = "img/";
//最初に表示する画像
randomInt = 1;
$(function(){
$("#button").click(function() {
$("#gallery").children("img").attr("src",function(){ return "img/loading.gif" })
var waitng = setTimeout(loadImg, 1000);
})
function loadImg(){
$("#gallery").children("img").css("opacity","0").attr("src",function(){ return imgDirectory + randomInt + imgExtension })
.animate({'opacity':'1'}, 600);
if(randomInt < imgLength){
randomInt = parseInt(randomInt) + 1;
}
else{
randomInt = 1;
}
}
});
今回はグルグル回るローディン画像を表示したかったので、var waitng = setTimeout(loadImg, 1000);を追加して意図的に1秒間アニメーションを見せていますが、本番環境ではこちらをloadImg();に変えてください。
ちなみにグルグルローディングのアニメーションGIFはこちらから頂きました。Chimply generates your images
かなりいいグルグルがありますね!ページの下部では選んだ画像の速度や大きさなどをカスタマイズできます。
グルグルって見て魔方陣グルグルと勘違いしそうになった人は、お友達になれそうな気がします。
さてさて、今回のスクリプトとはまったく関係ない話なのですが、私はJavaScript(Ajax)とPHPを使って、あるサービスを開発したいと考えています。
しかしそれを開発するためのJavascriptの技術と私の今のJavascriptのレベルが凄まじく離れており、今すぐに手をつけることはできません。
まずは基本をちゃんと抑え、それから一つずつステップアップしたいと思います。そのためには簡単なものから少しずつ作っていこう、と。
そんなわけで今回はjqueryなどを使わず、画像をランダムで切り返るスクリプトを作ってみました。なんだか初めて自分でJavascriptを書いた気がします。
やはりプログラムのレベルを上げるには、プログラミングすることですね。
まずはHTMLです
<head>
<script src="js/random.js" type="text/javascript"></script>
</head>
<body>
<p><img src="" name="myImg"></p>
</body>
これだけ。
次に外部ファイルで読み込んだJavascriptです。
function randomImg(){
//画像の数
imgLength = 6;
//画像の拡張子
imgExtension = ".png";
//画像の保存ディレクトリ
imgDirectory = "img/";
randomInt = Math.random() * imgLength;
randomInt = Math.ceil(randomInt);
imgDirectory + randomInt + imgExtension;
test = document.myImg.src;
document.myImg.src = imgDirectory + randomInt + imgExtension;
}
window.onload = randomImg;
これで、imgフォルダに1.png、2.pngといった画像を保存してください。
画像の数、拡張子、保存ディレクトリはスクリプトの「//」の注釈部分で変更できます。
完成のサンプルはこちらです。
また、完成サンプルをダウンロードするにはこちらです
どうもサイ本の難解さにハマってしまい、実際に手を動かさずに時間だけが過ぎてしまった感があるので、これからはちゃんとたくさん作って、たまにドキュメントを見直してみようと思います。
前回の記事で紹介した選択した項目をアニメーション等で目立たせるフォームに、エラーチェックを追加したものを紹介します。
こちらがエラーチェックの機能を追加したフォームです。
PHPでこういったエラーを吐き出すのはCMSや動画投稿サイトを作ったときからやっていたのですが、やはりフォームなどでは項目に何かを書いた時点でエラーチェックをして表示してくれる方が、一度送信してから一括でエラーが表示されるよりもずっと使いやすいですね!
今回作ったもののエラーチェックは、上から「英語以外が入力されていたらエラー」、「メールアドレスっぽくなかったらエラー」、「URLっぽくなかったらエラー」、「何も入力されていなかったらエラー」です。ガーっと作ったのであんまり厳重ではありません。
今回のスクリプトをZipファイルでダウンロードするにはこちらからどうぞ。
自由に使用、改修して頂いて結構ですので、ご自由にお使いください。
選択した要素を目立たせることで、ユーザーが今どの項目を入力しているかを直感的に把握させることができるフォームです。
jQueryを使用しています。
タイプは3つあり、
選択した項目のラベルをアニメーションするタイプ、
選択した項目のラベルのフォントカラーをフェードで変えるタイプ、
選択した項目input要素の横幅をアニメーションで変えるタイプがあります。
上の3つをまとめてZipファイルでダウンロードするにはこちらからどうぞ。
自由に使用、改修して頂いて結構ですので、ご自由にお使いください。