flicksimple の設定方法

仕事場で、デザイナーさんに聞かれた。そっち系は全然仕事じゃないんだが、面白そうなので調べてみた。

要素の数などを css に設定しなくてはならないので話がややこしい。

iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン

# 説明中の ID は index.html で使用しているものと同じ

1.まず、フリックする部分の幅を決める (#basic ul , #flickable1 ul など)
　(要素ひとつの幅 + 余白) × 要素の数
　--> #basic は 24px × 24個 = 1920px
　--> #flickable1 は 48px × 20個 = 960px(320px×300%)

2.要素ひとつ分の幅を指定 (#basic ul li, #flickable1 ul li など
　--> #basic 80px px で指定
　--> #flickable1 5% 全体(上で決めた値) に対する比率で指定、この場合は要素数
　 が自動的に決まる(100% / 5% = 20個)
　
----
　あと、jQuery mobile の css を読み込ませると、[snap: 'element'] がうまく動かなくて嵌った。