HTML5商城开发三 jquery 星星评分插件

展示:

实现方法:

1.html引用star-grade.js

<script type="text/javascript" src="Scripts/star-grade.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".sstar").BindStars();//使用属性data-score获取评分值
            $("#pye").SetStars(3);//传分数,自动列出星星
        });
    </script>
<body>
    <div class="starscore sstar">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <span id="ye"></span>
    <div class="starscore" id="pye"></div>

    <div class="starscore starscore_sm" >
        <i class="inred"></i>
        <i class="inred"></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <div class="starscore starscore_lg">
        <i class="onred"></i>
        <i class="onred"></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>

2.css样式

@charset "utf-8";
/* CSS Document */
.starscore {
    width: 200px;
    height: 30px;
}

    .starscore i {
        width: 14px;
        height: 14px;
        background: url(images/gray.gif) no-repeat; /* 14x14的灰色星星图标 */
        display: inline-block;
        vertical-align: middle;
        background-size: contain;
    }

        .starscore i.inred, .starscore i.onred {
            background: url(images/yel.gif) no-repeat; /* 14x14的黄色星星图标 */
        }

.starscore_lg > i {
    width: 18px;
    height: 18px;
}

.starscore_sm > i {
    width: 12px;
    height: 12px;
}

3.插件js源码

/*
*   jq扩展--星星评分插件
*
*   通过对象的属性data-score获取评分值
*   星星使用元素i表示,绑定星星背景图
*   鼠标进入、离开事件的绑定样式为inred,改变背景图
*   点击事件的绑定样式为onred,改变背景图
*/
(function ($) {
    "use strict";
    $.fn.BindStars = function () {
        var starElement = $(this);
        starElement.children("i").mouseleave(function () {
            starElement.find("i").each(function (index) {
                $(this).removeClass("inred");
            });
        });
        starElement.children("i").mouseenter(function () {
            var curIndex = starElement.find("i").index(this);
            starElement.find("i").each(function (index) {
                if (index <= curIndex) {
                    $(this).addClass("inred");
                }
                else {
                    $(this).removeClass("inred");
                }
            });
        });
        starElement.children("i").click(function () {
            var curIndex = starElement.find("i").index(this);
            starElement.find("i").each(function (index) {
                if (index <= curIndex) {
                    $(this).addClass("onred");
                }
                else {
                    $(this).removeClass("onred");
                }
            });
            starElement.attr("data-score", curIndex + 1);
        });
    };
    $.fn.SetStars = function (score) {
        var scoreStr = "";
        for (var i = 0; i < 5; i++) {
            if (i < score) {
                scoreStr += "<i class=‘onred‘></i>";
            } else {
                scoreStr += "<i></i>";
            }
        }
        $(this).html(scoreStr);
    };
})(window.jQuery);
时间: 2024-10-07 05:23:56

HTML5商城开发三 jquery 星星评分插件的相关文章

jquery 星星评分插件

展示: 实现方法: 1.html引用star-grade.js <script type="text/javascript" src="Scripts/star-grade.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".sstar").BindStars();//使用属性da

一个非常棒的星星评分插件

现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现.比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但那样不如用五个星星来得炫来得直观. 像这样的星星评分插件用得非常普遍,几乎要成为你随手捻来的小菜,任何一个不具备使用这样插件的前端程序员都是毫无战斗力的. 这里给大家介绍一个实现这样的评分效果的小插件jQuery Raty.它提供的API相当丰富真的是让人爱不释手.详细文档及下载插件请移步这里. 基

Html5添加简单实用的轻量级评分插件教程

一.安装 bower install jquery-bar-rating 二.使用方法 <link href="css/fontawesome-stars.css"> <script src="js/jquery.js"></script> <script src="js/jquery.barrating.min.js"></script> 三.Html结构 <select id=

HTML5商城开发一 楼层滚动加载数据

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) <div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul clas

开发一个jQuery插件——多级联动菜单

引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对

jQuery滑动星星评分效果

每日分享效果,今天分享一个jQuery滑动星星评分效果. jQuery星星评分制作5颗星星鼠标滑过评分打分效果,可取消评分结果,重新打分. HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" h

jquery easyui+sparkline插件+jqplot插件实现数据表行内插入线形图

Jquery easyui : 实现前端数据包格式化输出,支持多种模块式定义,只需要添加相应的预设参数即可实现丰富的前端. 资料参考: http://www.jeasyui.com/ Jquery sparkline: 基于jQuery 的js插件,底层调用html5的canvas标签,并通过js动态实现在数据表行内画条形图或趋势图,操作简单,可实现不同类型的图形化,如线形图,饼状图,柱形图. 资料参考:http://omnipotent.net/jquery.sparkline/#s-docs

活动列表+星星评分功能(源码下载)

这是一个Demo,内容主要是模仿一些网站的数据列表,实现评分功能.放缩功能. 下面是小Demo: 工具 一个星星评分插件+ jQuery1.8.2 思路 思路很简单,通过整张表格是由后台生成(StringBuilder)然后发送给前台页面填充出来的. 当点击点评按钮后,会调用jQuery的slideToggle()方法,执行动画. 关于Ajax部分 本Demo一共两处使用Ajax,第一处是加载页面的时候,生成页面table,第二处是点击提交的时候,将数据提交给服务器. 代码特别简单,就不贴出来了

jquery数字打分插件与嵌入到EasyUI datagrid中的示例

这阵儿是断续折腾定性考评表打分的事儿了.虽是UI菜鸟,但却一直想让用户在操作上更加方便,之前基于"jQuery星级评分插件"实现了一个评分界面(因为比较简单,就不做总结了),用户反应还不错. 这一次的评分表中,各项分值的特点有:一是每个评分项的分值均不太一样:二是分值为整数,但分值范围大,从-1000到+1000都存在.若是采用在datagrid中嵌入编辑框的形式实现的话,总是觉得让用户使用不太方便,所以内心非常想做一个数字插件,然后就搜到中意的例子--"简单的jQuery用