Material Design 下自定义 RatingBar 的实现方式-JavaScript中文网-JavaScript教程资源分享门户

在Material Design设计语言中，评分条（RatingBar）是一种常见的控件，它能够让用户快速地给出对某项内容的评分。但由于默认的RatingBar样式并不总是符合应用需求，开发者可能需要自定义RatingBar样式，以使之更符合自己的应用场景。本文将介绍如何自定义Material Design下的RatingBar，让您更好地适应自己的应用需求。

前置技能

在学习本文之前，我们假设您已经掌握以下技能：

HTML5
CSS3
JavaScript

此外，您还需要对 Material Design 有一定的了解，包括：

带有 Material Design 风格的 RatingBar 的基本样式
Material Design 颜色方案
Material Design 字体规范

基础实现

Material Design 风格下的 RatingBar 通常都是由一组图标组成的，它们的状态由JavaScript控制并通过CSS修改样式。首先让我们来看看如何创建一个基本的RatingBar。

我们可以先使用Material icons 来实现评分星星，Material icons 是 Material Design 库中的图标集，可以很方便地使用。然后，我们通过 HTML 来为星星添加外壳。代码如下所示：

<div class="rating-bar">
    <i class="material-icons rating-star">star_border</i>
    <i class="material-icons rating-star">star_border</i>
    <i class="material-icons rating-star">star_border</i>
    <i class="material-icons rating-star">star_border</i>
    <i class="material-icons rating-star">star_border</i>
</div>

我们为星星容器添加了一个名为“rating-bar”的类，在每个星星上都有一个类名叫“rating-star”。我们还在“rating-star”元素中放置了 Material icons 中的“star_border” icon。现在，您应该能看到五个空心星星，并且它们都位于“rating-bar”容器中。

接下来，我们将为 RatingBar 添加一些 CSS 样式。这些样式将允许我们更改星星的颜色、大小和填充状态等。代码如下：

.rating-bar {
    display: inline-block;
}

.rating-star {
    font-size: 48px;
    color: #9e9e9e;
    display: inline-block;
    transition: color .2s ease-out;
    margin-right: 8px;
}

.rating-star.hover,
.rating-star.active {
    color: #ffca28;
}

.rating-star.active {
    transition: color .2s ease-in;
}

我们首先通过 “display: inline-block” 将 RatingBar 容器设置为内联块级别。接下来，我们定义了“rating-star”元素的样式，包括元素大小和颜色等，以及一些关于可修改的动画效果。最后，我们在“rating-star.hover”和“rating-star.active”类中分别定义了两种状态（鼠标悬停和当前活动状态下的星星），并调整了它们的颜色。

在这个基础上，我们已经完成了一个最简单的 RatingBar。您可以通过在 JavaScript 中添加一些事件监听器来使它更加实用。

自定义基础 RatingBar

接下来，我们将介绍如何通过样式和代码来自定义基本 RatingBar。首先，我们可以通过CSS来自定义评分类别（评分星星）的颜色。下面的CSS使得评级图标变成蓝色：

.rating-star.hover,
.rating-star.active {
    color: #0070f3;
}

.rating-star.active {
    transition: color .2s ease-in;
}

现在，当您将鼠标悬停在一个评级图标上时，它会变蓝色。当您单击一个图标时, 选定的图标会变成蓝色：

var ratingBar = document.querySelector('.rating-bar');
var stars = ratingBar.querySelectorAll('.rating-star');

for (var i = 0; i < stars.length; i++) {
    stars[i].addEventListener('mouseover', function(e) {
        var currentStar = e.target;
        var allPreviousStars = getAllPreviousSiblings(currentStar);

        toggleClass(currentStar, 'hover');
        for (var j = 0; j < allPreviousStars.length; j++) {
            toggleClass(allPreviousStars[j], 'hover');
        }
    });

    stars[i].addEventListener('mouseleave', function(e) {
        var currentStar = e.target;
        var allPreviousStars = getAllPreviousSiblings(currentStar);

        toggleClass(currentStar, 'hover');
        for (var j = 0; j < allPreviousStars.length; j++) {
            toggleClass(allPreviousStars[j], 'hover');
        }
    });

    stars[i].addEventListener('click', function(e) {
        var currentStar = e.target;
        var allPreviousStars = getAllPreviousSiblings(currentStar);

        toggleClass(currentStar, 'active');
        for (var j = 0; j < allPreviousStars.length; j++) {
            toggleClass(allPreviousStars[j], 'active');
        }
    });
}

function getAllPreviousSiblings(element) {
    var siblings = [];

    while (element = element.previousSibling) {
        if (element.nodeType === 3) {
            continue; // 跳过文本节点
        }

        siblings.push(element);
    }

    return siblings.reverse();
}

function toggleClass(element, className) {
    if (!element || !className) {
        return;
    }

    var classString = element.className,
        nameIndex = classString.indexOf(className);
    if (nameIndex === -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
    }

    element.className = classString;
}

通过这些 JavaScript 代码，针对鼠标移动和点击后的事件，我们可以实现图标的更改和状态的反馈。

到这里，我们的 RatingBar 便已经完成了基本的自定义，您可以根据您自己的需求更改样式和代码，以适应您的应用场景。

总结

在本文中，我们介绍了如何自定义基本的 Material Design 风格下的 RatingBar。首先，我们通过一组 Material icons 图标创建了一个最基本的 RatingBar，并通过 CSS 和 JavaScript 自定义了星级图标的颜色、大小、填充状态和动画等。

通过这些知识，您可以更有针对性地为 RatingBar 添加自定义效果，让您的应用更加符合您的预期和需求。同时，如果您对 Material Design 设计语言有深入的理解，那么您也可以更好地了解如何为控件添加 Material Design 风格。

完整的示例代码可在 GitHub 仓库中下载。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6593ec4ceb4cecbf2d889daa

Material Design 下自定义 RatingBar 的实现方式

前置技能

基础实现

自定义基础 RatingBar

总结

纠错反馈