fxss-rate评分插件

深藏阁楼爱情的钟 2022-05-15 12:34 204阅读 0赞

## 介绍 ##

fxss-rate评分插件是基于jQuery的插件，支持全星、半星、小数星、未选中星等多种显示样式，并且支持评分操作，不过操作评分的时候仅支持全星评价。

demo地址：[http://www.fxss5201.cn/project/plugin/fxss-rate/][http_www.fxss5201.cn_project_plugin_fxss-rate]  
github地址：[https://github.com/fxss5201/fxss-rate][https_github.com_fxss5201_fxss-rate] ，如果感觉不错的话点个Star。

## 版本 ##

`0.0.1`版本。

## 使用 ##

基于jQuery，需要引入jQuery文件：

本版本使用和之前版本有点区别，需要将`fxss-rate`文件夹复制到您的项目目录中（由于`css`和`js`的压缩文件都在其中，所以使用时请根据使用情况删除源码或压缩码），只需要在页面中引入js文件：

在使用的时候，需要一个容器，例如：

然后在 `JavaScript` 中进行初始化：

$("#rateBox").rate();

上面这种是最简单的使用，所有的参数都会使用默认参数。也可以自由配置参数，比如将其设置为可操作的并且增加点击回调函数：

$("#rateBox").rate({ 
        readonly: false,
        callback: function(object){ 
            console.log(object)
        }
    });

## 参数 ##

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>何时添加</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>Number</td> 
   <td>0</td> 
   <td><code>0.0.1</code></td> 
   <td>星级的渲染方式，0：<code>svg</code>，1：<code>Font class</code>，2：<code>Unicode</code></td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>Number</td> 
   <td>5</td> 
   <td><code>beta</code></td> 
   <td>初始长度，即渲染几颗星。</td> 
  </tr> 
  <tr> 
   <td>value</td> 
   <td>Number</td> 
   <td>3.5</td> 
   <td><code>beta</code></td> 
   <td>选中星星的个数，介于0和<code>length</code>之间，如果想要显示半颗星或者小数星，还需要设置相应的<code>half/decimal</code>，否则仅会显示整数部分</td> 
  </tr> 
  <tr> 
   <td>half</td> 
   <td>Boolean</td> 
   <td><code>true</code></td> 
   <td><code>beta</code></td> 
   <td>是否显示半星（仅做显示处理）</td> 
  </tr> 
  <tr> 
   <td>decimal</td> 
   <td>Boolean</td> 
   <td><code>true</code></td> 
   <td><code>beta</code></td> 
   <td>是否根据小数来显示小数星（仅做显示处理，优先级高于<code>half</code>）</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>Boolean</td> 
   <td><code>true</code></td> 
   <td><code>beta</code></td> 
   <td>是否只读，如果设置为只读，则设置<code>callback</code>回调函数也无用</td> 
  </tr> 
  <tr> 
   <td>hover</td> 
   <td>Boolean</td> 
   <td><code>false</code></td> 
   <td><code>0.0.1</code></td> 
   <td>鼠标移到星级上是否显示当前的<code>value</code>值，此版本使用简单的标签<code>title</code>表示</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>Boolean</td> 
   <td><code>true</code></td> 
   <td><code>beta</code></td> 
   <td>是否显示对应的文字描述</td> 
  </tr> 
  <tr> 
   <td>textList</td> 
   <td>Array</td> 
   <td>[‘极差’, ‘差’, ‘中等’, ‘好’, ‘非常好’]</td> 
   <td><code>beta</code></td> 
   <td>文字描述，可以自己设置，建议与<code>length</code>保持整除关系</td> 
  </tr> 
  <tr> 
   <td>theme</td> 
   <td>String</td> 
   <td>‘#FFB800’</td> 
   <td><code>beta</code></td> 
   <td>主题色</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>String</td> 
   <td>‘20px’</td> 
   <td><code>beta</code></td> 
   <td>星星以及文字描述的大小</td> 
  </tr> 
  <tr> 
   <td>gutter</td> 
   <td>String</td> 
   <td>‘3px’</td> 
   <td><code>beta</code></td> 
   <td>两颗星星之间的距离/2，原理是设置<code>margin: 0 gutter;</code></td> 
  </tr> 
  <tr> 
   <td>selectClass</td> 
   <td>String</td> 
   <td>‘rate_select’</td> 
   <td><code>beta</code></td> 
   <td>星星选中的样式class名称，可以在此class中设置自定义样式</td> 
  </tr> 
  <tr> 
   <td>incompleteClass</td> 
   <td>String</td> 
   <td>‘’</td> 
   <td><code>beta</code></td> 
   <td>星星未完全选中的样式名称，主要针对半星和小数星</td> 
  </tr> 
  <tr> 
   <td>customClass</td> 
   <td>String</td> 
   <td>‘’</td> 
   <td><code>beta</code></td> 
   <td>自定义class，会添加在<code>rate_wrapper</code>标签上面，可以利用css权重来重置css样式</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>Function</td> 
   <td></td> 
   <td><code>beta</code></td> 
   <td>星星点击的回调函数，参数object包含当前的DOM元素、点击的星星的index</td> 
  </tr> 
 </tbody> 
</table>

[http_www.fxss5201.cn_project_plugin_fxss-rate]: http://www.fxss5201.cn/project/plugin/fxss-rate/
[https_github.com_fxss5201_fxss-rate]: https://github.com/fxss5201/fxss-rate