星形レーティングプラグイン「RATE YO!」をスマホ対応してみた。

投稿日:2015年6月25日


口コミサイトなどでよく見かける星形レーティング。
RateYo!というプラグインは、動きが軽快で使える関数もなかなかあり満足な動作をしてくれます(ただし、IE9以上)。他のプラグインではあまりない機能として小数点2桁までつけることもできます。


しかしスマホは一応の動作はしてくれるもののあまり満足の行く動作ではありません。指でスライドして点数がつけられないので、細かい点数をつけずらい、という難点があります。せっかく小数点2桁までつけられるのにもったいない!!と思いました。
そこで、スマホで指でスライドさせて点数をつける動作に対応してみました。やり方は下で書いています

http://prrashi.github.io/rateYo/の右上にあるGitHubのリンクからダウンロードして以下の指定で基本の動きが出来ます。

オプションの種類や書き方も丁寧に書かれています。英語が読めなくても実行例を付けてくれているのでなんとなく分かると思います。

●例1:「初期値を★2.5にして、0.5区切りでしか点数をつけさせない」。

●例2:「最高★7つで、★のサイズが40pxで、小数点2桁対応で、★の数に応じて色が変わる」。(※製作者のGitHubのexampleにある「color.js」を利用)

いよいよ本題のスマホ対応の話です。

コードを修正しやすいように、プラグインをダウンロードするときに、jquery.rateyo.min.jsではなく、jquery.rateyo.jsをダウンロードします。

1.スマホ用の計算関数を作成

スマホで、指を付けた瞬間から指を離すまでの動きは、PCでオンマウスした時の動きと同じで良いので、「onMouseEnter」関数をコピーして「onTouchMove」関数という新たな関数を作ります。
指を離した瞬間の動きは、PCでクリックした動きと同じで良いので、「onMouseClick」関数をコピーして「onTouchEnd」関数という新たな関数を作ります。
同じで良いとは言っても、PCとスマホで少し処理が違うところがあるので、そこを修正します。

実際に追加するのは以下のコードでOKです。

2.タッチイベントをバインド

「bindEvents」関数と「unbindEvents」関数にタッチイベントをバインドしてやります。

これでOKです。

南本貴之

関連記事

カテゴリー: JavaScript, jQuery, サイト制作
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル