タグ別アーカイブ: empty

テキストを1文字ずつフェードイン

文字列の fadeIn はよく見かけます。
「こんなことが出来る」と聞かれましたのでやってみました。

<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(){
                $('#exec').click( function(){
                    $('#text_area').empty();
                    var arrText = $('#input_text').val().split('');
                    $.each(arrText, function(index, val){
                        $('#text_area').append('<span id="cnt' + index + '" style="opacity:0;">' + val + '</span>');
                        $('#cnt' + index).delay(index * 300).animate({opacity:1},1000);
                    });

                });
            });

        --></script>

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

            div {
                margin : 50px;
            }

            #text_area {
                height : 50px;
                margin : 50px;
                border : solid 1px #000000;
            }

        --></style>

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

            <div id="main_area">
                <p id="text_area"></p>
            </div>

            <div id="button_area">
                <input id="input_text" type="text" value="Sample Message">
                <button id="exec">click!</button>
            </div>

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

sample

sample には textbox が存在しています。
入力したうえで button を click すると入力した文字列が 一文字ずつ fadeIn します。
別に fadeIn を使っても良いんですが最終形はもう少し凝ったこともするらしいので
あえて animate を使用しています。

どうでしょう、意外といけているかと思うのですが・・・
一度これで確認してもらおうかと思います。
最終的にはもう少し装飾などを追加しますが、まずはこれで確認してもらおうと思います。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 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"><!--

            // Data Set
            var datMember = [
                {
                    name : 'A',
                    sex  : 'male',
                    age  : 18
                },
                {
                    name : 'B',
                    sex  : 'female',
                    age  : 20},
                {
                    name : 'C',
                    sex  : 'male',
                    age  : 22},
                {
                    name : 'D',
                    sex  : 'female',
                    age  : 25
                },
                {
                    name : 'E',
                    sex  : 'male',
                    age  : 30
                }
            ];


            var target;
            $(function(){

                // Glep Data Age
                var arrAge;
                $('#judgment_age').click( function(){

                    target = $('#select_age').val();

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.age >= target);
                        }
                    );                    
                    setDispData('grep_true', arrAge);

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.age >= target);
                        },
                        true
                    );                    
                    setDispData('grep_false', arrAge);

                });


                // Glep Data Sex
                var arrSex;
                $('#judgment_sex').click( function(){

                    target = $('#select_sex').val();

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.sex == target);
                        }
                    );                    
                    setDispData('grep_true', arrAge);

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.sex == target);
                        },
                        true
                    );                    
                    setDispData('grep_false', arrAge);

                });

                // Daat Set
                function setDispData(setObj, setData) {
                    $('#' + setObj).empty();
                    $.each(setData, function(index) {
                        $('#' + setObj)
                            .append('<div id="name_' + setData[index]['name'] + '"></div>')
                            .children('#name_' + setData[index]['name'])
                            .append('<h2>' + setData[index]['name'] + '</h2>')
                            .append('<dl></dl>')
                            .children('dl')
                            .append('<dt>name</dt><dd>' + setData[index]['name'] + '</dd>')
                            .append('<dt>Age</dt><dd>'  + setData[index]['age']  + '</dd>')
                            .append('<dt>Sex</dt><dd>'  + setData[index]['sex']  + '</dd>');
                    });
                }
                // init Data
                setDispData('all_data', datMember);

            });

        --></script>

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

            div {
                margin       : 10px;
            }

            div.target_div {
                width        : 25px;
                height       : 25px;
                line-height  : 25px;
                text-align   : center;
                border       : solid 1px #000000;
                float        : left;
            }

            dl {
                width        : 300px;
            }
            dt {
                float        : left;
            }
            dd {
                margin-left  : 80px;
            }

        --></style>

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

            <div id="select_area">

                <select id="select_age">
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                    <option value="30">30</option>
                    <option value="35">35</option>
                </select>
                <button id="judgment_age">Age Judgment</button>

                <select id="select_sex">
                    <option value="male">male</option>
                    <option value="female">female</option>
                </select>
                <button id="judgment_sex">Sex Judgment</button>

            </div>

            <div id="disp_area">

                <h1>Grep True</h1>
                <div id="grep_true"></div>

                <h1>Grep False</h1>
                <div id="grep_false"></div>

                <h1>All Data</h1>
                <div id="all_data"></div>

            </div>

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

sample

sample には二組の select と button が設置してあります。
age を選択して button を押すと指定した年齢以上の情報を絞り込みます。
sex を選択して button を押すと指定した性別の情報を絞り込みます。

実際に絞り込みが出来ることが出来ました。
ちょっと意外だったことは grep の第3引数です。
true を指定することで絞り込みを行った結果、対象外となった情報のみ
対象に出来るということです。
「その他」だけを表示したいことは多々ありますが中々便利ですよねぇ・・・

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

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

セレクトボックスの内容変更

今回は select の処理です。
親となる select を選択することで 子となる select の選択内容を変更します。

<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(){

                // Data Set
                var arrMain = new Array();
                    arrMain['A'] = new Array();
                    arrMain['A']['A_1'] = 'Disp_A_1';
                    arrMain['A']['A_2'] = 'Disp_A_2';
                    arrMain['A']['A_3'] = 'Disp_A_3';
                    arrMain['A']['A_4'] = 'Disp_A_4';
                    arrMain['B'] = new Array();
                    arrMain['B']['B_1'] = 'Data_B_1';
                    arrMain['B']['B_2'] = 'Data_B_2';
                    arrMain['B']['B_3'] = 'Data_B_3';
                    arrMain['B']['B_4'] = 'Data_B_4';
                    arrMain['B']['B_5'] = 'Data_B_5';
                    arrMain['C'] = new Array();
                    arrMain['C']['C_1'] = 'Data_C_1';
                    arrMain['C']['C_2'] = 'Data_C_2';
                    arrMain['C']['C_3'] = 'Data_C_3';
                    arrMain['D'] = new Array();
                    arrMain['D']['D_1'] = 'Data_D_1';
                    arrMain['D']['D_2'] = 'Data_D_2';
                    arrMain['D']['D_3'] = 'Data_D_3';
                    arrMain['D']['D_4'] = 'Data_D_4';
                    arrMain['D']['D_5'] = 'Data_D_5';
                    arrMain['D']['D_6'] = 'Data_D_6';
                    arrMain['D']['D_7'] = 'Data_D_7';
                    arrMain['D']['D_8'] = 'Data_D_8';
                    arrMain['D']['D_9'] = 'Data_D_9';


                // Change Main
                $('#select_main').change( function(){

                    $('#select_sub').empty().append("<option>Select Sub Data</opton>");
                    if ($(this).val() == '') {
                        return;
                    }

                    for (var sKey in arrMain[$(this).val()]) {
                        $('#select_sub').append("<option value='" + sKey + "'>" + arrMain[$(this).val()][sKey] + "</opton>");
                    }

                });


                // Init Data
                $('#select_main').empty().append("<option>Select Main Data</opton>");
                for (var mKey in arrMain) {
                    $('#select_main').append("<option value='" + mKey + "'>Select Main " + mKey + "</opton>");
                }
                $('#select_main').trigger('change');

            });

        --></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="select_area">
                <select id="select_main"></select>
                <select id="select_sub"></select>
            </div>
        </div>

    </body>
</html>

sample

sample では左側の選択内容によって、右側の選択内容を切り替えます。
CMS では「お問い合わせ」などに plugin など良く使うと思いますが、
使用している plugin が select の内容変更に対応しているとは限りせん。
そんなときに今回の内容が使えるのではないのでしょうか。

ちなみに、以前は対象外の option を hide で非表示にしておりましたが、
ブラウザが IE の場合 option は消せないとのことです。
いい加減ブラウザ毎の差異は無くならないかなぁ・・・

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

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

情報のユニーク化

今回は情報のユニーク化です。
お仕事案件にて blog に書き込みをした日付のみ日付を表示したいとのことです。
但し、blog は 1日に1件も書かないこともあるし、3件以上とのことです。
その中から、重複しないで出力して欲しいとのことです。
ではやってみます。

<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(){

                var arrBase = ['2015/03/27', '2015/03/28', '2015/03/29', '2015/03/28', '2015/03/29','2015/03/28', '2015/03/31', '2015/03/30', '2015/03/31'];
                var arrTemp;

                $('#btn_normal').click(function() {
                    dispArr('normal');
                })
                $('#btn_unique').click(function() {
                    dispArr('unique');
                })

                function dispArr(type) {

                    $('#disp_data').empty();

                    tempData = $.extend(true, [], arrBase);;
                    if (type == 'unique') {
                        tempData = $.unique(tempData);
                    }

                    tempData.sort();
                    $.each(tempData, function(val) {
                        $('#disp_data').append(tempData[val] + '<br />');
                    });

                }

            });

        --></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_button">
                <button id="btn_normal">normal</button>
                <button id="btn_unique">unique</button>
            </div>
            <div id="disp_data"></div>
        </div>

    </body>
</html>

sample

sample には buttom が 2つあります。
「normal」を押すと日付をソートして表示します。
「unique」を押すと日付をソートして、かつ、重複した内容を省いて表示します。

今回の案件が WordPress の場合、すでに月別アーカイブなどは存在しています。
 #それに基本は PHP でやりますよね・・・

ですが jQuery にて絞り込みを行うことも、まだまだ考えられます。
そんな時には今回の unique 関数が役に立つかと思います。
他にも使い方は結構ありそうです。
ちょっとわくわくしますね。

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(){

                $('#d_set').click(function() {
                    $('#disp_data').data('set_value', $('#input_data').val());
                    $('#input_data').val('')
                })
                
                $('#d_add').click(function() {
                    $('#disp_data').data('set_value', $('#disp_data').data('set_value') + ' ' + $('#input_data').val());
                    $('#input_data').val('')
                })

                $('#d_remove').click(function() {
                    $('#disp_data').removeData('set_value');
                    alert('Data Remove OK!');
                })

                $('#d_disp').click(function() {
                    $('#disp_data').empty().text($('#disp_data').data('set_value'));
                })

            });

        --></script>

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

            div {
                margin       : 10px;
            }

            button {
                margin-right : 5px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div>
                <h1>Data Input</h1>
                <input id="input_data" />
                <button id="d_set">Data Set</button>
                <button id="d_add">Data Add</button>
            </div>
            <div>
                <h1>Data Disp</h1>
                <button id="d_disp">Data Disp</button>
            </div>
            <div id="disp_data"></div>
            <div>
                <h1>Data Remove</h1>
                <button id="d_remove">Data Remove </button>
            </div>
        </div>

    </body>
</html>

sample

sample の入力欄に文字を入力して「Data Set」の button をクリックすることで
data を object のに紐づけることができます。

その時点では紐づけした data は表示されていませんが「Data Disp」の button を
click することで紐づけされた data を表示されることができます。

今回の内容は個人的には少し嬉しかったりします。
今まではとりあえず attr などで適当な名前を付けて設定していましたが
余り綺麗ではないと感じていました。

今回からは変な値を attr する必要も無いので安心できます。
ちなみに、配列でのデータの登録も出来るので非常に安心です。
ちょっと気になるのは、実際はどこに保存されているのかということでしょうか・・・

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

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