2009/12/18
jQuery入門 No.44
───────────────────────────────
jQuery入門 No.44
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)要素にmouseupイベントを設定する
2)要素にresizeイベントを設定する
3)要素にscrollイベントを設定する
4)本日のエラー：他のブラウザだと、文字化けして動かない！
5)編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にmouseupイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
mouseup(関数)
【サンプル説明】
クリックして、ボタンが上がるのが
mouseupの動作です。試してみましょう。
赤色の「ここをクリックして下さい」の
<div></div>内で、マウスをクリック。
そのボタンが上にあがると、
文字が大きくなります。
文字の外にマウスが移動すると、元の大きさに戻ります。
【サンプル１】
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#m_up").mouseup(function(e){
$("#m_up").css("font-size", "50px");
$("#m_up").css("width", "600px");
$("#m_up").css("height", "60px");
});
$("#m_up").mouseout(function(){
$("#m_up").css("font-size", "18px");
$("#m_up").css("width", "230px");
$("#m_up").css("height", "25px");
});
});
</script>
<style>
div { background:springgreen; color:red; font-size:18px;
width:230px; height:25px; }
</style>
</head>
<body>
<p>
<div id="m_up"><strong>ここをクリックして下さい </strong></div>
<br />
</p>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にresizeイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
resize(関数)
【サンプル説明】
resizeは、ブラウザの画面の大きさが
変わると動きだします。
ブラウザの大きさを変更すると、
その回数をカウントします。
【サンプル２】
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$(window).resize(function(){
$("div").text("resize回数：" + ++count);
});
});
</script>
<body>
<strong><span>ウインドウのサイズを変えてみて下さい。</span></strong>
<br />
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にscrollイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
scroll(関数)
【サンプル説明】
ブラウザの画面をスクロールさせると
その回数をカウントします。
・ウインドウのスクロールバー
・マウスのホイール
どちらでスクロールさせても、
カウントされます。
＜＜＜ 注意！ ＞＞＞
サンプルを動かすと、自動的にウィンドウサイズが
変わります。
window.resizeTo(400,350);
これでウィンドウサイズが変わるように設定しています。
【サンプル３】
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
window.resizeTo(400,350); //ウィンドウサイズ設定
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
var count = 0;
$(window).scroll(function () {
$("span").text(++count);
});
});
</script>
<style>
div { color:blue; }
p { color:green; }
span { color:red;}
</style>
</head>
<body>
<div>スクロールしてみて下さい。</div>
<p>今のスクロールは、 <span></span>回目</p>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■本日のエラー：他のブラウザだと、文字化けして動かない！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「FireFoxだと動いたのに、IEだと文字化け！」
普段、FireFoxを使っているので、
試しにIEで動作確認を行いました。
すると、文字化けするし、動作もおかしい。
Chromeもダメだった…
私のjQueryサンプルは、FireFoxユーザーのみなのか…
いったい、どうしたら…（遠い目）
結局、文字コード指定をしていないのが原因でした。
（修正前）
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
（修正後）
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
上から3行目、<meta （中略） charset=utf-8" />と、
少し長い行を１行追加しました。
これを追加した途端に、他のブラウザでも動作するようになりました。
元々、テキストエディタで、文字コード「utf-8」で
サンプルを作っているので設定したら文字化けしなくなりました。
【まとめ】
文字化けしたら文字コードの指定を、疑ってみる。
※毎度サンプルには、この１行が入ってるのに、なぜ私は…
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery人生が始まったばかりの、深澤（ふかさわ）です。
◆jQuery 1.4 Alpha 1 がリリースされました！
http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released/
英語を読むのに難儀するので、jQueryのように
リリースの早いものは、英語が読めないと辛いなあ。
と、思いつつわからない単語を訳して
更に、英語の迷宮に入り込んでます。
ああ。英語人生も始めるのか…（遠い目）。
次回もどうぞ、ごひいきに。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
発行：株式会社ビーフェイス http://www.bface.net/
発行システム：『まぐまぐ！』 http://www.mag2.com/
配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
