语义 UI 评级类型

介绍

语义 UI 评级（Semantic UI Rating）是一种用户评级的组件。它可以在网页上显示多种不同的评级，如星级评级、百分比评级和点评级。使用语义 UI 评级，可以方便快捷地为用户提供评价和反馈，提高用户体验和参与度。

特点

• 多种评级类型：支持星级评级、百分比评级、点评级等多种评级类型，可根据实际需求选择使用。
• 自定义颜色：支持自定义评级颜色、大小和形状等属性，可以通过 CSS 样式优化评级显示效果，使其与网站整体风格相统一。
• 高度可定制：支持自定义评级数量、初始评级、最小和最大评级等属性，可以根据具体应用场景进行灵活配置。
• 易于使用：使用简单、易于上手，只需少量的代码即可实现基本的评级功能。

使用方法

<div class="ui rating">
  <i class="star icon"></i>
  <i class="star icon"></i>
  <i class="star icon"></i>
  <i class="star icon"></i>
  <i class="star icon"></i>
</div>

在 HTML 中定义一个 ui rating 类名的 div 元素，然后按照评级数量添加对应数量的评级图标。

为了给评级增加触发事件并能量化评级，可以通过加脚本来实现。以下是常见的 JavaScript 代码：

$('.ui.rating')
  .rating('disable')
  .rating('setting', 'onRate', function(value) {
    console.log('Rating value:', value);
  });

此示例将通过 jQuery 获取评级元素，禁用评级，然后绑定评级事件，评价值将记录在控制台中。

演示

以下是一个星级评级的示例：

以下是一个百分比评级的示例：

以下是一个点评级的示例：

结束语

语义 UI 评级是一种实用的用户评价组件，通过灵活的配置和定制，可以满足不同场景和需求的评价和反馈需求。如果你想进一步学习语义 UI 的相关知识，建议查看官方文档和示例代码。