タグ別アーカイブ: length

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

前回に引き続きプラグインに関してです。
この 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 人がこの 投稿 は役に立ったと言っています。

多次元配列のデータ作成

今回は他次元配列のデータ作成に関する覚書です。
いつも他次元配列を使用するときには Key の値を ID などにします。
ただ今回はある都合で連番にする必要がありました。
ではやってみます。

<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 arrCategory = new Array('category_1', 'category_2', 'category_3', 'category_4');
                var arrWorker = new Array();
                    arrWorker['category_1'] = new Array();
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_1';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_2';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_3';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_4';
                    arrWorker['category_1'][arrWorker['category_1'].length] = 'data_1_5';
                    arrWorker['category_2'] = new Array();
                    arrWorker['category_2'][arrWorker['category_2'].length] = 'data_2_1';
                    arrWorker['category_2'][arrWorker['category_2'].length] = 'data_2_2';
                    arrWorker['category_2'][arrWorker['category_2'].length] = 'data_2_3';
                    arrWorker['category_3'] = new Array();
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_1';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_2';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_3';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_4';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_5';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_6';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_7';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_8';
                    arrWorker['category_3'][arrWorker['category_3'].length] = 'data_3_9';
                    arrWorker['category_4'] = new Array();
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_1';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_2';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_3';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_4';
                    arrWorker['category_4'][arrWorker['category_4'].length] = 'data_4_5';

                $.each(arrCategory, function(){
                    $('#disp_data').append('<h1>' + this + '</h1>\n')
                    $.each(arrWorker[this], function(index) {
                        $('#disp_data').append('<p>' + index + ' : ' + this + '</p>\n')
                    });
                });

            });

        --></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_data"></div>
        </div>

    </body>
</html>

sample

sample では2次元配列の内容を表示しています。
本来は php でデータ構築するんですが当ブログでは配列の内容は固定値です。
表示用の sample には良くないな~、とは思います。
まぁ、あくまで覚書なので良いでしょう。

本来は push で行けると思うんですが、連想配列は無理なんでしょうか。
とりあえず今回の方法「変数名[‘親配列’].length」に落ち着きました。
それぞれの親配列毎に変数を持たせるのも無駄なのでこんな形にして見ました。
普段は問題がないのですが、今後使わないとも限らないので記載しておきます。

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

                max_length = 10;
                $('#input_text').keyup(function () {

                    wText = $(this).val();
                    if (max_length < wText.length) {
                        wText = wText.slice(0, max_length) + '...';
                    }

                    $('#disp_text').empty().append(wText);
                });

            });

        --></script>

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

            #main_area {
                margin              : 10px;
            }

            #input_text {
                width               : 400px;
            }

            #disp_text {
                width               : 400px;
                background-color    : #ccffcc;
                padding             : 2px;
                margin-top          : 10px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <input type="text" id="input_text"></textarea>
            <div id="disp_text"></div>
        </div>

    </body>
</html>

sample

sample で text に文字列を入力すると、10文字以上になった場合に
省略表示を行い、末尾に「…」を追加して表示します。

普段は php で文字列の処理を行っていますが、実際に jQuery で文字列の
切り取りができれば、以前の記事なども対応できます。
意外と色々できそうですね。

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

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

入力内容の確認処理

今回は textbox の入力内容チェックの方法です。
それ程難しい処理ではありませんが頻繁に使うので備忘録的に書いておきます。

<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 txtVal;
                $('#submit_check').click( function(eObj) {
                    eObj.preventDefault();

                    txtVal = $('#text_check').val();
                    if (txtVal == '') {
                        alert('Error : No input');
                        return;
                    } else if (!(txtVal.match(/^[0-9]+$/))) {
                        alert('Error : No numeral');
                        return;
                    } else if (txtVal.length > 2) {
                        alert('Error : Max Lenght Over');
                        return;
                    }

                    $('#form_check').submit();

                });

            });

        --></script>

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

        --></style>

    </head>

        <div id="form_area">
            <form action="" method="get" id="form_check">
                <input type="text" name="textbox" id="text_check">
                <input type="submit" value="send" id="submit_check">
            </form>
        </div>

    </body>
</html>

sample

spmple には textbox と button があります。
今回は以下の条件によってエラーを表示するか判断しています。
 ・数字のみの入力可能
 ・1 ~ 99 までの範囲が入力可能
 ・未入力はエラー
エラーの場合は submit 処理を行いません。

今回の処理として特に難しい処理はしていません。
あえて注意が必要な点として「いったん submit を無効にする」点です。

「問題がなければ実行する」はそれほど難しいものではありません。
ですが既存サイトの場合、システムを変更出来ない場合もよくあります。
そのような既存サイトに入力チェック処理を追加する時には今後も使うことになるかと思います。

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

               var maxCnt  = 5;
               var textCnt = 0;
               
               $('#maxCnt').html(maxCnt);
               $('#countDown').html(maxCnt);

               $('input[type=text]').bind('keydown keyup keypress change',function(){

                   // Get Text Count
                   textCnt = $(this).val().length;

                   // Disply Input Count
                   $('#textCnt').html(textCnt);
                   $('#countDown').html(maxCnt - textCnt);

                   // Text Length Over
                   if (maxCnt < textCnt) {
                       fontColor = "#ff0000";
                   } else {
                       fontColor = "#000000";
                   }
                   $('#textCnt').css('color', fontColor);
                   $('#countDown').css('color', fontColor);

               });
               

               $('input[type=button]').click( function(){
                   if (textCnt > maxCnt) {
                       alert('NG : Text Length Orver');
                       return false;
                   } else if (textCnt == 0) {
                       alert('NG : Not Text Input');
                       return false;
                   } else {
                       alert('OK : Move Page');
                       window.location = './sample_263.html';
                   }
               });
               
            });

        --></script>

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

            .countArea {
                font-weight : bold;
            }

        --></style>
        
    </head>
    <body>

        <div id="input_area">
            <p>
                Max Text Count  : <span class="countArea" id="maxCnt">0</span><br />
                Now Text Count  : <span class="countArea" id="textCnt">0</span><br />
                Text Count Down : <span class="countArea" id="countDown">0</span><br />
            </p>
            <input type="text" />
            <input type="button" value="check" />
        </div>

    </body>
</html>

sample

入力文字数がオーバーすると、入力できなくすることも出来ますが、
今回は入力文字数のチェックのみを行っています。

他の所からコピペする場合には、この方が便利ですね。
チェックボタンを押すと、入力文字数を確認して入力文字数の正誤も判定できます。

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

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