flickSimpleでフリック！～（２）実装：flickSimpleの基本

この記事は「flickSimpleでフリック！」の２回目です。

今回は flickSimple の使い方を説明するために、
下記のフリックページを作ってみたいと思います。

横にフリック
フリックするページは３枚（３ページ）

まずは下記サイトから flickSimple をダウンロードします。

makogの日記 ― [スマートフォン][JavaScript] iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン

ダウンロードが終わったら、html と css の準備です。


<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="./jquery.flicksimple.js"></script>
<style>
    .flick-visible {
        width: 200px;
    }
    ul.whole {
        width: 300%;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    ul.whole li {
        float: left;
        width: 200px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
</style>
</head>
<body>
    <div id="flick" class="flick-visible">
        <ul class="whole">
            <li>１ページめ</li>
            <li>２ページめ</li>
            <li>３ページめ</li>
        </ul>
    </div>
</body>
</html>

見た目はこうなります。

ソフトウエア開発（android・iphone・windows・java等）の事なら株式会社パークにお任せください＿パク太郎のソフトウエア開発者ブログ-flickSimple： html と css

※分かりやすいよう CSS で色や文字位置を調整しています。

１つ１つ説明していきますネ。

■プラグインへのリンク
<head>内で jQuery と flickSimple にリンクを張ります。


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="./jquery.flicksimple.js"></script>

flickSimple は jQuery を使用しているので、
flickSimple の前に jQuery にリンクを張ってあげてください。

flickSimple のスクリプトのパスは、
どこに flickSimple をダウンロードしたかで変わります。

■html と css


<div id="flick" class="flick-visible">
    <ul class="whole">
        <li>１ページめ</li>
        <li>２ページめ</li>
        <li>３ページめ</li>
    </ul>
</div>


.flick-visible {
    width: 200px;
}
ul.whole {
    width: 300%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul.whole li {
    float: left;
    width: 200px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

<body>内に以下３つの要素を書きます。

フリックさせる範囲を示す<div>

フリックさせるページ全体のサイズを示す<ul>

フリック対象のページを示す<li>

フリックさせる範囲はフリック対象のページ１個と
同じサイズにするので、

<div>の width ＝ <li>の width

になります。

この部分はページ全体で一意に決まる要素になっている
必要があります。
なので、id名をふってあげましょう。

フリックさせるページ全体のサイズを示す<ul>には、
「width:300%;」を指定しています。

今回は３ページあるので、100%×3 ですネ。

margin と padding が指定されていると
width で指定した範囲が全体の幅とイコールにならないので、
これらは 0 にしておきます。

ここでは横にフリックさせたいので、
各ページは横に並んでいる必要があります。
なので、<li>には「float: left;」を指定して
各ページを横に並べています。

margin、padding、マーカーはあると邪魔なので、
「margin: 0; padding: 0;」と「list-style-type: none;」で
消しておきましょう。

■flickSimple を適用する。
ここまで来たら flickSimple の適用です！

<head>内に下記を追加してください。


<script>
    $(function() {
        $("#flick").flickSimple();
    });
</script>

"$( )"の中には

「#」+「フリックさせる範囲を示す<div>の id 名」

を指定します。

flickSimple を適用すると、見た目がこのように変わります。

ソフトウエア開発（android・iphone・windows・java等）の事なら株式会社パークにお任せください＿パク太郎のソフトウエア開発者ブログ-flickSimpe：適用

見える範囲が「フリックさせる範囲を示す<div>」に限定され、
フリックでページを変えることができるようになりました！

フリックのスピードを変えたい場合は、
引数でコントロールできます。


$("#flick").flickSimple({
    duration: 1000    // アニメーションの長さ(ミリ秒)
});

flickSimple 適用時に戻り値を取得することで、
スクリプトでページ移動（goTo()メソッド）させることもできます。
（詳細は jQuery.flickSimple デモ / マニュアルのページをご覧ください。）

...と、ここで問題が。

戻り値を取得するときに下記のように記述しても、
flickSimple オブジェクトを取得することができません！


var flickObj = $("#flick").flickSimple();

原因は、初めて flickSimple を適用する要素の場合は
flickSimple がインスタンスを返してくれないためです。

なので、下記のように２回目でオブジェクトを取得しましょう。


$("#flick").flickSimple();

// 2回目以降でないとflickSimpleオブジェクトが返ってこない
var flickObj = $("#flick").flickSimple();

flickObj.goTo(2); // ２ページ目に行けるよ！

引数を指定したい場合は、１回目の flickSimple() に
指定しましょう。

では、今回はここまで！

パークのソフトウエア開発者ブログ｜ICT技術（Java・Android・iPhone・C・Ruby）なら株式会社パークにお任せください

開発の解決方法や新しい手法の情報を、パークのエンジニアが提供します。パークのエンジニアが必要な場合は、ぜひお気軽にお問い合わせ下さい。株式会社パーク：http://www.pa-rk.co.jp/

flickSimpleでフリック！～（２）実装：flickSimpleの基本