タグ別アーカイブ: replaceWith

JSON 形式情報の取得

今回は JSON形式での情報取得をやった見ます。
前回の「(番外編)郵便番号から住所を取得する。」で云っていたJSON情報の取得方法です。
使用するのは getJSON になります。
指定した URL に記載されている JSON 形式の情報を取得する事が出来ます。

ちなみに「(番外編)郵便番号から住所を取得する。」のときも JSON 形式で取得する前提のため、
getJSON を使っても問題なかったんですけどね。
何にせよ getJSON は JSON情報を取得することに特化した AJAX という認識で良いかと思います。

<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 select_data;
            function funcGetData() {

                // Select Get Data
                select_data = $('#select_area input:checked').val();

                // JSON Get
                $.getJSON('sample_628.txt', function(json){
                    $('#disp_title p').replaceWith('<p>' + json[select_data].title + '</p>');
                    $('#disp_author p').replaceWith('<p>' + json[select_data].author + '</p>');
                    $('#disp_date p').replaceWith('<p>' + json[select_data].date + '</p>');
                });

            }

        --></script>

    </head>
    <body>
        <div id="select_area">
            <h1>Data ID</h1>
            <input type="radio" name="data_id" value="0" checked="checked"> 0<br />
            <input type="radio" name="data_id" value="1"> 1<br />
            <input type="radio" name="data_id" value="2"> 2<br />
            <input type="radio" name="data_id" value="3"> 3<br />
            <input type="radio" name="data_id" value="4"> 4<br />
            <input type="button" onclick="funcGetData();" value="Data Get">
        </div>
        <div id="Disp_area">
            <h1>Disp Data </h1>
            <dl>
                <dl>Title</dl>
                <dt id="disp_title"><p></p></dt>
                <dl>Author</dl>
                <dt id="disp_author"><p></p></dt>
                <dl>Date</dl>
                <dt id="disp_date"><p></p></dt>
            </dl>
        </div>

    </body>
</html>

sample
なお、json[] の 引数部分が 選択した radio button の選択した数字と一致するようにしています。

取得する JSON データは以下の内容になります。
[
{“title”:”Title_0″,”author”:”author_0″,”date”:”2011/01/01″},
{“title”:”Title_1″,”author”:”author_1″,”date”:”2012/01/01″},
{“title”:”Title_2″,”author”:”author_2″,”date”:”2013/01/01″},
{“title”:”Title_3″,”author”:”author_3″,”date”:”2014/01/01″},
{“title”:”Title_4″,”author”:”author_4″,”date”:”2015/01/01″}
]
[/html]

each を使用することで選択項目を複数に変更することもできます。
JSON データさえ作っておけば簡単な Datebase 代わりにも使えるため便利ですね。

まぁ、実際にはある程度毎にファイルを分割しておかないと、検索対象が多くなれば辛いものになります。
結局はPHPなどと組み合わせたほうが便利になるんだと思います。
前回の題材の様に郵便番号を使用するのであれば、細かく分割しておけば使用には耐えられるものかとは思いますが、
でも、JSON 形式の情報を管理するのが面倒ですよねぇ・・・

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

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

色情報の表記変更

前回「簡易カラーピッカー」を作成しました。
後から確認したところ $(this).css(‘background-color’); で背景色を取得した場合、
ブラウザによって取得する文字列が異なるようです。

取得内容をそのまま背景色に設定する分には問題ないのだと思います。
しかし、文字列を表示する場合はクロスブラウザ対策をしないといけないようです。

ということで今回は色情報取得時のクロスブラウザ対策をしてみます。

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

                var colorData;
                var colorChangeData;
                // Color List Display
                function SetColorList(type) {
                    // Color List Clear
                    $('#select_area').empty;

                    // rData
                    for (var r=0; r<16; r = r + 2) {
                        // gData
                        for (var g=0; g<16; g = g + 2) {
                            // bData
                            for (var b=0; b<16; b = b + 2) {
                                // Color Set
                                colorData = parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
                                $('#select_area').append('<div class="color_box" style="background-color:#' + colorData + ';"></div>');
                            }
                        }
                        $('#select_area').append('<div class="float_both"></div>');
                    }

                    // Color Click
                    $('.color_box').click(function (e) {
                        // Get Color Data
                        colorData = $(this).css('backgroundColor');
                        // Date Set
                        $('#color_disp span').replaceWith('<span>' + colorData + '</span>');
                        $('#color_disp').css('backgroundColor', colorData);

                        // New
                        colorChangeData = '';
                        if (colorData.substr(0,1) == '#') {
                            // Opera (#ffffff)
                        } else {
                            // Etc (rgb(255, 255, 255))
                            // 
                            colorData = colorData.replace('rgb(', '');
                            colorData = colorData.replace(')', '');
                            //
                            arrColor  = colorData.split(',');
                            for (var cnt=0; cnt<=2; cnt++) {
                                arrColor[cnt] = parseInt(arrColor[cnt]).toString(16);
                                if (arrColor[cnt].length < 2) {
                                    arrColor[cnt] = '' + '0' + arrColor[cnt];
                                }
                            }
                            colorChangeData = '#' + arrColor[0] + arrColor[1] + arrColor[2];
                        }
                        $('#color_text span').replaceWith('<span><p>' + colorData + '</p><p> ↓ Change</p><p>' + colorChangeData + '</p></span>');

                    });

                }

                // init
                SetColorList();

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

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #disp_area p {
                padding          : 10px;
            }

            #select_area {
                margin           : 10px;
                padding          : 20px;
            }

            .color_box {
                float            : left;
                height           : 15px;
                width            : 15px;
                margin           : 0;
                padding          : 0;
            }

            .float_both {
                clear            : both;
            }

        --></style>
         
    </head>
    <body>
        <div id="select_area">
        </div>
        <div id="disp_area">
           <div id="color_disp">
               <span></span>
           </div>
           <div id="color_text">
               <span></span>
           </div>
        </div>
    </body>
</html>

sample

sanple 内容は基本的に 「簡易カラーピッカー」 のままです。
但し、色を選択したときの取得文字列を #ffffff での表示に変更しました。

今回のクロスブラウザ対策は以下の状況を共通の形式にするための処理です。
例)
■取得時
 Opera #ffffff
 その他 rgb(255,255,255)
 ↓
■返還後
 全ブラウザ #ffffff

正直 Opera 利用者の割合とか考えると必要かなぁとは思います。
ですが Opera 対策というよりも #ffffff の形式のほうが好みなので対応したほうがいいですね。

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

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

簡易カラーピッカー

今回は簡易的なカラーピッカーを作ってみました。
・・・あくまでも簡易版です。
まぁ「こんな事できますよ」の確認ですね

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

                var colorData;
                // Color List Display
                function SetColorList(type) {
                    // Color List Clear
                    $('#select_area').empty;

                    // rData
                    for (var r=0; r<16; r = r + 2) {
                        // gData
                        for (var g=0; g<16; g = g + 2) {
                            // bData
                            for (var b=0; b<16; b = b + 2) {
                                // Color Set
                                colorData = parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
                                $('#select_area').append('<div class="color_box" style="background-color:#' + colorData + ';"></div>');
                            }
                        }
                        $('#select_area').append('<div class="float_both"></div>');
                    }

                    // Color Click
                    $('.color_box').click(function (e) {
                        // Get Color Data
                        colorData = $(this).css('backgroundColor');
                        // Date Set
                        $('#color_disp span').replaceWith('<span>' + colorData + '</span>');
                        $('#color_disp').css('backgroundColor', colorData);
                    });

                }

                // init
                SetColorList();

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

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #select_area {
                margin           : 10px;
                padding          : 20px;
            }

            .color_box {
                float            : left;
                height           : 15px;
                width            : 15px;
                margin           : 0;
                padding          : 0;
            }

            .float_both {
                clear            : both;
            }

        --></style>
         
    </head>
    <body>
        <div id="disp_area">
           <div id="color_disp">
               <span></span>
           </div>
        </div>
        <div id="select_area">
        </div>
    </body>
</html>

sample

表示された色を選択すると、指定した色の取得をします。

まぁ、簡単に色指定をすることはできるようなので、画面の中の文字色や背景色を変更できるようになります。
本当は RGB に各255,255,255 での色を表示しようかと思いましたが色数がすさまじくなります・・・
そのため、今回は色数を制限しています。

まぁ、色数もそう問題かと思うんですが、色の表示順はどうするのが理想なんでしょうか。
自動で並べる場合は考える必要がありますね。
色の表示順に関しては配列情報を事前登録しておくことが理想なんでしょうか。

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

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

オブジェクトの置き換え

今回は Object の置き換えをやってみます。
追加や置き換え・削除とはまた違った動きですが Object 操作の処理です。

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

                $('#btn_replaceWith').click( function () {
                    $('#div_replaceWith').replaceWith('<div class="div_change"><p>click replaceWith.</p></div>');
                });

                $('#btn_replaceAll').click( function () {
                    $('<div class="div_change"><p>click replaceAll.</p></div>').replaceAll('#div_replaceAll');
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin  : 10px;
                padding : 10px;
            }
            #div_replaceWith ,
            #div_replaceAll  {
                border  : 1px #000000 solid;
            }
            .div_change {
                border  : 1px #ff0000 solid;
            }
        --></style>
        
    </head>
    <body>

        <div id="buttonArea1">
            <button id="btn_replaceWith">replaceWith</button>
        </div>
        <div id="divArea1">
            <div id="div_replaceWith">
                <p>replaceWith Area</p>
            </div>
        </div>

        <div id="buttonArea2">
            <button id="btn_replaceAll">replaceAll</button>
        </div>
        <div id="divArea2">
            <div id="div_replaceAll">
                <p>replaceAll Area</p>
            </div>
        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに obuject の置き換えを行いました。

ボタンは2個用意してあります。
ボタンによって変更内容が変わります?

■replaceWith
 指定した Object の内容を、新たな内容に置き換えます。

■replaceAll
 指定した Object の内容を、新たな内容に置き換えます。

replaceWith と replaceAll は基本的に同じ動作ですね。

$('#div1').replaceWith('#div2');
$('#div2').replaceAll('#div1');

上記の例は同じ動きとなり ‘#div1’ を ‘#div2’ と置き換えるようです。
また、置き換えをする場合の変更内容は 既存の Object でも新たな HTML 要素に
することも可能です。

変わった動きとして、置き換える前の Object の行方が少し面白い動きをします。
以下の様に書いておくと Object の 内容を 変数に取り込む事が出来るようです。
個人的には使用するようなことも無いような気がするので確かめてはいませんが・・・

var data = $('#div1').replaceWith('#div2');

残しておく必要があれば、非表示にしておいて prependTo で移動させたほうが
いいような気もします。
何か意味はあるんでしょうが少し不思議な気もしますね・・・

まぁ、replaceWith か replaceAll のどちらかを覚えておけば大丈夫ですね。
個人的には replaceWith のほうが他の関数とも操作方法が似ているように思うので
replaceWith を使用することになりそうです。

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

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