タグ別アーカイブ: clone

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

今回は一覧の「もっと見る」ボタンです。
実際のデータ取得の方法は 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 人がこの 投稿 は役に立ったと言っています。

ループするサムネイル

今回はサムネイル表示についてループ処理させてみました。
意外と使うことがありそうです。
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 人がこの 投稿 は役に立ったと言っています。

ページの無限ループ (2)

前回はページの無限ループを行いました。
今回は同じような内容に挑戦してみようかと思います。
内容は横の自動無限ループです。

<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 = $('#main_area').children('span').width();
                    $('#main_area span').clone().appendTo('#main_area');

                function execSideLoop() {
                    $('#main_area').css({left:'0'});
                    $('#main_area').stop().animate({left:'-' + loopWidth + 'px'}, 25000, 'linear', execSideLoop);
                };

                execSideLoop();

            });

        --></script>

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

            #main_area {
                white-space : nowrap;
                position : absolute;
                top : 0px;
            }

            #main_area span {
                float : float;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">

            <div id="main_area">
                <span>
                    text00 text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12 text13 text14 text15 text16 text17 text18 text19 text20 text21 text22 text23 text24 text25 text26 text27 text28 text29 text30 text31 text32 text33 text34 text35 text36 text37 text38 text39 text40 text41 text42 text43 text44 text45 text46 text47 text48 text49 text50
                </span>
            </div>

        </div>

    </body>
</html>

sample

sample では ページを左に自動スクロールをしています。

この機能自体は優秀な plugin が多くありますので、実際の Webサイトを作成することは無いと思います。
まあ、そんな実際には作成することのない機能について、どうやれば再現できるかの勉強ですね。
実際に触ってみると色々と勉強になるものですね。

出来た内容は往年の MARQUEE ですね(笑)
実際には文字だけでは使い道は無いですが、画像などを使用しないと華がないなぁ。

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"><!--

            jQuery(function() {

                function timeTable(mainID, appendID, setHS, setMS, setHE, setME) {
                    // Set Time
                    var timeS = ( (setHS   * (360 / 12)) + (setMS * ((360 / 12) / 60)) );
                    var timeE = ( (setHE   * (360 / 12)) + (setME * ((360 / 12) / 60)) );
                    // Main
                    for (var step = timeS; step <= timeE; step = (step + 0.1)) {
                        jQuery('#' + mainID).clone().attr('id', '').appendTo('#' + appendID).css({transform:'rotateZ(' + step + 'deg)', visibility:'visible'});
                    }
                };
                
                // clock 1
                timeTable('line_base1', 'clock_area1', 8, 15, 12, 0);
                // clock 2
                timeTable('line_base2', 'clock_area2', 10, 0, 12, 0);
                timeTable('line_base2', 'clock_area2', 3, 30,  7, 30);
                // clock 3
                timeTable('line_base3', 'clock_area3', 2, 45,  5, 15);
                timeTable('line_base3', 'clock_area3', 7, 30,  11, 0);
                // clock 4
                timeTable('line_base4', 'clock_area4', 9, 00, 12, 0);
                timeTable('line_base4', 'clock_area4', 1, 0,  3, 30);
                timeTable('line_base4', 'clock_area4', 4, 0,  6, 30);

            });

        --></script>

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


            .disp_clock {

                margin-top       : 100px;
                margin-left      : 200px;

                width            : 150px;
                height           : 150px;

            }


            .common_line {

                position                 : absolute;

                width                    : 1px;
                height                   : 75px;

                visibility               : hidden;

                -webkit-transform-origin : center 100%;
                -moz-transform-origin    : center 100%;
                -ms-transform-origin     : center 100%;
                -o-transform-origin      : center 100%;
                transform-origin         : center 100%;

            }


            .disp_line1 {
                background-color : #ff0000;
            }

            .disp_line2 {
                background-color : #00ff00;
            }

            .disp_line3 {
                background-color : #0000ff;
            }

            .disp_line4 {
                background-color : #cccccc;
            }


        --></style>

    </head>

        <div id="clock_area1" class="disp_clock">
            <div id="line_base1" class="common_line disp_line1"></div>
        </div>

        <div id="clock_area2" class="disp_clock">
            <div id="line_base2" class="common_line disp_line2"></div>
        </div>

        <div id="clock_area3" class="disp_clock">
            <div id="line_base3" class="common_line disp_line3"></div>
        </div>

        <div id="clock_area4" class="disp_clock">
            <div id="line_base4" class="common_line disp_line4"></div>
        </div>

    </body>
</html>

sample

spmple を表示するとアナログ時計の形式で時間帯を表示出来るようにしました。
一つの時計に複数の時間帯を設定出来るようにしています。
午前午後に分けて表示したいただ事も可能です。

画像を使用していないので数字を変更するだけで時間帯の変更が可能です。
社内の人間が「アナログ時計」を見て「こういったことができるか」と云われて対応してみました。
「他にも出来ればいいな」と思っている人がいれば使っていただければと思います。

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

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

オブジェクトの削除/コピー

ここ最近は Object の追加と移動でした。

追加と移動ができるなら削除も必要です。
今回は Object の削除する方法です。

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

                $('#btn_remove').click( function () {
                    $('#div_remove').remove();
                });

                $('#btn_empty').click( function () {
                    $('#div_empty').empty();
                });

                $('#btn_clone').click( function () {
                    $('#div_clone .data').clone().appendTo('#div_clone');
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
            div {
                margin  : 10px;
                padding : 10px;
            }
            #div_remove ,
            #div_empty  ,
            #div_clone  {
                border  : 1px #000000 solid;
            }
        --></style>
        
    </head>
    <body>

        <div id="buttonArea1">
            <button id="btn_remove">remove</button>
        </div>
        <div id="divArea1">
            <div id="div_remove">
                <p>remove Area</p>
            </div>
        </div>

        <div id="buttonArea2">
            <button id="btn_empty">empty</button>
        </div>
        <div id="divArea2">
            <div id="div_empty">
                <p>empty Area</p>
            </div>
        </div>

        <div id="buttonArea3">
            <button id="btn_clone">clone</button>
        </div>
        <div id="divArea3">
            <div id="div_clone">
                <p class="title">title Area</p>
                <p class="author">author Area</p>
                <p class="data">data Area</p>
            </div>
        </div>

    </body>
</html>

sample

sampleページでは ボタンを click したときに obuject の削除ができるようになりました。
また、ちょっと特殊な事かもしれませんがオブジェクトのコピーもできるようにしました。

ボタンは3個用意してあります。
ボタンによって変更内容が変わります。

■remove
 指定した Object 自体を削除します。

■empty
 指定した Object の内容を削除します。
 指定のオブジェクト自体は削除しません。

■clone
 指定した Object をコピーします。
 あくまでもコピーのため、class 指定や id 要素もそのままコピーします。
 そのため、id をコピーする場合は少し注意が必要です。
 また、対象が複数ある場合、対象全てをコピーします。

削除は色々使い道はあるかな、ただ通常は非表示にする事で対応可能な気もします。
form での情報送信時には色々使えるかもしれませんね。

clone のほうは色々と使い道がありそうですね。
同じ内容の項目を作る時はテンプレートを指定しておけば楽にコピーができます。
こんどから使ってみようかな。

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

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