月別アーカイブ: 2015年6月

パーセントでの背景表示

今回は仕事で使うかも知れないため事前のテストです。
背景に指定したパーセントで色を塗る処理です。
それではやってみます。

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

                maxWidth = $('#front_area').width();
                $('#select_box').change( function(){
                    percentNum = $('#select_box').val();
                    $('#percent').text(percentNum);
                    $('#color_bar').css({'width' : percentNum + '%'});
                });

                for (cnt = 0; cnt <= 100; cnt = cnt + 1) {
                    $('#select_box').append('<option value="' + cnt + '">' + cnt + '</option>');
                }

            });

        --></script>

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

            #main_area {
                background-color : #cccccc;
                height           : 100px;
                width            : 500px;
                position         : relative;
            }

            .bar {
                position         : absolute;
                height           : 50px;
                width            : 450px;
            }

            #back_bar {
                background-color : #ffffff;
                left             : 25px;
                margin           : 20px auto;
            }

            #color_bar {
                background-color : #ffcccc;
                width            : 0;
            }

        --></style>

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

            <div id="main_area">
                <p><span id="percent">0</span>%</p>
                <div class="bar" id="back_bar">
                    <div class="bar" id="color_bar"></div>
                </div>
            </div>

            <div id="select_area">
                <select id="select_box"></select>
            </div>

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

sample

sample の selectbox にて数値を選んでもらうと指定した数値によって
div の背景の色を変更できます。

実際には他の要素が入るのでもう少し手をかける必要はあります。
まぁ、とりあえずはこんな感じで問題は無いかと思います。
細かい部分は業務で内容を見ながらやる必要がありますね。

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

動画の読込(番外編)

今回は備忘録として残しておきます。
動画の表示について業務で失敗したので、改めて間違えないようにです。
そのため今回は sample も無しです。

<video id="movie" src="http://~~~/sample.mov" autoplay loop></video>
    $('#movie').addEventListener('canplaythrough', function(){
        実行ファンクション();
    }, true);

上記の様な形で movie を表示している div があります。
この div(movie) に対して発生する特定のイベントが取得したいのですが
実行ファンクションが動作してくれません。

    document.getElementById('movie').addEventListener('canplaythrough', function(){
        実行ファンクション();
    }, true);

色々調べたんですが上記の形に落ち着きました。
どうやら幾つかのものに関しては jQuery だけでは操作できないようですね。
.get(0) などを使用して無理やり jQuery で操作できるようにすることも可能だそうですが、
余り利点も無いようなので DOM での操作を使用と思います。

それにしても 気をつけないといけませんね。
jQuery で操作できないものは一覧でもあれば良いですね。

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

jQueryの読み込み先をCDNに変更する

今さらなのか・・・、とも思いますが今回は CDN についてです。
便利なものですね。

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

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

    </head>
    <body>

        <input type="button" onclick="$('#disp_box').show();" value="Show">
        <input type="button" onclick="$('#disp_box').hide();" value="Hide">
        <input type="button" onclick="$('#disp_box').fadeIn('normal');"  value="Fade In">
        <input type="button" onclick="$('#disp_box').fadeOut('normal');" value="Fade Out">

        <div id="disp_box">Display Text Area</div>

    </body>
</html>

sample

sample 自体は何の変哲もない jQuery ですが、今回は jQuery を外部サイトから
取得するようにしました、CDN(Contents Delivery Network)と云うらしいですね。
今回は公式の「jQuery CDN」を使用しています。
他にも「Google Hosted Libraries」もあるようですね。

メリット/デメリットはあるようですが、通常の業務で使う分には
「Google Hosted Libraries」のほうがサポート範囲が広かったり、
IE 6/7/8 への対応をしていたりと機能が充実している様です。

まぁ、当サイトでは古いIEなどの対応を想定は全くしていない(笑)ので
本家の「jQuery CDN」を継続して利用していきたいと思います。

難点があるとすればローカルでの作業時に、jQuery の読込が出来ないようです。
テストするにはちょっと不便ですね。

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

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

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