简介
jquery.rateit是一个基于jQuery的评分插件，可以用于在网页上添加评星或者数字评分交互组件，支持自定义图标和颜色等。
安装
安装jquery.rateit非常简单，只需要在终端或命令行中输入以下命令：
npm install jquery.rateit --save
这将会安装最新的稳定版jquery.rateit，并且把它添加到你的项目的依赖中。
使用
引入库文件
在需要使用jquery.rateit的HTML页面中引入jquery和jquery.rateit的库文件。
<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateit/1.1.3/rateit.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/rateit/1.1.3/jquery.rateit.min.js"></script> </head>
HTML结构
使用jquery.rateit前需要先在HTML中定义相关的DOM元素，如下所示：
<div class="rateit" data-rateit-value="3" data-rateit-resetable="false" data-rateit-ispreset="true"></div>
其中，class为rateit表示这个元素是一个jquery.rateit组件，data-rateit-value表示当前的评分值为3，data-rateit-resetable表示是否允许重置评分，data-rateit-ispreset表示是否为预设评分。
JavaScript代码
在页面加载完成后，需要通过JavaScript代码初始化jquery.rateit插件，并监听rateit-change事件来处理用户的评分操作。代码如下所示：
-- -------------------- ---- ------- -------- ----------------------------- ---------------------- -------------------------- ----------- --- ----- - ------------------------ ------------------ - ------- --- --- ---------展开代码
以上代码中，$('.rateit').rateit()将会初始化所有class为rateit的元素，使它们成为jquery.rateit组件。$('.rateit').bind('rated', function(){...})则会监听每个jquery.rateit组件的rated事件，并在用户进行评分操作后弹出一个提示框显示评分值。
自定义
jquery.rateit提供了多种自定义选项，可以根据需求自定义样式、图标和其他属性等。 例如，如果想使用不同的星形图标，可以设置starType属性，如下所示：
<div class="rateit" data-rateit-starwidth="32" data-rateit-starheight="32" data-rateit-value="2.5" data-rateit-starType="fontawesome"></div>
其中，data-rateit-starType="fontawesome"表示使用fontawesome字体库中的图标作为星形图标。
更多自定义选项请参考jquery.rateit文档。
示例代码
以下是一个完整的HTML页面示例代码，包含了jquery和jquery.rateit的引入、DOM结构和JavaScript代码等：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- -------------------------------- ------- ----------------------------------------------------------- ----- ---------------- ---------------------------------------------------------------------- ------- ---------------------------------------------------------------------------------------- ------- ------ ---- -------------- --------------------- ----------------------------- ---------------------------------- -------- ----------------------------- ---------------------- -------------------------- ----------- --- ----- - ------------------------ ------------------ - ------- --- --- --------- ------- -------展开代码
结论
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38613
