Semantic-UI 评级类型 Heart

Semantic-UI 是一个流行的 UI 框架，可以帮助程序员快速构建漂亮、现代化的网站。其中，评级类型 Heart 是 Semantic-UI 提供的一种评分控件，可以让用户在一组预定义的星形或心形符号中选择一个来表示对某个项目或事物的评价。

使用方法

要使用 Semantic-UI 的评级类型 Heart，你需要引入 Semantic-UI 的 CSS、JavaScript 文件，然后按照以下格式在 HTML 中添加评级类型 Heart 控件：

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

在这个例子中，我们创建了一个包含五个心形符号的评级类型 Heart 控件。此外，我们还为这个控件添加了 ui 和 heart 两个类（rating 类也是可选的，用于添加其他样式）。

当用户用鼠标单击评级类型 Heart 中的一个图标时，JavaScript 代码就会捕获此事件，并根据用户点击的图标的位置来计算评分。你可以使用 jQuery 或纯 JavaScript 来获取评分。

比如：

// 使用 jQuery 获取评分
var rating = $('.ui.heart.rating').rating('get rating');
console.log('用户评分为：' + rating);

// 使用纯 JavaScript 获取评分
var rating = document.querySelector('.ui.heart.rating').getAttribute('data-rating');
console.log('用户评分为：' + rating);

选项配置

Semantic-UI 的评级类型 Heart 还提供了一些选项，可以按需调整控件的行为和外观。比如，你可以设置默认评分、是否可编辑、是否使用半星等等。以下是几个常用的选项配置：

// 设置默认评分为 3
$('.ui.heart.rating').rating('set rating', 3);

// 禁用编辑功能
$('.ui.heart.rating').rating('disable');

// 开启半星模式，让用户可以给出 0.5、1、1.5、2 等评分
$('.ui.heart.rating').rating('setting', 'half', true);

总结

Semantic-UI 的评级类型 Heart 是一种简单易用的评分控件，可以让用户在一组预定义的符号中选择一个评分。无论是评价文章、电影、产品，还是需要用户提供反馈意见的场景，都可以用这个控件来实现。通过组合不同的选项，你可以自定义评分控件的外观和行为，以满足你的业务需求。