标签: popover

我在链接点击上成功使用了bootstrap popover.我在popover中有一些表单元素:textfield,checkbox和button.我能够使用jquery.live()附加一个按钮监听器,但在该按钮监听器中,我似乎没有任何正确的表单元素的访问权限.如果我在控制台日志中跟踪它们,它们就存在,但它们的值始终保持原始默认值,所以如果我去$('#txtComment').val(); 无论我放入字段中,字符串总是相同的.

是否有任何示例,教程或源代码我可以看一下在引导程序弹出窗口中使用任何类型的交互性的东西？

这就是我设置popover的方式:

this.commentLink.popover({
  trigger: 'manual',
  placement: 'right',
  html : true,
  content: function () {
    return $('#commentPopout').html();
  }
}).popover('hide');

//jquery.on won't work here so we use live
$('#btnSubmitComment').live('click', this.proxy(this.commentSubmitClick));

然后我这样做是为了成功展示它:

this.commentLink.popover('show');

这是按钮点击功能:

commentSubmitClick: function(e){
  console.log($('#txtComment').val());//always shows default text regardless of what I've actually typed in the field
}

我有一个底部导向的弹出窗口,我想比默认的弹出窗口更宽容,一旦鼠标离开触发器就会消失.

$('#example').popover({
  html: true,
  trigger: 'hover',
  container: '#example',
  placement: 'bottom',
  content: function () {
      return '<div class="box">here is some content</div>';
  }
});

只要鼠标悬停在触发器或弹出窗口内容上,我就可以保持打开状态,但这对用户来说很难,因为他们必须将鼠标从触发元素移动到箭头到内容而不离开这些区域为了与popover互动.考虑两种解决方案,两种解决方案都不起

1)延迟选项应该这样做.添加 delay: {hide: 500} 到popover调用会在鼠标离开后离开popover,但在它消失之前重新进入触发器elem或popover不会告诉bootstrap保持popover打开,因此在初始超时结束时消失.

2)加宽箭头的包含元素,使鼠标从触发元素到触发元素和弹出窗口之间的背景弹出工作(鼠标永远不会离开触发器/元素).除箭头之外的以下工作是使用重叠的CSS边框绘制的,因此背景不透明:http://jsfiddle.net/HAZS8/

.popover.bottom .arrow {
    left: 0%;
    padding-left:50%;
    padding-right:50%;
}

解决方法是使用jquery硬连接mouseover和mouseleave事件,或者用图像替换重叠边框箭头.更好的修复？

我正在制作一个位于状态栏的应用程序.单击状态项时,将弹出NSPopover.

它看起来像这样:

这就是问题所在:我希望它是"瞬态的",即如果我点击弹出窗口外的任何地方,它就会关闭.虽然当弹出窗口在窗口中时NSPopoverBehaviorTransient正常工作,但当它在状态栏中时它不起作用.

我怎样才能自己实现这种行为？

我想在几秒钟后自动隐藏Bootstrap popovers.当用户将鼠标悬停在控件上时,必须显示弹出窗口,但如果用户未移动鼠标指针,则必须在几秒钟后自动隐藏此弹出窗口.

这是因为在手机或平板电脑,当用户点击一个控制时,会显示酥料饼是很重要的,而重点仍然是在用户键入的东西相同的控制,具有酥料饼阻碍它.

我想让Fullcalendar使用twitter boostrap popovers.
如果我点击一个事件,我想在popover中显示一些细节.
所以首先将这个lil片段添加到Fullcalendar:

eventClick: function(event, jsEvent, view) {
        $this = $(this);
        $this.popover({html:true,title:event.title,placement:'top'}).popover('show');
        return false;            
    },

但现在我遇到了两个问题:

1. Fullcalendar位于具有overflow:hidden之类的div中,因为popover会在Fullcalendar的边框上被切断.我该如何解决这个问题？
2. 与问题2类似,我想通过顶部,左侧,右侧或底部的函数放置弹出窗口,具体取决于事件在Fullcalendar网格中的位置.我该怎么做这样的功能？

谢谢!

我试图在我的网页上使用twitter bootstrap popover,当我发现当它放在<div>with 下面时它不起作用ng-repeat.它在div类中的顶部工作正常,不包含ng-任何人都知道它为什么会发生,我该如何解决这个问题？

<h3>Students Without Team</h3>
 <div class="accordion" id="studentNoTeamAccordion" >
         <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
            data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea>  
                   <P>
                      <input class='btn btn-primary' type='submit' value='Send' />
               </form>"
            data-placement="right" data-original-title="Enquiries">Send Enquiries
        </a>
  <div class="accordion-group" ng-repeat="(key,val) in stud_finding"><
      <a href="#" class="btn btn-large btn-primary" rel="popover"data-html="true"
         data-content="
               <form>
                   <textarea class='input-xlarge' rows='12' type='text'></textarea> 
                   <P>
                       <input class='btn btn-primary' type='submit' value='Send' />
               </form>"

我正在使用Angular UI Bootstrap创建一个弹出框,但我无法找到在弹出框中添加关闭按钮的选项.

我自定义了弹出模板以包含关闭按钮.但是我仍然无法找到关闭弹出窗口的函数/事件.设置isOpen到false是第一次起作用,因为它只是覆盖了函数 - 但此后变得无法使用.

 <button popover-placement="bottom" popover="test">POPOVER WITH CLOSE<button>

这是模板脚本:

angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/popover/popover.html",
    "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
    "  <div class=\"arrow\"></div>\n" +
    "\n" +
    "  <div class=\"popover-inner\">\n" +
    "      <button ng-click=\"isOpen = !isOpen()\" class=\"btn-popover-close btn btn-primary\">Close</button>\n" +
    "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
    "      <div class=\"popover-content\" ng-bind=\"content\"></div>\n" +
    "  </div>\n" +
    "</div>\n" +
    "");
}]);

我想写一个关闭按钮的指令来触发"POPOVER WITH CLOSE"按钮的"点击"事件.但我不确定这是否是要遵循的方法.

什么是正确的方法？

使用悬停触发器显示弹出窗口工作正常.

使用单击触发器显示弹出窗口工作正常.

现在,如何在触发图像悬停时显示弹出窗口,但如果用户单击图像,取消悬停并启动单击切换？换句话说,悬停显示弹出窗口并单击弹出窗口的"引脚".

HTML非常标准:

<li>User<span class="glyphicon glyphicon-user" rel="popover" data-trigger="click" data-container="body" data-placement="auto left" data-content="Body Text" data-original-title="Title Text"></span></li>

和popover初始化,更无聊:

$(function () { 
    $("[rel=popover]").popover();   
});

从我迄今所看到的,它很可能是该解决方案是一个很好的复杂的popover('show'),popover('hide')和popover('toggle')电话,但我的JavaScript/jQuery的foo是达不到的任务.

编辑:

使用@hajpoj提供的代码作为基础,我添加了一个函数来监听hidden.bs.popover事件以尝试在触发click事件后重新启用mouseenter和mouseleave事件,但是它确实使'hover'再次工作,它杀死点击...

var $btn2 = $('#btn2');

    var enterShow = function() {
        $btn2.popover('show');
    };

    var exitHide = function() {
        $btn2.popover('hide');
    }

    $btn2.popover({trigger: 'manual'})
            .on('mouseenter', enterShow)
            .on('mouseleave', exitHide)
            .one('click', function() {
                   $btn2.off('mouseenter', enterShow)
                        .off('mouseleave', exitHide)
                        .on('click', function() {
                            $btn2.popover('toggle');
                        });
            });

$('#btn2').on('hidden.bs.popover', function () {
  $btn2.on('mouseenter', enterShow) …

我在"重复区域"中使用Bootstrap Popover来显示推荐书.每个推荐都有一个"查看属性详细信息"按钮,可以打开弹出窗口.在Pop中我希望显示与每个推荐和图像细节相关联的图像.图像路径存储在数据库的一列中,以便显示我需要将图像源绑定到内容的每个推荐的图像,但它不接受PHP.我使用的脚本允许我将html写入内容,但需要动态创建图像.动态文本适用于'a'标记'标题'选项,但不适用于内容.

任何人都可以阐明这一点吗？

这就是我所拥有的.

<script type="text/javascript">
 $(document).ready(function() {
  $("[rel=details]").popover({
  placement : 'bottom', //placement of the popover. also can use top, bottom, left or     right
  html: 'true', //needed to show html of course
  content : '<div id="popOverBox"><img src="<?php echo $row_rsTstmnlResults['image']; ?>"        width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
    <a href="#" rel="details" class="btn btn-small pull-right" data-toggle="popover"     title="<?php echo $row_rsTstmnlResults['property_name']; ?>" data-content="">View Property</a>

我是棱角分明的新手.我想在元素的右侧显示角度bootstrap popover中的表单错误.我试图创建指令,并在更改类时得到一个元素.但我不知道如何移动下一步.

(function(angular) {
  'use strict';
var app=angular.module('formExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
    };

    $scope.reset = function(form) {
      if (form) {
        form.$setPristine();
        form.$setUntouched();
      }
      $scope.user = angular.copy($scope.master);
    };

    $scope.reset();
  }]);
app.directive("alert", function(){
    return {
        restrict: 'C',
        priority: -1000,
        link: function(scope, ele, attrs, ctrl){
          scope.$watch(function() {console.log(ele.attr('class')); })
          if (ctrl) {
            console.log("applying custom behaviour to input: ", ele.attr('id'));
            // ... awesomeness here
          }
        }
    };
});
})(window.angular);

我只是想显示错误消息

1. 当用户单击保存按钮时(所有表单字段错误消息)
2. 元素的模糊(仅用于失去焦点的元素)

这是我的plnkr …