bootstrap五星评分_jQuery Raty 一款不错的星级评分插件

本文介绍了如何利用jQuery Raty插件在商品评价中创建一个五星评分组件。内容包括下载插件、导入文件、设置图片路径、创建div、初始化raty组件以及在后台获取评分值的方法。
摘要由CSDN通过智能技术生成

在做商品评价时,一般情况下,我们需要一个星级评分的组件,而jQuery Raty恰好满足我们的需求。

一、展示

二、使用教程

①、下载插件

②、导入文件

③、设置raty的全局图片路径

$.fn.raty.defaults.path = common.ctx + '/components/raty/images';

主要是指定五角星的显示样式,可以是五角星,也可以是其他。

④、新增raty的div

method="post">

评价星级

${good_comment.level}

保存商品评价

1.创建一个div即可。

2.指定class属性为raty,为页面加载时初始化raty组件。

3.指定name为level,作为传递到后台数据的parameter的name。

4.指定当前bootstrap validator的filed域为notempty,表单提交时必须选中至少一个星。

5.在div中进行赋值,通过text内容设置raty的值。

⑤、初始化raty的div

// 找到raty的div

$("div.raty", $p).each

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用bootstrap中的星星评分组件和jQuery来实现星星评分功能。 首先,需要在html页面中引入bootstrapjQuery的库文件: ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ``` 然后,在页面中添加一个星星评分的HTML元素: ```html <div class="star-rating"> <input id="star-5" type="radio" name="rating" value="5"> <label for="star-5" title="5 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-4" type="radio" name="rating" value="4"> <label for="star-4" title="4 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-3" type="radio" name="rating" value="3"> <label for="star-3" title="3 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-2" type="radio" name="rating" value="2"> <label for="star-2" title="2 stars"> <i class="active fa fa-star" aria-hidden="true"></i> </label> <input id="star-1" type="radio" name="rating" value="1"> <label for="star-1" title="1 star"> <i class="active fa fa-star" aria-hidden="true"></i> </label> </div> ``` 接下来,使用jQuery来监听星星评分的变化,并将选中的星级值保存到一个隐藏的表单输入框中,以便在后台处理: ```javascript $(document).ready(function(){ $('.star-rating input').change(function() { var rating = $(this).val(); $('#rating-value').val(rating); }); }); ``` 最后,在表单提交时,将隐藏的表单输入框中的星级值发送到后台进行处理。 这样,就可以实现一个简单的基于bootstrapjQuery星星评分功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值