タグ別アーカイブ: extend

プラグインのファイル分割

前回に引き続きプラグインに関してです。
この Blog では見やすさを優先するため File を分けることは余り無いと思います。
まぁ、とりあえずは今回のみかもしれませんが調べてみたいと思います。

■ HTML File

<!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 src="./jquery.sample1663.js"></script>

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

            $(function(){

                $('#click_btn1').sumpleFunction({
                    disp_id    : 'disp_div',
                    input_id   : 'input_text',
                    question   : 'to continue ?',
                });

                $('#click_btn2').sumpleFunction({
                    disp_id    : 'disp_div',
                    question   : 'clear?',
                });

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            div#disp_area {
                border           : 1px #000000 solid;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="input_text" value="Please enter a message.">
            <button id="click_btn1">Input Disp Text</button>
            <button id="click_btn2">Clear Disp Text</button>
        </div>

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

    </body>
</html>

■ Plugin File【jquery.sample1663.js】

(function($){

    $.fn.sumpleFunction = function ( option ) {

        this.click( function( eObj ) {

            // Set Init
            var defInit = {
                disp_id  : '',
                input_id : '',
                question : 'continue the process ?',
                message  : '',
            };
            var setInit = $.extend( defInit, option );

            // Confirm Check
            if ( !confirm( setInit.question ) ) {
                eObj.preventDefault();
                return this;
            }

            // Message Set
            if ( setInit.input_id.length  ) {
                setInit.message = $('#' + setInit.input_id).val();
            }

            // Message Disp
            $('#' + setInit.disp_id).html( setInit.message );

            return this;

        });

    };

}(jQuery));

sample

sample の「Input Disp Text」を Click すると処理を進めるかの Dialog が出ます。
「Ok」を押すことで Text に入力された内容が表示されます。
Plugin の処理を利用して Crear の処理も作成してあります(笑)
Plugin の処理を流用すると中々便利にはなりそうですね。

ちなみに Click と Plugin の発動をどのようにすれば良いか悩んでいました、
とりあえず今回のような処理方法で良いのかなぁ。

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

プラグインの作成基礎

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

情報のユニーク化

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