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

スピナー付き入力欄

今回は数字の上下を操作できる input 項目です。
実際には HTML5 から input の type=’number’ で同じことはできるのですが、
ブラウザによって挙動が変わるため多少なりとも不便です。

<input type="number">

それであれば jQuery UI で行おうと云う意図です。

<!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 src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

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

            $(function(){

                $('#numberInput').spinner();

            });


        --></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="input_area">
                <input id="numberInput">
            </ul>

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

sample

sample に関して特に補足は不要ですね。
実際に難しい処理は行ってはいません。

また、見栄えは CSS にて対応できますし、特にこだわりがなければ
標準の CSS でも結構きれいです。

現時点では type=’number’ だとブラウザごとに挙動が変わるよりは
良いのかなと思いますが皆さんはどうでしょうか。

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

カレンダーからの日付取得

jQuery に関しては Version 3 も発表されていますが、最近の流れ的には
段々と jQuery を使わない方向に流れているようですね・・・
直近で編くする積りはありませんが他の内容も考える時期なんでしょうか。

さて、今回は相談を受けた案件です。
カレンダーから日付を所得したいとのものでした。

<!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 src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

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

            $(function(){

                $('#dateArea').datepicker({
                    dateFormat  : 'yy/mm/dd',
                    dayNamesMin : ['日', '月', '火', '水', '木', '金', '土'],
                    monthNames  : ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
                });

            });


        --></script>

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

            div {
                margin     : 10px;
            }

            #dateArea {
                width      : 80px;
            }

        --></style>

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

            <div id="input_area">
                <input type="text" id="dateArea" readonly="readonly">
            </ul>

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

sample

sample で textbox を click すると calendar が表示されます。
calendar から日付を選択することで選択した日付が textbox に入力されます。

実際には jQuery UI の calendar ですので非常に簡単に実行できます。
なお、一般の人向けに公開するのであれば普通に入力できると、こちらが想定している
Format と違う場合がありますから textbox には readonly を設定しておくことを
お勧めします。

ちなみに、datepicker に以下の内容をいれることで callback での処理も
行うこともできます。

    onSelect:function( data ){
        alert(data + 'が選択されました。');
    }

CSS をしっかりしないと見た目はひどいですが、jQuery であれば標準でも
結構きれいです。
特にこだわりがなければ早くて便利で素晴らしいですね。

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

                var objArea;
                    objArea = $('ul#image_area li');

                // Data Set
                minCnt    = 1;
                maxCnt    = objArea.length;
                setTimer  = 1500;  // ms
                minSizeX  = 80;
                minSizeY  = 220;
                sizeRate  = 1.5;
                maxSizeX  = (minSizeX * sizeRate);
                maxSizeY  = (minSizeY * sizeRate);

                objArea.hide();
                function moveImage( cnt ) {

                    // Init
                    objTarget = $('ul#image_area li:nth-child(' + cnt + ')');
                    objArea.fadeOut( setTimer );

                    // Image Move
                    objTarget.find('img')
                             .css({ 'width':  minSizeY + 'px', 'height': minSizeX + 'px' })
                             .animate({ 'width': maxSizeY + 'px', 'height': maxSizeX + 'px' }, setTimer);
                    objTarget.fadeIn( setTimer )

                    // Next Image
                    if ( cnt >= maxCnt ) {
                        cnt = minCnt;
                    } else {
                        cnt = cnt + 1;
                    }
                    $(window).delay( setTimer ).queue( function () {
                        moveImage( cnt );
                        $(this).dequeue();
                    });

                }

                // Move Start
                moveImage( minCnt );

            });

        --></script>

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

            div {
                margin     : 10px;
            }

            #image_area li {
                position   : absolute;
            }

        --></style>

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

            <ul id="image_area">
                <li><img src="./icon_jpeg01.jpg"></li>
                <li><img src="./icon_jpeg02.jpg"></li>
                <li><img src="./icon_jpeg03.jpg"></li>
                <li><img src="./icon_jpeg04.jpg"></li>
                <li><img src="./icon_jpeg05.jpg"></li>
                <li><img src="./icon_jpeg06.jpg"></li>
                <li><img src="./icon_jpeg07.jpg"></li>
                <li><img src="./icon_jpeg08.jpg"></li>
                <li><img src="./icon_jpeg09.jpg"></li>
                <li><img src="./icon_jpeg10.jpg"></li>
            </ul>

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

sample

sample を開くと一定期間ごとに画像が切り替わります。
切り替わった際には画像が少し拡大していく感じです。

とりあえず簡易的に目を引く様な項目は出来たのではないかと思います。
実際には css で画像の中心を固定するとかの対応は必要ですが、
バナー程度のサイズならこのまま使用しても良いんじゃないでしょうか。

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

スクロールの挙動調整

今回は scroll の挙動調整です。
具体的には、通常 scroll した場合に縦方向 scroll する処理を
横向きに scroll するように変更してしまおうと云うものです。

<!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 src="./jquery.mousewheel.min_.js"></script>


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

            $(function(){

                var scrollTop = 0;
                var baseSpeed = 1000;
                var tempSpeed = 0;
                var userAgent = window.navigator.userAgent.toLowerCase();
                $('html').mousewheel(function(event, move) {

                    // scroll type
                    if (move > 0) {
                        tempSpeed = (baseSpeed * -1);
                    } else if (move < 0) {
                        tempSpeed =  baseSpeed;
                    }

                    // userAgent check (chrome)
                    if(userAgent.indexOf('chrome') != -1){
                        scrollLeft = $('body').scrollLeft() + tempSpeed;
                    } else {
                        scrollLeft = $('html').scrollLeft() + tempSpeed;
                    }

                    // scroll set
                    $('html,body').stop().animate({scrollLeft: scrollLeft}, 'normal');
                    // scroll out
                    return false;

                });

            });


        --></script>

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

            div {
                margin     : 10px;
            }

            #main_area div {
                float            : left;
            }

            #scroll_area {
                width            : 4500px;
            }

        --></style>

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

            <div id="scroll_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 class="thumb_div"><img src="./icon_jpeg12.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg13.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg14.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg15.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg17.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg18.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg19.jpg"></div>
                <div class="thumb_div"><img src="./icon_jpeg20.jpg"></div>
            </div>

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

sample

sample を開き scroll してみると横に scroll して動くかと思います。
 ※ 内容自体は以前に行った内容とあまり変わりません(笑)

最近は、今までのような page が縦に scroll するだけでは無い site が増えています。
通常とは異なり、scroll をこちらで制御できるため、画面内容によって scroll の
移動距離を変えるなど、ちょっと変わった印象を持たせることも可能かと思います。

scroll bar を非表示にすることで scroll による紙芝居のような表示をすることが
可能になるのかと思います。
これでちょっと変わった印象を持たせられるのでは無いでしょうか。

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