今回は flickSimple の使い方を説明するために、
下記のフリックページを作ってみたいと思います。
- 横にフリック
- フリックするページは３枚（３ページ）
まずは下記サイトから flickSimple をダウンロードします。
ダウンロードが終わったら、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>
見た目はこうなります。
※分かりやすいよう 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 を適用すると、見た目がこのように変わります。
見える範囲が「フリックさせる範囲を示す<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() に
指定しましょう。
では、今回はここまで！