仕事場で、デザイナーさんに聞かれた。そっち系は全然仕事じゃないんだが、面白そうなので調べてみた。
要素の数などを 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'] がうまく動かなくて嵌った。
