タグ別アーカイブ: click

一覧の「もっとみる」ボタン

今回は一覧の「もっと見る」ボタンです。
実際のデータ取得の方法は ajax などを使用するなどの対応が必要ですが、
とりあえず 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(){

                $('#button').click( function () {
                    $('div.areaDays').last().clone().appendTo('#disp_area');
                    setDateTime();
                });

                function setDateTime () {
                    var now   = new Date();
                    var nowDY = now.getFullYear();
                    var nowDM = now.getMonth() + 1;
                    var nowDD = now.getDate();
                    var nowTH = now.getHours();
                    var nowTM = now.getMinutes();
                    var nowTS = now.getSeconds();
                    var objDays = $('div.areaDays').last();
                    objDays.find('.dateY').html(nowDY);
                    objDays.find('.dateM').html(nowDM);
                    objDays.find('.dateD').html(nowDD);
                    objDays.find('.timeH').html(nowTH);
                    objDays.find('.timeM').html(nowTM);
                    objDays.find('.timeS').html(nowTS);
                }

                // init
                setDateTime();

            });

        --></script>

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

            div {
                margin           : 10px;
            }

            #button_area {
                clear            : both;
            }

            button {
                margin           : 5px;
            }

            div.areaDays {
                clear            : both;
            }
            div.areaDays dl {
                float            : left;
                margin           : 10px;
                padding          : 10px;
            }
            div.areaDays dl.areaDate {
                float            : left;
                background-color : #ffcccc;
                width            : 200px;
            }
            div.areaDays dl.areaTime {
                float            : left;
                background-color : #ccccff;
                width            : 200px;
            }
            div.areaDays dt {
            }
            div.areaDays dd {
                padding-bottom   : 10px;
                padding-left     : 10px;
            }

        --></style>

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

            <div id="disp_area">

                <div class="areaDays">
                    <dl class="areaDate">
                        <dt>Date Year</dt>
                        <dd class="dateY">YEAR</dd>
                        <dt>Date Month</dt>
                        <dd class="dateM">MONTH</dd>
                        <dt>Date Day</dt>
                        <dd class="dateD">DAY</dd>
                    </dl>
                    <dl class="areaTime">
                        <dt>Time Hour</dt>
                        <dd class="timeH">HOUR</dd>
                        <dt>Time Minute</dt>
                        <dd class="timeM">MINUTE</dd>
                        <dt>Time Second</dt>
                        <dd class="timeS">SECOND</dd>
                    </dl>
                </div>

            </div>

            <div id="button_area">
                <button id="button">more</button>
            </div>

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

sample

sample の button を click すると現在時刻が追加されます。
実際のデータ取得は別処理にはなりますが追加していくロジックとしては
上出来ではないでしょうか。

また、一回に追加する件数を増やす場合も loop 処理をすれば行けると思います。
実際に全てのデータをとっても良いのですが・・・
やはりサーバーへの負荷は少しでも下げたいですからね。

何か案件か決まっている訳ではないのですが、何かの際には使ってみたいですね。

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

                $('#d_set').click(function() {
                    $('#disp_data').data('set_value', $('#input_data').val());
                    $('#input_data').val('')
                })
                
                $('#d_add').click(function() {
                    $('#disp_data').data('set_value', $('#disp_data').data('set_value') + ' ' + $('#input_data').val());
                    $('#input_data').val('')
                })

                $('#d_remove').click(function() {
                    $('#disp_data').removeData('set_value');
                    alert('Data Remove OK!');
                })

                $('#d_disp').click(function() {
                    $('#disp_data').empty().text($('#disp_data').data('set_value'));
                })

            });

        --></script>

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

            div {
                margin       : 10px;
            }

            button {
                margin-right : 5px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div>
                <h1>Data Input</h1>
                <input id="input_data" />
                <button id="d_set">Data Set</button>
                <button id="d_add">Data Add</button>
            </div>
            <div>
                <h1>Data Disp</h1>
                <button id="d_disp">Data Disp</button>
            </div>
            <div id="disp_data"></div>
            <div>
                <h1>Data Remove</h1>
                <button id="d_remove">Data Remove </button>
            </div>
        </div>

    </body>
</html>

sample

sample の入力欄に文字を入力して「Data Set」の button をクリックすることで
data を object のに紐づけることができます。

その時点では紐づけした data は表示されていませんが「Data Disp」の button を
click することで紐づけされた data を表示されることができます。

今回の内容は個人的には少し嬉しかったりします。
今まではとりあえず attr などで適当な名前を付けて設定していましたが
余り綺麗ではないと感じていました。

今回からは変な値を attr する必要も無いので安心できます。
ちなみに、配列でのデータの登録も出来るので非常に安心です。
ちょっと気になるのは、実際はどこに保存されているのかということでしょうか・・・

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

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

ループするサムネイル

今回はサムネイル表示についてループ処理させてみました。
意外と使うことがありそうです。
plugin を使用する必要も無い場合などに使えるかと思います。

<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 loopWidth = 220;

                $('#loop_area div').clone().appendTo('#loop_area');

                $('#div_prev').click(function() {
                    $('#loop_area').stop().animate({left:'-' + loopWidth + 'px'}, 'slow', 'linear', function() {
                        $('#loop_area div:first-child').appendTo('#loop_area');
                        $('#loop_area').css({left:0});
                    });
                });

                $('#div_next').click(function() {
                    $('#loop_area div:last-child').prependTo('#loop_area');
                    $('#loop_area').css({left:'-' + loopWidth + 'px'});
                    $('#loop_area').stop().animate({left:'' + 0 + 'px'}, 'slow', 'linear', function() {
                    });
                });

            });

        --></script>

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

            #main_area div {
                float            : left;
            }

            #thumb_area {
                top              : 0px;
                left             : 0px;
                width            : 660px;
                height           : 80px;
                overflow         : hidden;
                position         : relative;
            }

            #loop_area {
                width            : 2200px;
                position         : absolute;
            }

            #loop_area div {
                float            : left;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="div_prev" class="thumb_move">
                <span>&lt;&lt;</span>&nbsp;
            </div>
            <div id="thumb_area">
                <div id="loop_area">
                    <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                </div>
            </div>
            <div id="div_next" class="thumb_move">
                &nbsp;<span>&gt;&gt;</span>
            </div>
        </div>

    </body>
</html>

sample

sample ではサムネイルが何枚か並んでいます。
左右の矢印を click するとサムネイルが動きます。
サムネイルは 10 枚ですが押し続けることで永遠に ループします。

今回は簡単な画像を使用したサムネイルをループさせて見ました。
実際には複数毎に移動させることなども可能ですね。
枚数が増えた時には複数枚単位での移動を試みていても面白いと思います。

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

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