タグ別アーカイブ: preventDefault

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

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

ダイアログの表示

今回はダイアログ表示についてです。

それほど何か重要と云うのではありませんが、標準のダイアログでは
ちょっと寂しいという方に向けて対応方法です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

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

            $(function(){

                $('#input_submit').click( function( eObj ) {
                    eObj.preventDefault();
                    $('#dialog_area').fadeIn('normal');
                });

                $('#input_yes').click( function() {
                    $('#form_main').submit();
                });

                $('#input_no').click( function() {
                    $('#dialog_area').fadeOut('normal');
                });

            });

        --></script>

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

            #main_area {
                padding          : 10px;
            }

            #dialog_area {
                width            : 100%;
                height           : 100%;
                position         : absolute;
                background-color : rgba(48, 48, 48, 0.7);
                display          : none;
            }

            #dialog {
                width            : 200px;
                height           : 120px;
                margin           : 100px auto;
                background-color : #f0f0f0;
            }

            #dialog p {
                height           : 60px;
                padding          : 10px;
            }

            #dialog div {
                padding          : 5px;
                margin           : 0 auto;
                text-align       : center;
            }

        --></style>

    </head>
    <body>

        <div id="dialog_area">
            <div id="dialog">
                <p>
                    Please select a check post-processing the wording .
                </p>
                <div>
                    <input id="input_no" type="button" value="No Submit">
                    <input id="input_yes" type="button" value="Yes Submit">
                </div>
            </div>
        </div>

        <div id="main_area">
            <div id="input_area">
                <form id="form_main" method="gett">
                    <input type="text" name="t" value="Sample Input">
                    <input id="input_submit" type="submit" value="Check">
                </form>
            </div>
        </div>

    </body>
</html>

sample

sample の button を click すると dialog が表示されます。
「No」を click した際には dialog が非表示となり、
「Yes」を click した際には実際の submit の処理を行います。

実際にはもっとデザインを設定して頂く必要はありますが、
標準な dialog では寂しい、という場合には十分ではないでしょうか。

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

通常実行される処理をキャンセルする

今回は 通常実行される処理をキャンセルする方法です。

たとえば a タグなどをクリックすると、通常は href で指定した URL に移動します。
これを jQuery にてキャンセルする方法です。

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

                // event cansel (return false)
                $('#link_2').click(function(eObj){
                    alert('event return false');
                    return false;
                    alert('event cancel');
                });
                
                // event cansel
                $('#link_3').click(function(eObj){
                    alert('event preventDefault');
                    eObj.preventDefault();
                    alert('event cancel');
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            #linkArea {
                margin : 10px;
            }
            #linkArea div {
                margin : 10px;
            }
        --></style>
        
    </head>
    <body>

        <div id="linkArea">
            <div>
                <p>click move url ( http://jsource.nakweb.com/ )</p>
                <a href="http://jsource.nakweb.com/" id="link_1" /> click link 1 </a><br />
            </div>
            <div>
                <p>click move cancel (return false)</p>
                <a href="http://jsource.nakweb.com/" id="link_2" /> click link 2 </a><br />
            </div>
            <div>
                <p>click move cancel (preventDefault)</p>
                <a href="http://jsource.nakweb.com/" id="link_3" /> click link 3 </a><br />
            </div>
        </div>

    </body>
</html>

sample

sample ページにはリンクが三つあります。
どのリンクにも href は http://jsource.nakweb.com/ を指定してあります。

一つ目のリンクはクリックすると通常通り別ページに移動します。

二つ目は return false を行うことでページ移動をキャンセルしています。
return false は以前から使用していましたが、event 自体を終了してしまいます。
このため、継続して何かを実行したい場合、retuen false は処理の最後に記述することになります。

三つ目は jQuery の preventDefault メソッドを使用してページ移動をキャンセルしています。
preventDefault メソッドは「ブラウザの event をキャンセルする」処理となります。
そのため、ページ移動をキャンセルした後、何の制限もなく jQuery の処理が続けられます。
また、checkbox をクリックした場合に check される処理をキャンセルすることもできるようです。

今後は preventDefault メソッドを使用して行きたいですね。

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

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