AngularStrap -- Popovers

AngularStrap中的Popovers，提供了一个popover的类似tooltip的小窗体，内部的内容可以简单，也可以提供复杂和交互操作。

先看官网提供的样例：

这个是比较复杂的，有模板html提供了复杂的交互功能。

下面看看具体的使用。

Plugin dependency
Popovers require the tooltip module to be loaded.

下面提供的4个例子操作。

<!-- Button to trigger a default popover with a scope as an object {title:'', content:'', etc.} -->
<button type="button" class="btn btn-lg btn-primary" data-placement="bottom" data-animation="am-flip-x" bs-popover="popover">Click to toggle popover<br><small>(using an object)</small>
</button><!-- You can also use data-attrs to assign scope variables -->
<button type="button" class="btn btn-lg btn-primary" data-placement="top-right" title="{{popover.title}}" data-content="{{popover.content}}" data-trigger="focus" bs-popover>Click to toggle popover<br><small>(using data-attrs)</small>
</button><!-- You can use a custom html template with the `data-template` attr -->
<button type="button" class="btn btn-lg btn-danger" title="{{popover.title}}" data-content="{{popover.content}}" data-template-url="popover/docs/popover.demo.tpl.html" data-animation="am-flip-x" data-auto-close="1" bs-popover>Custom Popover<br><small>(using data-template)</small>
</button><!-- A popover can also be triggered programmatically using the $popover service -->
<button type="button" id="popover-as-service" class="btn btn-lg btn-primary" title="{{popover.title}}" ng-click="togglePopover()">Click to toggle popover<br><small>(using $popover service)</small>
</button>

Usage
Append a bs-popover attribute to any element to enable the directive.

The module exposes a $popover service
Available for programmatic use (mainly in directives as it requires a DOM element).

var myPopover = $popover(element, {title: 'My Title', content: 'My Content', trigger: 'manual'});

AngularStrap -- Popovers相关推荐

Bootstrap系列之弹出框（Popovers）
文章の目录 1.概述 2.Example: Enable popovers everywhere 3.Example: Using the container option 4.Example 4.1 ...
【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记24 popovers弹窗
上几话中我们详细了解了几种segue,我们也了解到了多MVC模式的几种控制器,比如导航.选项卡和分栏,除了这三种多MVC的模式之外,还有一种popover,它跟其他三种不太一样.首先先来认识一下pop ...
FSWD_BootStrap
Course Overview 响应式设计 grid system CSS Button Form Tables panel well image media alert progress bar J ...
【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势...
A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
idea java编译报错_intellij-idea,java_idea 编译报错，intellij-idea,java - phpStudy
idea 编译报错简单的 helloworld 竟然坑了我一天啦 /Library/Java/JavaVirtualMachines/jdk1.8.0_11.jdk/Contents/Home/bi ...
在iOS 8中使用UIAlertController
本文转载至 http://www.cocoachina.com/ios/20141126/10320.html iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨 ...
[APB VNext 笔记] UI
一直想给我做的服务写UI.但苦于现在ABPVNext框架对SPA支持不好.只好先放弃VUE.先弄个UI在说.ABPVNext中的框架都是用Helper封装好的Label.不知道怎么使用,于是翻源代码. ...
BootStrap入门教程 (四)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
必须去收藏14个响应式布局的前端开发框架
必须去收藏14个响应式布局的前端开发框架前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式 ...

AngularStrap -- Popovers

AngularStrap -- Popovers相关推荐

最新文章

热门文章