帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

简单可定制的jQuery星级评分插件

帝国模板之家 2020-12-02 网页特效 评论

插件介绍

这是一款简单好用的jQuery星级评分插件,它可以帮助你使用HTML5任何元素通过配置属性,生成高度可定制的星级评分控件。

主要特点:

  • 自定义分级符号:UTF-8字符、SVG图标、web字体等。

  • 自定义长度。

  • 支持AJAX。

  • 触控功能,兼容移动端。

  • 渐进式增强。支持DIV、range slider和select元素。

  • 同时支持RTL和工具提示。

  • 支持尽多个评级星。

  • 通过CSS可定制。

使用方法

1.在html页面上直接包含以下JS&CSS文件。

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="rateit.css" rel="stylesheet" type="text/css">
<script src="jquery.rateit.js"></script>

2. 创建分级控件HTML元素。

<!-- BASIC -->
<span class="rateit">
</span>

<!-- OR -->
<div class="rateit">
</div>

<!-- OR -->
<input type="range" min="0" max="5" value="0" step="0.5" id="backing1">
<div class="rateit" data-rateit-backingfld="#backing1"></div>

<!-- OR -->
<select id="backing2">
    <option value="1">Bad</option>
    <option value="2">OK</option>
    <option value="3">Great</option>
    <option value="4">Excellent</option>
</select>
<div class="rateit" data-rateit-backingfld="#backing2" data-rateit-min="0"></div>

3.通过HTML5数据选项属性配置分级控件:

<div class="rateit" 
     data-rateit-starwidth="32" 
     data-rateit-starheight="32"
></div>

4.或者使用js配置。

$('#rateit-demo').rateit({ 

  // min value
  min: 0, 

  // max value
  max: 5, 

  // step size
  step: 0.5, 

  // 'bg', 'font'
  mode: 'bg', 

  // custom icon
  icon: '★', 

  // size of star
  starwidth: 16, 
  starheight: 16, 

  // is readonly?
  readonly: false, 

  // is resetable?
  resetable: true, 

  // is preset?
  ispreset: false
  
 });

5. API方法:

// get value
$('#rateit-demo').rateit('value')

// set value
$('#rateit-demo').rateit('value', Value)

// get max value
$('#rateit-demo').rateit('max')

// set max value
$('#rateit-demo').rateit('max', Value)

// get min value
$('#rateit-demo').rateit('min')

// set min value
$('#rateit-demo').rateit('min', Value)

// get step size
$('#rateit-demo').rateit('step')

// set step size
$('#rateit-demo').rateit('step', Value)

// get readOnly value
$('#rateit-demo').rateit('readonly')

// set readOnly value
$('#rateit-demo').rateit('readonly', Value)

// get isPreset value
$('#rateit-demo').rateit('ispreset')

// set isPreset value
$('#rateit-demo').rateit('ispreset', Value)

// reset
$('#rateit-demo').rateit('reset')
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言