カテゴリー別アーカイブ: jQuery Ui

スピナー付き入力欄

今回は数字の上下を操作できる 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 であれば標準でも
結構きれいです。
特にこだわりがなければ早くて便利で素晴らしいですね。

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

ブロックのドラッグ&ドロップ

前回 jQuery Ui を使用しました。
引き続き jQuery Ui による動作を紹介したいと思います。
今回は drag & drop です。

<!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(){
                $("#move_div").draggable({containment: '#target_area', snap:'#target_area div'});
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        
            div {
                margin : 10px;
            }

            #move_div {
                border              : solid 1px #000000;
                width               : 100px;
                height              : 100px;
                background-color    : #cccccc;
            }

            #target_area {
                width               : 306px;
            }
            #target_area div {
                border              : solid 1px #cccccc;
                margin              : 0;
            }

            #top ,
            #bottom {
                clear               : both;
                width               : 304px;
                height              : 100px;
            }

            #left ,
            #center ,
            #right {
                float               : left;
                width               : 100px;
                height              : 100px;
            }

        --></style>

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

            <div id="target_area">
                <div id="top">top</div>
                <div id="left">left</div>
                <div id="center">center</div>
                <div id="right">right</div>
                <div id="bottom">bottom</div>
            </div>

            <div id="move_div"></div>

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

sample

sample を表示したとき、下部に表示されている灰色の div を drag してみてください。
上部に用意した領域の中に強制的に移動させられます。
移動後は指定した領域でしか動かせない様にすることもできます。

後は drop するだけです。
今回は特に何もしていませんが、drop した際に event を起こすことで
飛び出す絵本的なことも出来ます。

Web 上で色んな動作が出来ますが、drag & drop は結構喜ばれます。
使いどころは難しい気がしますけどね・・・

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

アニメーションでの色変更

今回は animate での色変更に挑戦したいと思います。
既に animate は何度か行っているため、「何をいまさら・・・」な感も否めませんが、
実は animate には色の変更機能が有りません(笑)
「何で出来ない?」と思った事は何度もありますが標準では動作しないのです。


 animate は値が数字のものしか動けないのは理解しているのですが
 色も16進の数字情報だと思うのですが・・・

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

                $('#button').click(function() {
                      // init
                      $('#disp_area p').css({'color' : '#000000', 'background-color' : '#ffffff'});
                      // color change
                      $('#text_1').stop().animate({'color' : '#ff0000', 'background-color' : '#cccccc'}, 3000);
                      $('#text_2').stop().animate({'color' : '#00ff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_3').stop().animate({'color' : '#0000ff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_4').stop().animate({'color' : '#00ffff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_5').stop().animate({'color' : '#ffff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_6').stop().animate({'color' : '#ff00ff', 'background-color' : '#cccccc'}, 3000);
                      //
                      $('#text_7').stop().animate({'color' : '#ff0000', 'background-color' : '#00cccc'}, 1500)
                                         .animate({'color' : '#00ff00', 'background-color' : '#cc00cc'}, 1500)
                                         .animate({'color' : '#0000ff', 'background-color' : '#cccc00'}, 1500)
                                         .animate({'color' : '#00ffff', 'background-color' : '#cc0000'}, 1500)
                                         .animate({'color' : '#ffff00', 'background-color' : '#0000cc'}, 1500)
                                         .animate({'color' : '#ff00ff', 'background-color' : '#00cc00'}, 1500)
                                         .animate({'color' : '#000000', 'background-color' : '#ffffff'}, 1500);
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        
            div {
                margin           : 10px;
            }

            p {
                margin           : 10px;
                padding          : 10px;
                width            : 300px;
            }

        --></style>

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

            <div id="disp_area">
                <p id="text_1">Sample Message Text Red</p>
                <p id="text_2">Sample Message Text Lime</p>
                <p id="text_3">Sample Message Text Bule</p>
                <p id="text_4">Sample Message Text Cyan</p>
                <p id="text_5">Sample Message Text Yellow</p>
                <p id="text_6">Sample Message Text Magenta</p>
                <p id="text_7">Sample Message Text Color Change</p>
            </div>

            <div id="text_area">
                <button id="button">Color Change</button>
            </div>

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

sample

sample の button を click すると文字色と背景色が変更されます。
もちろん連続で色を変更することも出来ます。

行った内容は、「別途 jQuery UI を読み込む」でした。
色々と優秀な Plugin があるのですが、今回は jQuery の機能だけで完結してみました。

「jQuery UI」とは jQuery を使用した UI 用の機能を纏めたものです。
開発元が「The jQuery Project」なので安心です。
今回は jQuery より上記機能となる Color Animation と云う Effects を
使用する形となります。

・・・それにしても色変更の animate ぐらいは jQuery 標準で出来るように
変更してほしいなと思いますよね。

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