月別アーカイブ: 2013年6月

ローディング画像を表示する(2)

引き続き、ローディング中の画像表示をやって見ます。
前回はボタンを押した時に、画像が表示される「遅延読込」処理でした。

今回はページ表示時に、画像が表示されるまでの間のローディングです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $('#disp_area img').ready( function() {
                setTimeout(function(){
                    $('#disp_area').fadeIn('normal');
                    $('#loading').fadeOut('normal');
                }, 3000);
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #body {
                height           : 100%;
                width            : 100%;
            }

            #disp_area{
                margin           : 0 auto;
                display          : none;
                height           : 350px;
                width            : 960px;
            }

            #loading {
                position         : absolute;
                height           : 50%;
                width            : 100%;
                z-index          : 9999;

                background-image : url('./loading.gif');
                background-repeat: no-repeat;
                background-position: center center;

            }

        --></style>
        
    </head>
    <body>
        <div id="loading"></div>
        <div id="disp_area"><img src="./image_jpeg.jpg"></div>
    </body>
</html>

sample

1.ページ表示時に表示画像の読込開始と、ローディング画像を表示状態にする。
2.読込完了時に表示画像の表示(フェードイン)と、ローディング画像を非表示(フェードアウト)にする。

今回もサンプルでは分かりやすくするため、表示画像の読込が完了してから、
setTimeout を使用してさらに3秒たってからローディング画像を非表示にしています。
ご了承ください。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

ローディング画像を表示する

今回はローディング中の画像表示をやって見ます。

プラグインもありますが・・・、プラグインを使用するまでも無い場合用です。
今の所は画像の読込中にローディング画像を表示をすることがメインですね。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            function funcDispImage() {

                $('#disp_area').addClass('loading');                
                
                var image    = new Image();
                var img_url  = './image_jpeg.jpg'
                image.src    = img_url;
                image.onload = function () {
                    setTimeout(function(){
                        $('#disp_img').attr('src', img_url);
                        $('#disp_area').removeClass('loading');
                    }, 5000);
                }
                
            }

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #disp_area {
                height           : 350px;
                width            : 960px;
            }

            .loading {
                background-image : url('./loading.gif');
                background-repeat: no-repeat;
                background-position: center center;
            }

        --></style>
        
    </head>
    <body>

        <div id="disp_area"><img id="disp_img"></div>

        <input type="button" onclick="funcDispImage();" value="Disp Image">

    </body>
</html>

sample

1.ボタンを押すと、表示画像の読込と、ローディング画像の表示状態にする。
2.表示画像の読込が完了と同時にローディング画像を非表示状態にする。

まぁ、今回はサンプルなんで分かりやすくするため、表示画像の読込が完了してから、
setTimeout を使用してさらに5秒たってからローディング画像を非表示にしています。
そこはご了承ください。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

ajaxで画面遷移なしに表示切替

今回は ajax を使用した表示内容の切替です。

jQuery を使用しない ajax は使ったことが有りましたが、結構大変面倒くさかった覚えがあります。
ajax は jQuery で楽になっているのでしょうか?

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            function funcDispChange() {
                $.ajax({
                    type     : 'POST',
                    dataType : 'text',
                    url      : 'sample_110.txt',
                    data     : {
                                 id   : '00001',
                                 Flg  : true
                               }
                }).done(function(data) {
                    // ajax ok
                    $("#disp_area").html(data);
                }).fail(function(data) {
                    // ajax error
                    $("#disp_area").html('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

        --></script>

    </head>
    <body>

        <div>
            <p id="disp_area">Normal Disp Text</p>
            <input type="button" onclick="funcDispChange();" value="Disp Change">
        </div>

    </body>
</html>

sample

えぇ、非常に簡単になってます!
すごいなぁ、コレで通信ができるのかぁ・・・

ちなみに ‘sample_110.txt’ の中身は以下の内容です。

Change Disp Text!!!

本来は urlオプションに php を指定して、dataオプションの値によって適切な値を受け取ります。
dataTypeオプションを ‘json’ などにすれば、テキストでなくデータも取得できます。
まぁ、php で成形した出力内容を表示する方が簡単に思いますけどね

また、結果の取得方法は jQuery のバージョンによって変わるようですが、今回は 1.8 での取得方法です。
ちなみに結果取得は以下のオプションを使用できます。
 done
  ajax通信が成功時の処理を指定します。
 fail
  ajax通信が失敗時の処理を指定します。
 always
  ajax通信が完了時の処理を指定します。
  成功,失敗 どちらの場合でも、完了時にここに記載した処理を実行します。

ajax 以外の方法でも外部のデータを取得する方法はいくつかあります。
しかし、エラー時の処理を指定できるは、ajax通信の強みですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 4 人中 3 人がこの 投稿 は役に立ったと言っています。

テキストエリアの入力内容チェック

今回はテキストエリアの入力内容のチェックを作ってみます。

私が今まで作ったプログラムでは、以下の流れでエラーチェックをしていました。
1.入力内容を POST してPHPプログラムに渡す。
2.PHPで入力内容に対してのエラーチェックを行う。
3.エラーの場合は入力画面にエラー内容を表示する。

だけど、このやり方では「2.」の時に画面遷移が発生するんですよね・・・
というわけで、今後のために入力内容チェックを調査しながらの書き込みです。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {

                $("#check").click(function() {
                
                    // 全角チェック
                    var type_1 = $("input[name='type_1']").val();
                    var err_flg = false;
                    for(var cnt = 0; cnt < type_1.length; cnt++){
                        var work_len = escape(type_1.charAt(cnt)).length;
                        if(work_len < 6){
                            err_flg = true;
                        }
                    }
                    if (err_flg == true) {
                        $("#err_type_1").text("すべて全角で入力して下さい。");
                    } else {
                        $("#err_type_1").text('');
                    }

                    // 半角英数チェック
                    var type_2 = $("input[name='type_2']").val();
                    if (type_2.match(/[^0-9A-Za-z]+/)) {
                        $("#err_type_2").text("半角英数で入力して下さい。");
                    }    else {
                        $("#err_type_2").text('');
                    }

                    // 文字数チェック
                    var length_1 = $("input[name='length_1']").val();
                    if(length_1.length > 5) {
                        $("#err_length_1").text("最大文字数は5文字です。");
                    }    else {
                        $("#err_length_1").text('');
                    }

                });

            });
        --></script>

    </head>
    <body>

        <h1>入力チェック</h1>

        <h2>全角(半角文字の入力不可)</h2>
        <input type="text" name="type_1">
        <span id="err_type_1"></span>

        <h2>半角英数(全角・記号の入力不可)</h2>
        <input type="text" name="type_2">
        <span id="err_type_2"></span>

        <h2>文字数(最大5文字)</h2>
        <input type="text" name="length_1">
        <span id="err_length_1"></span>

        <div>
            <input type="button" id="check" value="チェック">
        </div>

    </body>
</html>

sample

全角のみの入力チェックを行うときがちょっと変わってますね。
文字列のエンコードを行った上で、文字毎にバイト数(UTF-8[3] × 2Byte[2] = 6)をチェックしています。
ちょっと面倒ですよね・・・
「何かいい手があるといいな」と思いつつ「全角のみの入力ってそんなに無いからなぁ」とも思います。

まぁ、そのほかに関しては大半のチェックは正規表現で、後は応用しだいなのかなと。
正規表現なら色々と応用も利くからいいですよね。
必須チェックも文字数チェックの応用でいけるだろうし・・・

あと、簡易的なメールアドレスチェックの正規表現はこんなので出来るはず。

/[!#-9A-~]+@+[a-z0-9]+.+[^.]$/i

※注意
いろんなサイトで、「メールアドレスは正規表現ではチェック出来ない」と言う記事を見かけます。
厳密なチェックを行う場合は、そういったサイトを参考にしてください。
まぁ、正確なチェックを望む人は、最初からこのサイトを参考にしないよね・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

ドロップダウンでの開閉表示

今回はドロップダウンでの開閉表示を作ってみます。

とりあえず、こんな感じです。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {
                
                $('#label').hover(
                    function(){ 
                        $('#drop_box').slideDown('normal');
                    },
                    function(){
                        $('#drop_box').slideUp('normal');
                    }
                );
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #drop_box {
                height           : 100px;
                width            : 200px;
                background-color : #ffcccc;
                border-color     : #ffffff;
                display          : none;
            }
            
        --></style>
        
    </head>
    <body>
        
        <span id="label">On Mouse</span>
        
        <div id="drop_box">Display Box1 Area</div>
        
    </body>
</html>

sample

「On Mouse」にマウスを乗せるとドロップダウンの領域が表示されます。

実は上記内容は slideToggle の方が簡単にできます。
ただし、開く時と閉じる時のスピードを変更できないようなんです。
う~ん。細かい設定をしたいときに slideToggle は使えないなぁ・・・

■おまけ?
jQuery のドロップダウンは以下のような動きをします。
・slideDown  スライドダウンして開く
・slideUp   スライドアップして閉じる
・slideToggle slideDown/slideUpの動作を交互に行って開閉する

そうです、上部にスライドアップして表示する機能がないんです。
 ※「そういった機能が存在するぞ」って言う方、お教えいただければ幸いです。

そこで、こんなやり方はどうでしょう。
ドロップダウン(スライドアップ表示もどき)

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--
            $(function() {
                
                $('#label').hover(
                    function(){ 
                        $('#dummy_box').slideUp('normal');
                        $('#drop_box').slideDown('normal');
                    },
                    function(){
                        $('#drop_box').slideUp('normal');
                        $('#dummy_box').slideDown('normal');
                    }
                );
                
            });
        --></script>
        
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 
            #drop_box {
                height           : 100px;
                width            : 200px;
                background-color : #ffcccc;
                border-color     : #ff0000;
                display          : none;
            }
            #dummy_box {
                height           : 100px;
                width            : 200px;
                background-color : #ccccff;
                border-color     : #0000ff;
            }
        --></style>
        
    </head>
    <body>
        
        <div id="dummy_box">Dummy Area</div>
        <div id="drop_box">Display Box1 Area</div>
        
        <span id="label">On Mouse</span>
        
    </body>
</html>

sample 2

これで、見た目上はスライドアップして表示されるように見えます。
えぇ、見えます。
断じて見えるはずです。(笑)

行っている手順は以下の通りです。
なお、実際に使用するときは、「Dummy Area」の領域の透明度を変更して見えないようにしてください。

1.ダミーの領域を事前に表示しておく。
2.オンマウス時に以下の処理を行う。
  ・ダミー領域をスライドアップして非表示状態にする。
  ・表示領域をスライドダウンして表示状態にする。
※スライドアップとスライドダウンの表示速度は同じにしてください。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。