月別アーカイブ: 2016年7月

jQuery 3 の show / hide

前回 jQuery 3 の話をしましたが、その際に show / hide の例を挙げました。
今回は実際にどのように変化があるのかを試したいと思います。

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

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#show').click( function() {
                    $('#disp_area1').show();
                    $('#disp_area2').removeClass('disp_hide');
                });
                $('#hide').click( function() {
                    $('#disp_area1').hide();
                    $('#disp_area2').addClass('disp_hide');
                });

            });


        --></script>

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

            div {
                margin           : 10px;
            }

            .disp_area {
                width            : 300px;
                height           : 300px;
                float            : left;
            }

            #disp_area1 {
                width            : 250px;
                height           : 250px;
                background-color : #ff0000;
                display          : none;
            }

            #disp_area2 {
                width            : 250px;
                height           : 250px;
                background-color : #0000ff;
            }

            .disp_hide {
                display          : none;
            }

        --></style>

    </head>
    <body>
        <div id="button_area">
            <button id="show">Show</button>
            <button id="hide">Hide</button>
        </div>
        <div id="main_area">
            <div class="disp_area">
                <h1>Ver. Old</h1>
                <div id="disp_area1">Sample Text</div>
            </div>
            <div class="disp_area">
                <h1>Ver. 3</h1>
                <div id="disp_area2" class="disp_hide">Sample Text</div>
            </div>
        </div>

    </body>
</html>

sample

sample の「show」「hide」を click すると表示されている領域が表示され・・・ますね。
・・・表示されますね。想定していた動きと異なります。
どうも sample が良くないようですね(笑)

jQuery 3 では以下の動きにあ変わるようです。
 「show」 display の style を削除するのみ
 「hide」 display に style=”none” を追加するのみ

そのため、show / hide を含み、fadeIn, sadeOut, slideDown, slideUp の処理が
正常に動かなくなることがあるそうです。

そのため、jQuery 3 を使用して初期を非表示をする場合には addClass, removeClass
にて表示を切り替える必要があるようです。

とりあえずは既存のものでなければとくには問題がないのでしょうか(笑)
う~ん、正直よくわかりませんが、取り立てて恐れる必要はないようですね。
今後は jQuery 3 も選定の範囲に入れてもよさそうですね。

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

jQuery 3

今回は jQuery3 の話題です。

何度かこの Blog でも言及してきましたが 2016/06/09 に正式 jQuery 3 が公開されています。
また、2016/07/07 にも error 処理に関しての修正版(Ver 3.1.0)が出るなど、意欲的に
更新が行われています。
そのため「ちょっとこのサイトでも取り上げようかな・・・」というところです。

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

        <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){
                $('#disp_area').html('Hello, world!');
            });


        --></script>

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

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">
            <p id="disp_area"></p>
        </div>

    </body>
</html>

sample

sample にはほとんど意味はありません(笑)
あえて言うと「jQuery 3.1 で動作してますよ!」ぐらいです。

まぁ、正直に云うと 急いで jQuery 3 にすることにメリットはあまり感じてはいません。
現時点では以下のような気持でいます。

 jQuery の Ver 1.x と Ver 2.x が ie8 が不要になることの影響で、2系統に分かれることが無くなった。
 といったメリット?はありますが、どちらにせよ古いブラウザの対応を考えるのであれば、
 Ver 3.x は使えませんし、そうでないなら Ver 2.x でも大差ないのでは無いかな・・・
 むしろ、今までよく使用していた「show, hide」などの使用変更が地味に痛いので、
 Wordpress 等の CMS に搭載される Version が変更されてからの方がいいなぁ・・・

 #あくまでも個人的な見解です(笑)

とはいえ折角だから、この Blog も次回からは jQuery 3 に切り替えるべきですかね・・・

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

数値の0埋め

今回は備忘録的な内容です。
よくやる内容ではあるのですが「0埋め」処理です。
「0パディング」とも言いますね。

Javascriptで配列情報を操作する際には数値が理想なのかもしれません。
ただ、情報元のキーを考えると、あえて「0埋め」することがあったりします。
また、日時の表示にはよく使う内容です。
今回はそういう場合の覚書です。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#button').click( function() {
                    var setNum = $('#number').val();
                    var setPad = ($('#left_pad').val() * -1);
                    if ( $('#left_pad').val() > setNum.length) {
                        setNum = ( '000000000' + setNum ).slice( setPad );
                    }
                    $('#dispNum').html( setNum );
                });

            });


        --></script>

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

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">
            <div id="disp_area">
                <span id="dispNum">0</span>
            </div>
            <div id="input_area">
                <input id="number" type="text" value="0">
                <select id="left_pad">
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <button id="button">click</button>
            </div>
        </div>

    </body>
</html>

sample

sample を click すると数字が表示されています。
button がありますが culick すると数字が「0埋め」されて表示されます。

特に特別難しい訳ではありませんが、忘れやすいので改めて記載しておきます。

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

ダイアログの表示

今回はダイアログ表示についてです。

それほど何か重要と云うのではありませんが、標準のダイアログでは
ちょっと寂しいという方に向けて対応方法です。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('#input_submit').click( function( eObj ) {
                    eObj.preventDefault();
                    $('#dialog_area').fadeIn('normal');
                });

                $('#input_yes').click( function() {
                    $('#form_main').submit();
                });

                $('#input_no').click( function() {
                    $('#dialog_area').fadeOut('normal');
                });

            });

        --></script>

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

            #main_area {
                padding          : 10px;
            }

            #dialog_area {
                width            : 100%;
                height           : 100%;
                position         : absolute;
                background-color : rgba(48, 48, 48, 0.7);
                display          : none;
            }

            #dialog {
                width            : 200px;
                height           : 120px;
                margin           : 100px auto;
                background-color : #f0f0f0;
            }

            #dialog p {
                height           : 60px;
                padding          : 10px;
            }

            #dialog div {
                padding          : 5px;
                margin           : 0 auto;
                text-align       : center;
            }

        --></style>

    </head>
    <body>

        <div id="dialog_area">
            <div id="dialog">
                <p>
                    Please select a check post-processing the wording .
                </p>
                <div>
                    <input id="input_no" type="button" value="No Submit">
                    <input id="input_yes" type="button" value="Yes Submit">
                </div>
            </div>
        </div>

        <div id="main_area">
            <div id="input_area">
                <form id="form_main" method="gett">
                    <input type="text" name="t" value="Sample Input">
                    <input id="input_submit" type="submit" value="Check">
                </form>
            </div>
        </div>

    </body>
</html>

sample

sample の button を click すると dialog が表示されます。
「No」を click した際には dialog が非表示となり、
「Yes」を click した際には実際の submit の処理を行います。

実際にはもっとデザインを設定して頂く必要はありますが、
標準な dialog では寂しい、という場合には十分ではないでしょうか。

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

アップロード時のサムネイル表示

今回はアップロード時のサムネイル表示です。
以前にも挑戦したことはあるんですが、当時はブラウザによって
HTML5 に対応していないものもあり ajax と PHP での処理を行い
それなりに手間がかかった覚えがあります。

別のプロジェクトにて同僚が使っているのを見て、ちょっと感動した
ため備忘録として記載します。

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

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                // Image Get
                $('#uploadFile').change( function( eObj ) {

                    var objFile = eObj.target.files && eObj.target.files[0];
                    if (objFile != null) {
                        var fReader = new FileReader();
                            fReader.onload = onImageLoad;
                            fReader.readAsDataURL(objFile);
                    }

                });

                // Image Load
                var maxThumWidth = 250;
                var objCanvas = document.getElementById('viewThumbnail');
                function onImageLoad( eObj ) {

                    // Work Image
                    var objImage  = document.createElement('img');
                    objImage.src  = eObj.target.result;
                    var ImgRate   = ( objImage.naturalWidth  / maxThumWidth );
                    var ImgWidth  = ( objImage.naturalWidth  / ImgRate );
                    var ImgHeight = ( objImage.naturalHeight / ImgRate );

                    // Canvas drawImage
                    objCanvas.width  = ImgWidth;
                    objCanvas.height = ImgHeight;
                    objCanvas.getContext('2d').clearRect(0, 0, ImgWidth, ImgHeight);
                    objCanvas.getContext('2d').drawImage(objImage, 0, 0, ImgWidth, ImgHeight);

                }

            });

        --></script>

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

            div {
                margin     : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="input_area">
                <input type="file" id="uploadFile">
            </div>
            <div id="view_area">
                <canvas id="viewThumbnail"></canvas>
            </div>

        </div>
    </body>
</html>

sample

sample を開くと File の Upload ボタンがあります。
該当の input に対して画像を Upload することで対象画像のサムネイルが表示されます。

正直 jQuery はほとんど使用していません(笑)
html5 と Javascript が基本ですね。

今後は HTML5 が使えない環境もあまり考慮する必要はなくなります。
お客様よりの要望としては、結構多い機能です。
今後は上記の方法にて対応できるようにして行きたいですね。

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