カテゴリー: jQuery

ページの表示履歴簡易的に取りたいということなのでjQueryを使ってどうやるのか調べてみた。

こちらを参考にしました。
jQueryを使ってクッキーを操作

jquery.cookie.jsを使うらしいのでこちらからダウンロード

自作した外部ファイル

$(function(){
    var COOKIE_NAME = 'test_cookie_name';
    var COOKIE_PATH = '/';

    var page_array = [];
    if($.cookie(COOKIE_NAME)){
        page_array = $.cookie(COOKIE_NAME).split("-");
    }

    // 現在開いているページのファイル名を取得
    var file_url = location.href;
    file_url = file_url.substring(file_url.lastIndexOf("/")+1,file_url.length);
    file_url = file_url.substring(0,file_url.indexOf("."));

    if( $.inArray(file_url, page_array) == -1) {
        // cookieから取得した配列内に存在しない場合は追加
        page_array.push(file_url);
    }

    // パス(/)や有効期限(3日)を指定する
    var date = new Date();
    date.setTime(date.getTime() + ( 1000 * 60 * 60 * 24 * 3 ));

    // とりあえず"-"区切りで連結してcookieに格納
    $.cookie(COOKIE_NAME, page_array.join("-"), { path: COOKIE_PATH, expires: date });
})

履歴を取得したいページでの読込み例(ここでは自作の外部ファイルをhistory_sample.jsとしている)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.cookie.js"></script>
<script type="text/javascript" src="./history_sample.js"></script>

cookie_sample.html
cookie_sample2.html
cookie_sample3.html
とかのファイルに仕掛けた場合、3ファイルをブラウザで開いたあとはcookiに以下のような
値がはいります。

データの保存方法が・・・とかありますがとりあえずサンプルなのでこれで。

日付入力用の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が苦手なのでちゃんと取り組まなければ。