Question

我正在创建一个包含一系列模拟时钟的页面，这些模拟时钟可以包含会议（如果有会议，那个时间段在时钟上突出显示为蓝色），其中每个模拟时钟代表不同的一天。

我正在尝试这样做，以便如果您点击已安排会议的模拟时钟的一部分（即该部分为蓝色），则Bootstrap Popover会显示有关会议的详细信息。我正在处理一个名为piechart.js的文件，但目前我只知道如何使用内置于html中的按钮创建弹出窗口。

如果我想在piechart.js中处理此点击，并在该特定时钟创建一个位于的，包含该特定会议信息（存储在文件名为meeting.js，我知道如何从那里获取会议信息），我如何使用javascript完成此操作？我是这些语言的新手所以请耐心等待！谢谢！

Answer 1

由于蓝色很可能是由样式表类更改控制的，只需找到该类的元素并应用弹出框即可。我在datatables.net网格上使用mouseover事件执行了此操作（在createdRow方法期间，我向行添加了“someclass＆＃39;”以区别于页面上的其他tds。）

function setPopover() {

    $('.someclass').on('mouseenter', function (e) {
        $('.someclass').not(this).popover('destroy');
        var InstId = $(this).find("td:first-child").html();
        var InstName = $(this).find("td:first-child").next("td").html();
        if (!$(this).data("bs.popover")) {

            $(this).popover({
                placement: 'right',
                trigger: 'manual',
                html: true,
                title: InstName,
                content: function () {
                    return $.ajax({
                        url: '@Url.Action("ControllerMethod", "Controller")',
                        data: { id: InstId },
                        dataType: 'html'                            
                    }).responseText;
                }
            });

        }

        $(this).popover('show');
    });
}

Answer 2

要使用JavaScript创建新的弹出窗口，您可以使用popover()函数。

要确定已安排会议的日期，我们可以添加自定义data-booked属性。

选择器$('[data-booked="true"]')是一个属性选择器，只显示该特定按钮的弹出窗口。

如果您点击预订日（今天）的按钮，您将看到一个弹出框，但如果您点击另一个按钮，则不会显示任何内容，因为该日未被预订。

＆＃13;

var times = ["8:00", "9:00", "10:00", "11:00", "12:00", "1:00"];

function randomTime() {
    return times[Math.floor(Math.random() * times.length)];
}

$('[data-booked="true"]').popover({ 
  html: true,
  title: "<span class='booked'>This is booked</span>", 
  content: "Meeting at " + randomTime() 
});

＆＃13;

.button-group {
  margin: 50px;
}

.booked {
  background: blue;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="button-group">
  <button data-booked="true" class="btn btn-success" id="today">Today</button>
  <button data-booked="false" class="btn btn-warning" id="tomorrow">Tomorrow</button>
</div>

＆＃13;

如何从Javascript创建Bootstrap popover？

2 个答案: