Question

我的网站上有一个评级系统，我希望在星空上添加一个弹出窗口（用于bootstraper的弹出窗口）！

 <div id="rating" class="ui massive star rating" data-rating="0" data-max-rating="5"></div>

一些替代方案？

Answer 1

此功能目前在Semantic-UI中不可用，但您可以通过执行以下操作来实现此功能：

[Working DEMO]

1-初始化您的评级模块并为其添加设置：

$('.ui.rating')
  .rating({
    maxRating: 5,
  })
;

2-创建一个包含每颗星的评级文本的数组：

var rate= ['hate it','bad','just ok','like it','love it'];

3-在data-ratetext属性

中为每个开头添加该文本

$(document).ready(function () {
    $.each($('#rating > i.icon'), function (index, item) {
        $(item).attr('data-ratetext', rate[index]);
    });
})

4-使用data-ratetext属性的文本初始化每个星标的弹出窗口：

 $(document).on('mouseenter', '#rating > i.icon', function() {
    $(this)
       .popup({
           title: $(this).attr('data-ratetext'),
            on:'hover'
       })
       .popup('show');
});

如何在评级上添加弹出窗口？ [语义UI]

1 个答案: