月別アーカイブ: 2015年3月

情報のユニーク化

今回は情報のユニーク化です。
お仕事案件にて 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 人がこの 投稿 は役に立ったと言っています。

数字の標記編集(小数点の桁揃え)

以前に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(){

                $('#button').click(function() {

                    var numVal;
                    var numRound = 2;
                    numVal = $('#input_num').val();
                    $('#dsip_num').empty();

                    // Input Check
                    if (numVal == '') {
                        $('#disp_num').text('Error : No input').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Replace
                    numVal = numVal.replace(/[0-9]/g,function(s){
                        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
                    });
                    if (!(numVal.match(/^[0-9\.]+$/))) {
                        $('#disp_num').text('Error : No numeral').css({'background-color':'#ff0000'});
                        return;
                    }

                    // Num Set Comma
                    numVal = parseFloat(numVal);
                    $('#disp_num').text(numVal.toFixed(numRound)).css({'background-color':'#00ff00'});

                })

            });

        --></script>

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

            div#main_area {
                margin      : 10px;
            }

            div#num_area {
                margin-top  : 20px;
            }

            #disp_num {
                padding     : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input id="input_num" />
            <button id="button">Set Comma</button>
            <div id="num_area"><span id="disp_num"></span></div>
        </div>

    </body>
</html>

sample

丸め処理だけだと ( ( num * 100 ) / 100 ) みたいな処理をやるといいんですが、
少数点以下の桁数の揃えができません。
たとえば 99.99999 を 99.99 とすることはできますが、99 は 99 として表示されます。

色々な方法で桁埋めは出来るんですが、今回は「toFixed」を使用して見ました。
・・・これ良いですね。対象は四捨五入のみのため、使用場面を選ぶことにはなりますが、
桁揃えまで出来るのは素晴らしいです。

知らない自分が悪いんですが、こういった便利な関数は今後も調べていきたいですね。

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

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

立方体の回転(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"><!--

            var setBase      = new Array();
                setBase['X'] = 0;
                setBase['Y'] = 0;

            function exeImageRotate(r_type, angle) {

                // initialization
                $('#cube_area_' + r_type).css('zindex', 0);

                $('#cube_area_' + r_type).animate(
                    {
                        zindex : 1
                    },
                    {

                        // animate time ( second 3 )
                        duration:1000,

                        complete:function(){
                            // end animate
                            setBase[r_type] += angle;
                        },

                        step:function(step){
                            // step animate
                            $(this).css({transform:'rotate' + r_type + '(' + (setBase[r_type] + (step * angle)) + 'deg)'});
                        }

                    }
                );

            }

        --></script>

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

            div#main_area {
                margin           : 50px;
            }
            
            div.cube_area {
                height           : 180px;
                width            : 180px;
                transform-style  : preserve-3d;
                font-size        : 50px;
            }

            div.cube_area_x {
            }
            div.cube_area_y {
            }

            div#button_area {
                margin-top       : 100px;
            }

            div.panel {
                position         : absolute;
                height           : 180px;
                width            : 180px;
                text-align       : center;
                line-height      : 180px;
            }

            div#panel_1 {
                background-color : #ffcccc;
                transform        : rotateX(0deg) translateZ(90px);
            }

            div#panel_2 {
                background-color : #ccffcc;
                transform        : rotateX(-90deg) translateZ(90px);
            }

            div#panel_3 {
                background-color : #ccccff;
                transform        : rotateX(-180deg) translateZ(90px);
            }

            div#panel_4 {
                background-color : #ff0000;
                transform        : rotateX(-270deg) translateZ(90px);
            }

            div#panel_5 {
                background-color : #00ff00;
                transform        : rotateX(0deg) rotateY(90deg) translateZ(90px);
            }

            div#panel_6 {
                background-color : #0000ff;
                transform        : rotateX(0deg) rotateY(-90deg) translateZ(90px);
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="cube_area_X" class="cube_area">
                <div id="cube_area_Y" class="cube_area">
                    <div class="panel" id="panel_1">1</div>
                    <div class="panel" id="panel_2">2</div>
                    <div class="panel" id="panel_3">3</div>
                    <div class="panel" id="panel_4">4</div>
                    <div class="panel" id="panel_5">5</div>
                    <div class="panel" id="panel_6">6</div>
                </div>
            </div>
            <div id="button_area">
                <button id="up"    onclick="exeImageRotate('X',  45);">up</button>
                <button id="down"  onclick="exeImageRotate('X', -45);">down</button>
                <button id="left"  onclick="exeImageRotate('Y',  45);">left</button>
                <button id="right" onclick="exeImageRotate('Y', -45);">right</button>
            </div>
        </div>

    </body>
</html>

sample

sample では各button を click すると立方体が回転します。
移動角度は45度分づつです。
これで回転内容の保持が出来ました。

とりあえず、今回で立方体関係の処理は完了かな思います。
・・・今後利用できると良いですね。

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

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

3D 的にページを傾ける(2)

以前に3D 的にページを傾けるを行いました。
しかし、前回前々回で 3D の処理をやった見たところ、もう少し良い方法があるようです。

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

                // initialization
                $('#cube_area_2d').css('zindex', 0);
                $('#cube_area_2d').animate(
                    {
                        zindex : 1
                    },
                    {
                        // animate time ( second 3 )
                        duration:3000,
                        step:function(step){
                            // step animate
                            $(this).css({transform:'rotateY(' + ((step * angle) - 15) + 'deg)'});
                        }
                    }
                );

                $('#cube_area_3d').css('zindex', 0);
                $('#cube_area_3d').animate(
                    {
                        zindex : 1
                    },
                    {
                        // animate time ( second 3 )
                        duration:3000,
                        step:function(step){
                            // step animate
                            $(this).css({transform:'rotateY(' + (step * angle) + 'deg)'});
                        }
                    }
                );

            }

        --></script>

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

            div.main_area {
                margin           : 50px;
                margin-left      : 100px;
            }

            div#main_area_2d {
            }

            div#main_area_3d {
                perspective      : 1000;
            }

            div.cube_area {
                height           : 180px;
                width            : 180px;
                transform-style  : preserve-3d;
                font-size        : 50px;
            }

            div#cube_area_2d {
                transform        : rotateY(-15deg);
            }

            div#cube_area_3d {
            }

            div#button_area {
            }

            div.panel {
                position         : absolute;
                height           : 180px;
                width            : 180px;
                text-align       : center;
                line-height      : 180px;
            }

            div.panel_1 {
                background-color : #ffcccc;
                transform        : rotateX(0deg) rotateY(0deg)  translateZ(90px);
            }

            div.panel_2 {
                background-color : #00ff00;
                transform        : rotateX(0deg) rotateY(90deg) translateZ(90px);
            }

            div.panel_3 {
                background-color : #ccccff;
                transform        : rotateX(0deg) rotateY(180deg) translateZ(90px);
            }

            div.panel_4 {
                background-color : #0000ff;
                transform        : rotateX(0deg) rotateY(-90deg) translateZ(90px);
            }

        --></style>

    </head>
    <body>

        <div id="button_area">
            <button id="left"  onclick="exeImageRotate(360);">left</button>
            <button id="right"  onclick="exeImageRotate(-360);">right</button>
        </div>
        <div id="main_area_2d" class="main_area">
            <div id="cube_area_2d" class="cube_area">
                <div class="panel panel_1">1</div>
                <div class="panel panel_2">2</div>
                <div class="panel panel_3">3</div>
                <div class="panel panel_4">4</div>
            </div>
        </div>
        <div id="main_area_3d" class="main_area">
            <div id="cube_area_3d" class="cube_area">
                <div class="panel panel_1">1</div>
                <div class="panel panel_2">2</div>
                <div class="panel panel_3">3</div>
                <div class="panel panel_4">4</div>
            </div>
        </div>

    </body>
</html>

sample

spmple には button があります。
button を押すと立方体が回転します。
ちなみに上の立方体が前回のものと同じです。
今回の内容(下の立方体)は“遠近法”にて奥行きを表現するようです。

正直やってみないと理解できませんでしたが、実際に試してみると
違いが大きく分かりますね。

・・・一点問題があって、今回もjQueryは余り使っていません・・・
あと一回、3D表示を行おうと考えていますが・・・
次回は jQuery になる予定です・・・、きっと(笑)

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

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