プラグインの作成基礎

今回は Plugin の作成の基礎です。
最初は Blig の題材として、無名関数などの調べて見ようかと思っていたんですが
いろいろ調べていると、jQuery ではプラグイン作成をすることが多いようです。

折角なんで Plugin の基礎部分を確認してみました。

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

                $.fn.sumpleFunction = function ( option ) {

                    var defInit = {
                        text: 'Default Messeage'
                    };

                    var setMessage = $.extend( defInit, option );
                    $('#disp_div').html( setMessage.text );

                    return(this);

                };

            }(jQuery));

            $(function(){

                $('#click_btn1').click( function () {
                    var setText = $('#set_text').val();
                    $('#click_btn1').sumpleFunction({
                        text: setText
                    });
                });

                $('#click_btn2').click( function () {
                    $('#click_btn2').sumpleFunction({});
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="set_text" value="Input Text">
            <button id="click_btn1">Disp Input Text</button>
            <button id="click_btn2">Disp Default Text</button>
        </div>

        <div id="disp_area">
            <div id="disp_div"></div>
        </div>

    </body>
</html>

sample

sample に Button が 2個あります。
「Disp Input Text」を Click すると Text に入力された文字列が、
「Disp Default Text」を Click するとこちらで設定した内容が、
それぞれ表示される形になります。

今までは同じような処理をする場合、1つのファイルにまとめてはいるものの
Plugin の作成はしていなかったのですが、今後はまとめても良いかも・・・

なお、本来なら Plugin に関しては別ファイルに切り分けるのですが、
今回は1つのファイルにて作業しています。

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

外部スクリプトファイルの読み込み

今回は getScript です。
外部に Script をまとめて置きした、任意の状態の場合に読み込みを行う為によく使用します。

callback に対応していたりと意外と便利なのですが、レスポンシブ対応が増えたことにより
使用する機会が無くなりました。
それに伴い、当 Blog に記載する機会は余りないかなと思っていました。

しかし、既存サイトの改修を行う際に、Javascript で HTML の大きな切り替えが有りました。
その際に click に対して on を設定し直さないと正常に処理が続行できない問題が発生しました。

新規案件であれば考慮して作成するのですが「既存サイトの場合は基本的に現状維持」がモットーの為、
その処理が発生した場合に場合にのみ外部の Script を読み直すことにしました(笑)
折角なので備忘録的にも記載しておこうかと思います。

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

                $('#main_select').change( function() {

                    selectVal = $(this).val();
                    switch ( selectVal ) { 
                        case '1':
                            $.getScript("./sample_1645_script1.js");
                            break;
                        case '2':
                            $.getScript("./sample_1645_script2.js");
                            break;
                    }

                });

            });


        --></script>

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

            div {
                margin           : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <select id="main_select">
                <option >No Select</option>
                <option value="1">Run Sample1</option>
                <option value="2">Run Sample2</option>
            </select>
        </div>

    </body>
</html>

■「Run Sample1」で実行するJavascript

alert('sample1.js');

■「Run Sample2」で実行するJavascript

alert('sample2.js');

sample

sample の Select を変更すると、指定した外部の Script を実行します。

今回のサンプルでは「だから何・・・」といった状況なのですが、特定のタイミングの時に
だいぶスクリプトを読みたい時に便利です。
 #例えば API の Callback にて処理したい場合など

折角なので今後も色々な所で使って行きたいと思います。

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

セレクトボックスの表示内容

今回も備忘録的な内容です。
よくある処理ではありますが、select の操作した処理を取得する処理です。

普通の場合には「$(‘#main_selectoption:selected’)」と云う形で処理を
とるのですが、今回は他との兼ね合いによって $(this) を基本として
処理をありました、いつも通りの作業を使用としましたが・・・

・・・あれ、「$(this)」で括っているためその続きが書けません。
そのため、いつもの方法意外で対応する必要があるのかと思います。
今回はのための方法です。

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

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

                    $objO = $('#main_select option:selected');
                    $('#o_txt').html( $objO.html() );
                    $('#o_val').html( $objO.val() );

                    $objC = $(this).children(':selected');
                    $('#c_txt').html( $objC.html() );
                    $('#c_val').html( $objC.val() );

                });

            });


        --></script>

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

            div {
                margin           : 10px;
            }
            th, td {
                min-width        : 100px;
            }

        --></style>

    </head>
    <body>

        <div id="button_area">
            <select id="main_select">
                <option value="1">TextA</option>
                <option value="2">TextB</option>
                <option value="3">TextC</option>
                <option value="4">TextD</option>
                <option value="5">TextE</option>
            </select>
        </div>

        <div id="main_area">
            <table id="disp_text">
                <tr>
                    <th rowspan="2">$('#main_select option:selected')</th>
                    <th>text</th><td id="o_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="o_val"></td>
                </tr>
                <tr>
                    <th rowspan="2">$('this').children(':selected')</th>
                    <th>text</th><td id="c_txt"></td>
                </tr>
                <tr>
                    <th>value</th><td id="c_val"></td>
                </tr>
            </table>
        </div>

    </body>
</html>

sample

sample で Select を変すると選択した内容の Text と Value が表示されます。
今回は、取得の方法が異なるため2種類の Text と Value を表示しています。

この方法で今回は無事に値が取れましたが忘れるといけないので記録しておきます。

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

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 も選定の範囲に入れてもよさそうですね。

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

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 人がこの 投稿 は役に立ったと言っています。