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

忠诚的桑帕约

我的网站上有一个评级系统,我想在星星上添加一个弹出窗口(引导程序的弹出窗口)!

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

一些替代品?

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

[工作演示]

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');
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何获取语义UI弹出窗口的当前悬停元素

来自分类Dev

语义UI评级onRate()

来自分类Dev

语义UI弹出窗口不显示

来自分类Dev

如何在语义ui中的边栏内容上添加事件?

来自分类Dev

如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

来自分类Dev

如何在动态添加的元素上切换Bootstrap弹出窗口

来自分类Dev

如何在剑道 UI 中创建确认弹出窗口?

来自分类Dev

加载弹出窗口时如何在空白弹出窗口中添加启动画面

来自分类Dev

如何在Javascript的弹出窗口中添加文本?

来自分类Dev

如何在highchart的标志中添加弹出窗口?

来自分类Dev

如何在mouseover事件上触发启动弹出窗口

来自分类Dev

如何在屏幕上居中显示弹出窗口?

来自分类Dev

如何在Firefox上使用Inspector分析弹出窗口?

来自分类Dev

语义UI弹出框

来自分类Dev

如何在画布内的Fabric JS图像上添加文本框弹出窗口(jQuery工具提示或类似内容)?

来自分类Dev

如何在锚点(视图)上添加多个列表弹出窗口并将每个listpopupwindow定位到锚点?

来自分类Dev

通过语义UI在图像上添加文本

来自分类Dev

如何在JHipster UI上添加DatePicker

来自分类Dev

如何在语义UI中将卡片居中?

来自分类Dev

如何在语义UI中提交表单?

来自分类Dev

如何在语义UI中将卡片居中?

来自分类Dev

语义UI:如何在多选下拉菜单中取消添加标签

来自分类Dev

如何在另一个中使用语义 ui 添加 div?

来自分类Dev

语义ui弹出窗口,可使用手册/单击

来自分类Dev

如何使用传单路由机在航路点标记(包括开始和结束)上添加弹出窗口?

来自分类Dev

如何使用传单路由机在航路点标记(包括开始和结束)上添加弹出窗口?

来自分类Dev

如何在语义ui react下拉菜单上设置默认值

来自分类Dev

如何在TinyMCE 4中为windowManager弹出窗口添加样式?

来自分类Dev

如何在添加窗口中通过html helper更改弹出剑道网格的标题

Related 相关文章

  1. 1

    如何获取语义UI弹出窗口的当前悬停元素

  2. 2

    语义UI评级onRate()

  3. 3

    语义UI弹出窗口不显示

  4. 4

    如何在语义ui中的边栏内容上添加事件?

  5. 5

    如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

  6. 6

    如何在动态添加的元素上切换Bootstrap弹出窗口

  7. 7

    如何在剑道 UI 中创建确认弹出窗口?

  8. 8

    加载弹出窗口时如何在空白弹出窗口中添加启动画面

  9. 9

    如何在Javascript的弹出窗口中添加文本?

  10. 10

    如何在highchart的标志中添加弹出窗口?

  11. 11

    如何在mouseover事件上触发启动弹出窗口

  12. 12

    如何在屏幕上居中显示弹出窗口?

  13. 13

    如何在Firefox上使用Inspector分析弹出窗口?

  14. 14

    语义UI弹出框

  15. 15

    如何在画布内的Fabric JS图像上添加文本框弹出窗口(jQuery工具提示或类似内容)?

  16. 16

    如何在锚点(视图)上添加多个列表弹出窗口并将每个listpopupwindow定位到锚点?

  17. 17

    通过语义UI在图像上添加文本

  18. 18

    如何在JHipster UI上添加DatePicker

  19. 19

    如何在语义UI中将卡片居中?

  20. 20

    如何在语义UI中提交表单?

  21. 21

    如何在语义UI中将卡片居中?

  22. 22

    语义UI:如何在多选下拉菜单中取消添加标签

  23. 23

    如何在另一个中使用语义 ui 添加 div?

  24. 24

    语义ui弹出窗口,可使用手册/单击

  25. 25

    如何使用传单路由机在航路点标记(包括开始和结束)上添加弹出窗口?

  26. 26

    如何使用传单路由机在航路点标记(包括开始和结束)上添加弹出窗口?

  27. 27

    如何在语义ui react下拉菜单上设置默认值

  28. 28

    如何在TinyMCE 4中为windowManager弹出窗口添加样式?

  29. 29

    如何在添加窗口中通过html helper更改弹出剑道网格的标题

热门标签

归档