タグ別アーカイブ: attr

クリックしたボタンによる Form の内容変更(2)

前回は Click する Button によって Form 内容の送信先を変更しました。
折角なので今回は、もう一つのよくあるパターンも記載しておきたいと思います。
 # 今回の内容は jQuery だけでは完了しませんので番外編となります。

今回の概要としては、一つの URL でいくつかの処理を分岐させて行う場合の処理です。
よくある使い方として「入力画面」「確認画面」「完了画面」を出しわける場合になります。
主に自作のメールフォームなどを作成する場合ですね。
 # 完了画面の場合は送る必要は無いありませんが、その辺は php などで処理して下さい(笑)

上記の場合、基本的には入力フォームの内容は変わらないことが多いです。
そのため、現在の画面状況をデータとして送る必要があります。
今回は「確認画面」での「戻る」「送信」のボタン制御を想定しています。

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

                $('button').click( function() {

                    var getID;
                        getID = $(this).attr('id');

                    var targetFrom;
                        targetFrom = $('#targetForm');

                    var mode;
                        mode = $('#formMode');

                    var targetURL;
                    switch ( getID ) {
                        case 'send':
                            mode.val('complete');
                            break;
                        case 'confirm':
                            mode.val('confirm');
                            break;
                        case 'input':
                        default:
                            mode.val('input');
                            break;
                    }

                    targetFrom.submit();

                });

            });


        --></script>

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

            div {
                margin     : 10px;
            }

            dt {
                margin-top : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <form id="targetForm" action="./sample_1523.html" method="get">
                <input type="hidden" id="formMode" name="mode" value="send">
                <dl>
                    <dt>Name</dt>
                    <dd><input type="text" name="sample1"></dd>
                    <dt>Title</dt>
                    <dd><input type="text" name="sample2"></dd>
                    <dt>Message</dt>
                    <dd><input type="text" name="sample3"></dd>
                </dl>
            </form>

            <div id="button_area">
                <button id="input">Back</button>
                <button id="send">Send Mail</button>
            </div>

        </div>
    </body>
</html>

sample

sample の中には Button が二つありますが、click した Button によって mode を
切り替えています。
 # 実際には php などで mode によって出力内容を作成する必要があります。

メールフォームの場合は「入力画面」に戻る場合も「完了画面」に進む場合にも同じ内容を
入力しないといけません。
間違いが発生することを避けるためにも Form に関しては一つにする必要があります。
その点を考慮すると意外と使用頻度が高いのでは無いかと思いますがいかがでしょうか。

なお、今回はわかりやすいように method を GET にしておりますが、
実際には POST 送信に変更する必要があります。

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

クリックしたボタンによる Form の内容変更

先日、同じ送信内容を「送信」「戻る」で違う URL に対して送れないかと聞かれました。
とりあえずは口頭で私がよく使う方法を伝えましたが念のため
念のため備忘録として記載しておきます。

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

                $('button').click( function() {

                    var getID;
                        getID = $(this).attr('id');

                    var targetFrom;
                        targetFrom = $('#targetForm');

                    var targetURL;
                    switch ( getID ) {
                        case 'google':
                            targetURL = 'https://www.google.co.jp';
                            break;
                        case 'yahoo':
                            targetURL = 'http://www.yahoo.co.jp';
                            break;
                        default:
                            break;
                    }

                    targetFrom.attr( 'action', targetURL ).submit();

                });

            });


        --></script>

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

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <form id="targetForm" action="" method="get">
                <input type="text" name="sample1">
                <input type="text" name="sample2">
                <input type="text" name="sample3">
            </form>

            <div id="button_area">
                <button id="google">google</button>
                <button id="yahoo">yahoo</button>
            </div>

        </div>
    </body>
</html>

sample

sample の button を click すると、それぞれのサイトに移動します。
実際の処理では action の内容を変更することで、「戻る」「送信」に
振り分ける形になります。

正直な話、同一の内容を From を2個作ってしまうのも手なのですが、
すでに CSS が設定済みの場合には、CSSを直す必要がないほうが
良いので今回みたいな方法を良く行います。

意外と便利なんですがどうでしょうか・・・

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

特定のページ内リンクでの処理の振り分け

先日ちょっとした相談を社内で頂いたので、その内容を記載したいと思います。
以下の状況のため特殊処理の項目だけ ページ内リンクの処理を停止したいとのことです。
 「ページ内リンクを複数設定しているが、そのうちの一つだけ特殊な動きをさせている」

実際は複数の plugin を使用しているうち、一つの処理だけメニュー用に表示を行うため
特定の href が特定のテキストの場合、スクロール用の処理を行いたく無いそうです。

<!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(){
                $('a[href^="#"]').click( function () {
                    var target = $(this).attr("href");
                    switch (target) {
                        case '#m-main':
                            alert('mein menu action');
                            break;
                        case '#m-sub':
                            alert('sub menu action');
                            break;
                        default:
                            alert('default action');
                            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">

            <div id="target_area">
                <a href="/" target="_blank">home</a>
                <a href="#m-main">main menu</a>
                <a href="#m-sub">sub menu</a>
                <a href="#top">default action 1</a>
                <a href="#bottom">default action 2</a>
            </div>

        </div>
    </body>
</html>

sample

sample の説明としては、aタグを click した際に、処理の切り分けを行います。
click した aタグがpage内Link(#)の場合だけ処理を行います。
この分岐内で、発動する処理をそれぞれ個別に記載しておき、function の呼び出しで
競合せずに対応可能です。

最近は凝った menu 用の plugin にも増えてきました。
そういった時に page scroll 系の Plugin に干渉してしまうようであればお試しください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 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(){

                function exeImageMove (id) {

                    $('#main_area .thumbnail').appendTo('#thumb_area');

                    backImage = 'none';
                    switch (id){
                        case 'thumb01':
                            backImage = 'image_jpeg01.jpg';
                            break;
                        case 'thumb02':
                            backImage = 'image_jpeg02.jpg';
                            break;
                        case 'thumb03':
                            backImage = 'image_jpeg03.jpg';
                            break;
                        case 'thumb04':
                            backImage = 'image_jpeg04.jpg';
                            break;
                    }
                    $('#back_area').css('background-image', 'url(' + backImage +')');

                    $('#' + id).appendTo('#main_area');

                }

                $('div#thumb_area div.thumbnail').click(function () {
                    exeImageMove($(this).attr('id'));
                });
                exeImageMove('thumb01');

            });

        --></script>

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

            div {
                margin              : 10px;
            }

            div#back_area {
                width               : 960px;
                height              : 350px;
                background-repeat   : no-repeat;
                background-position : center;
                background-size     : cover;
            }

            div.thumbnail {
                position            : relative;
                float               : left;
                width               : 220px;
                height              : 80px;
                background-repeat   : no-repeat;
                background-position : center;
                background-size     : cover;
                border              : solid 5px #0000ff;
            }

            div#thumb01 {
                background-image    : url('icon_jpeg09.jpg');
            }
            div#thumb02 {
                background-image    : url('icon_jpeg05.jpg');
            }
            div#thumb03 {
                background-image    : url('icon_jpeg17.jpg');
            }
            div#thumb04 {
                background-image    : url('icon_jpeg18.jpg');
            }

            div#thumb_area {
                width               : 960px;
                height              : 120px;
            }
            
            div#main_area div.thumbnail {
                float               : right;
                width               : 440px;
                height              : 160px;
                margin-top          : 30px;
                border              : solid 5px #000000;
            }

        --></style>

    </head>
    <body>

        <div id="back_area">
            <div id="thumb_area">
                <div id="thumb01" class="thumbnail"></div>
                <div id="thumb02" class="thumbnail"></div>
                <div id="thumb03" class="thumbnail"></div>
                <div id="thumb04" class="thumbnail"></div>
            </div>
            <div id="main_area"></div>
        </div>

    </body>
</html>

sample

sample の青色の枠に選択された thumbnail を click すると
選択した thumbnail を右下に拡大して表示すると共に背景の変更を行います。

どうでしょう、中々目を引くと思いますが・・・
thumbnail のサイズや背景をデザイン的に考慮するとそれなりに使えると思います。
デザイン的に綺麗にすることは前提ですが、誰かに使ってもらえるといいなぁ。

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 Titlle1   = 'Title1 Sample Title1';
                var Comment1  = 'Text1 Text1 Text1 Text1\n';
                    Comment1 += 'Text1 Text1 Text1 Text1\n';
                    Comment1 += 'Text1 Text1 Text1 Text1\n';
                    Comment1 += 'Text1 Text1 Text1 Text1\n';

                var Titlle2   = 'Title2 Sample Title2';
                var Comment2  = 'Text2 Text2 Text2 Text2\n';
                    Comment2 += 'Text2 Text2 Text2 Text2\n';
                    Comment2 += 'Text2 Text2 Text2 Text2\n';
                    Comment2 += 'Text2 Text2 Text2 Text2\n';

                var Titlle3   = 'Title3 Sample Title3';
                var Comment3  = 'Text3 Text3 Text3 Text3\n';
                    Comment3 += 'Text3 Text3 Text3 Text3\n';
                    Comment3 += 'Text3 Text3 Text3 Text3\n';
                    Comment3 += 'Text3 Text3 Text3 Text3\n';

                $('button').click( function() {

                    // init
                    $('#fTBox').val('');
                    $('#fTArea').val('');

                    // set
                    switch ($(this).attr('id')) {
                        case 'button1':
                            $('#fTBox').val(Titlle1);
                            $('#fTArea').val(Comment1);
                            break;
                        case 'button2':
                            $('#fTBox').val(Titlle2);
                            $('#fTArea').val(Comment2);
                            break;
                        case 'button3':
                            $('#fTBox').val(Titlle3);
                            $('#fTArea').val(Comment3);
                            break;
                        default:
                            break;
                    }
                });

            });

        --></script>

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

            div {
                margin          : 10px;
                padding         : 10px;
            }

            #form_area {
                width           : 420px;
                border          : 1px solid #000000;
            }

            #fTBox {
                width           : 400px;
            }

            #fTArea {
                width           : 400px;
                height          : 200px;
            }

        --></style>

    </head>

        <div id="disp_area">
            <h1>Button Area</h1>
            <button id="button1">Click Template 1 Load!!!</button>
            <button id="button2">Click Template 2 Load!!!</button>
            <button id="button3">Click Template 3 Load!!!</button>
        </div>

        <div id="form_area">
            <h1>Form Area</h1>
            <input id="fTBox" type="text" value=""><br />
            <textarea id="fTArea"></textarea>
        </div>

    </body>
</html>

sample

spmple には button が3つ存在しています。 
button を click することで Form の 入力欄にテンプレートの内容を追加します。

今回は、一度消して別の内容を入力していますが、ちょと変更すれば追記も出来るかなと思います。
毎回入力はしないと行けないけれど、基本は大体パターンが決まっている時などに如何でしょうか。

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

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