jQuery入門 : jQuery入門 No.44

jQuery入門 No.44

2009 12月22日
コメントは受け付けていません。

───────────────────────────────
　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);

<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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━