jQuery Raty - 不错的星级评分插件

简介: jQuery Raty - 不错的星级评分插件

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


一、展示

image.png



二、使用教程


①、下载插件


https://github.com/wbotelhos/raty


②、导入文件


<script type="text/javascript" src="${ctx}/components/raty/jquery.raty.js"></script>

<link type="text/css" rel="stylesheet" href="${ctx}/components/raty/jquery.raty.css" />

1

2

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


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

1

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


④、新增raty的div

<form class="form-horizontal required-validate"
    method="post">
    <div class="form-group">
        <label for="" class="col-md-2 control-label">评价星级</label>
        <div class="col-md-10">
            <div class="raty" name="level" data-bv-notempty>${good_comment.level}</div>
        </div>
    </div>
        <div class="form-group text-center ">
            <div class="col-md-11 col-md-offset-1">
                <button type="submit" class="btn btn-primary">保存商品评价</button>
            </div>
        </div>
</form>


创建一个div即可。

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

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

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

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

⑤、初始化raty的div

// 找到raty的div
$("div.raty", $p).each(function() {
    var $this = $(this);
    YUNM.debug('div.raty' + $this.selector);
    // 获取初始化值
    var score = $this.text();
    // 置空
    $this.text("");
    // 获取name值,为后面bootstrap validator的filed
    var name = $this.attr("name");
    // 初始化raty
    $this.raty({
        // 设置值
        score : score,
        size : 24,
        // The name of hidden field generated by Raty
        scoreName : name,
        // Re-validate the star rating whenever user change it
        click : function(score, evt) {
            if ($this.parents().length > 0) {
                // 找到form表单
                var $form = $this.parents().find("form.required-validate", $p);
                if ($form.length > 0) {
                    var data = $form.data('bootstrapValidator');
                    // 如果有值,设置表单验证通过
                    if (score > 0) {
                        data.updateStatus(name, 'VALID');
                    }
                }
            }
        }
    });
});


⑥、后台获取


可直接通过level从request中进行获取。


int level = Integer.parseInt(request.getParameter("level"));


相关文章
|
5天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
40 21
|
6天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
37 16
|
1天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
17 9
|
4天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
6天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
5天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
2天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
14 2
|
2天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
6天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
|
4天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
8 2