カテゴリー: javascript

日付入力用のjQueryのプラグインを探していて以下のページにたどり着きました。

日付入力のためのjQueryプラグイン 10選

紹介されているなかで簡単そうだったのが↓こちら

「date picker plug-in」

これを使ってみることに。

一番オーソドックスなサンプルを真似てみる。

simple datePicker

ソースコードを読んでみるも不要なものが多くまぎらわしいのでさっぱり版の
サンプルコードを作成。。

シンプル版

※日付のデータフォーマットはちょっと変えてる。

読込みの部分

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="date.js"></script>
        <script type="text/javascript" src="jquery.datePicker.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="datePicker.css">
        <link rel="stylesheet" type="text/css" media="screen" href="demo.css">

javascriipt部分

        <script type="text/javascript" charset="utf-8">
            Date.format = 'yyyy-mm-dd';
            $(function(){
                $('.date-pick').datePicker({autoFocusNextInput: true});
            });
        </script>

html部分

<input name="date1" id="date1" class="date-pick" />

date.jsがaタグを作ってくれてそこにカレンダーのアイコンがでてるみたい。
aタグとかにjsでclickイベントを仕掛けておくと競合する可能性があるので注意。

設定簡単なのでおすすめ。

スライダーをそのうちつける可能性があるので予習。

jCarousel

これがよさそう。

とりあえず自分の手持ちの写真で試してみる。

こんな感じ

画像がでかいとかは気にしない。
CSSの修正とかできてない・・・。

設置方法は
jCarousel内のDownloadで落としてきて解凍して読み込ませる。

HTMLはこんな感じ

        <div id="wrap">
            <h1>jCarousel</h1>

            <h3>サンプル</h3>

            <ul id="mycarousel" class="jcarousel-skin-tango">
                <li><img src="./photo/IMG_1116.JPG" width="75" alt="" /></li>
                <li><img src="./photo/IMG_1166.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1167.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1202.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1270.JPG" width="75"  alt="" /></li>
                <li><img src="./photo/IMG_1448.JPG" width="75"  alt="" /></li>
            </ul>

        </div>

実際に書くjsは以下

            jQuery(document).ready(function() {
                    jQuery('#mycarousel').jcarousel();
                });

jCarouselを見るとほかにもいろいろとサンプルがあるので実際の業務
に取り入れるかも。

CSSさえ素敵に調整できれば・・・。
いまだにCSSが苦手なのでちゃんと取り組まなければ。