More than 5 years have passed since last update.

raty.jsで小数点以下まで星を表示する方法

Posted at 2019-05-08

entershareの大森です。
開発している中でratyを使うことがあり、小数点以下までmouse-onした時の値を表示したいことがあったのでその方法を書いておきます。

raty.html

<html>
  <head>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"
  >
  </script>
    <script type="application/javascript" src="./jquery.raty.js"></script>
    <script type="application/javascript">
      $(function(){
        $('#star_field').raty({ 
          target: '#star_input',
          targetType: 'number',
          targetKeep: true,
          precision: true,
          round : { down: .4, full: .6, up: .99 },
          half: true
        });
      });
    </script>
  </head>
  <body>
    <div id="star_field"></div>
    <div id="star_input" style="border: solid 1px; height: 1.5em; width: 2em;"></div>
  </body>
</html>

以上のコードの中で特に大事なのはこの部分です。


targetType: 'number',
targetKeep: true,
precision: true,

このようにすることでtargetの中に表示する値が数字になり、mouse-onが解除された時もクリックされた値が保持されるようになります。
またprecisionをtrueにすることで小数点以下まで値が表示されます。
これがないと小数点以下は表示されません。

使う機会があり小数点以下まで値を取得したい時にはぜひ使ってみてください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up