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"));


相关文章
|
12月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
56 0
|
JavaScript
jQuery 五角星评分案例(详细代码)
jQuery 五角星评分案例(详细代码)
92 0
|
5月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3天前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
12 4
jQuery Growl 插件(消息提醒)
|
4月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
46 1
|
5天前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
15 4
jQuery Cookie 插件
|
2天前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
11 2
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
4月前
|
JavaScript Perl PHP
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
27 0
|
JavaScript
jQuery 自定义插件(详细步骤)
jQuery 自定义插件(详细步骤)
123 0