2

我正在尝试使 popover 插件在 Javascript 字符串中工作。因此，当用户将鼠标悬停时geolocation，弹出框将出现，并在鼠标移开时消失。

<script type="text/javascript">
     $('#directions-panel').text("We can't give you directions to our office as you don't have", <a href="#" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> " enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located.");
</script>

并使用这样的东西调用？

$("[rel=popover]")
    .popover({
        offset: 10
    })
    .mouseover(function(e) {
        e.preventDefault()
    })

我知道这有点过头了，但是我四处搜索，找不到任何与我想做的类似的事情。我确定可以做到，有人指出我正确的方向吗？

编辑：

我知道在联系页面中有以下内容：

<div id="directions-panel">
        <div id="directions-error-message" style="visibility:hidden">
          We can't give you directions to our office as you don't have <a href="#" id="geoloc-popover" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located.
        </div>
</div>

并且 DIVdirections-error-message在以下 JSfunction failure()触发时可见：

function failure() {
        alert("Your browser does not have geolocation enabled so we can't give you directions to our office. Enable geolocation and try again, or consult the map for our address.");
        $("#directions-error-message").css({
          visibility: 'visible'
        });     
        var destMapOptions = {
          zoom:15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(ourLocation.lat, ourLocation.lng)
        }
        map = new google.maps.Map(document.getElementById("map-canvas"), destMapOptions);
        marker = new google.maps.Marker({
          position: ourLatLng,
          map: map,
          draggable: false,
          animation: google.maps.Animation.DROP,
          title: "Hello"
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
    }


    $(function() {
        $('#directions-error-message').popover({
            selector: '[rel="popover"]', 
            trigger: 'hover'
        });
    })

有没有办法让directions-error-messageDIV 中的“地理位置”触发弹出框？

4

2 回答 2

1

为什么不尝试这样的事情：

<div style="visibility:hidden">
  We can't give you directions to our office as you don't have", <a href="#" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> " enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located.
</div>

然后用 javascript 改变 div 的可见性。这样，设置标题的 jQuery 将识别链接，但用户在您希望他们看到之前不会看到它。

于 2012-09-05T11:55:15.077 回答
1

Twitter Bootstrap 的 Popover 插件确实有一个选项可以启用其 data-api 来触发切换弹出框。启用它将使所有具有正确标记的动态添加的元素都可以正常工作，而无需在 JavaScript 中进行进一步的初始化调用。

该功能默认禁用主要是因为订阅页面上的所有mouseenter和mouseleave事件可能会导致性能问题（这是 TBS < 2.1 中的默认设置）。如果您可以保持激活区域相对特定，那么您应该在性能方面做得很好。

要为#directions-panel悬停启用它，语法为：

$('#directions-panel').popover({selector: '[rel="popover"]', trigger: 'hover'});

包括弹出框在内的所有后续面板更新将默认处于活动状态。

于 2012-09-05T19:09:47.267 回答