2019-12-09 17:15:31 C1oak 阅读数 10

 效果如下:

  1. 创建component
    ionic g component components/popover
    ​​​​​
    
    
  2. 在 app.module.ts中引入 popover的component
  3. 在需要使用的页面引入popover 组件 以及 PopoverController
  4. 编写弹出事件
2013-12-09 16:19:33 scrawlor 阅读数 10448

最近在写一个web网站,前端方面,都是初学的,用到了一个bootstrap的popover,但是有些东西默认的不太好用,就只能自己修改了。

比如说默认只有点击触发的那个按钮才能关闭pop,而现在我想点击Popover外区域自动关闭Popover。


这个时候可以给Body加一个监听。

$('body').on('click', function(event) {
    var target = $(event.target); // One jQuery object instead of 3

    // Compare length with an integer rather than with 
    if (!target.hasClass('popover')
            && target.parent('.popover-content').length === 0
            && target.parent('.myPopover').length === 0
            && target.parent('.popover-title').length === 0
            && target.parent('.popover').length === 0 && target.attr("id") !== "folder") {
        $('#folder').popover('hide');
    }
});
上面的代码解释如下:

给body添加一个click监听。

然后获取到当前的target。

这个时候怕段target的父亲节点是不是在popover里面。

如果在,说明当前鼠标点击发生在pop里,

如果不在,就触发下面的按钮,关闭pop。

 $('#folder').popover('hide');

2015-10-26 23:19:47 xianlaowu 阅读数 964

Popover 是一个新型的弹出窗口。 

apple 文档里面这样说: 

NSPopover类提供了一种方法在现有相关内容在屏幕上显示更多的内容。Popover窗口定位相对于现有内容。

锚点(anchor )是用来表示这两个单元的内容之间的关系。Popover窗口指定视觉特征出现,以及确定哪些用户交互行为将导致弹出窗口关闭。瞬态Popover窗口关闭以应对大多数的用户交互行为,而

而半瞬态Popover窗口关闭当用户与包含弹出窗口的定位视图的窗口。应用程序定义的Popover窗口的行为通常不由开发人员方面关闭。

系统相对于其定位视图自动定位每个popover窗口,popover窗口跟随其定位视图移动。定位视图内的一个定位矩形内可以指定额外的粒度。

popover窗口通过适当的delegate 方法实现拖动时,它可以分离成为一个独立的窗口。


我英语还不够好,就算借助翻译,也觉得很难懂。好在我们大致知道了。我们先不做任何说明,先实现一个例子,将一个这样的窗口显示出来,并做到控制它关闭。

首先建立一个cocoa 普通应用。

import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {
    <pre name="code" class="plain" style="color: rgb(187, 44, 162); font-size: 11px; font-style: italic;">@IBOutlet weak var window: NSWindow!


    func applicationDidFinishLaunching(aNotification: NSNotification) {
        // Insert code here to initialize your application
    }

    func applicationWillTerminate(aNotification: NSNotification) {
        // Insert code here to tear down your application
    }

contentViewController 属性 -- 视图控制器管理popover的内容

现在我们需要提供一个ViewController,来给popover提供显示内容。要做到这一点,手下要建立一个NSViewController的子类,选择建立xib。你可以在这个xib里面添加一些内容,文本了,按钮拉等等。反正我们这次不打算用,你可以任意。

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    var popover : NSPopover?

    lazy var poverController : PopoverController? = {
        return PopoverController(nibName: "PopoverController", bundle: nil)
        }()
    
    @IBOutlet weak var window: NSWindow!

接着我们在window变量定义前面添加两个属性。就不解释了。

我们打算点击一个按钮,然后让这个popover窗口弹出来,再点击一个按钮,让这个popover窗口关闭。所以我么要在mainmenu.xib里面添加两个按钮。并建立相应的action。代码如下。

   @IBAction func ClosePopover(sender: AnyObject) {
       popover?.performClose(self)
    }
    @IBAction func DisplayPopover(sender: AnyObject) {
        
        if ( popover == nil ) {
            popover = NSPopover()
            
            self.window.contentView?.addSubview((poverController?.view)!)
            popover!.contentViewController = poverController
            
            let rc = NSMakeRect(40, 40, 100, 200)
            popover!.showRelativeToRect(
                rc, ofView: (poverController?.view)!, preferredEdge: NSRectEdge.MinY )
        }
        
    }

上面就是两个Action的代码。写这个文档之前,这些代码是测试过的,所以它能够工作。当你点击第一个按钮时候,会弹出popover窗口,点另一个时候popover窗口会消失。有点小问题,只能一次,第二次点击的时候,就没反应了。--嗯,但这不是问题。后面我还会继续研究,就这个话题继续下去,因为我可以确定这个东西会很有用。




popover
2019-05-30 15:26:01 qq_35484341 阅读数 126

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
</head>
<body>
    <input id='create-post1' type="" name="" onfocus='driver("create-post1")'>
    <input id='create-post2' type="" name="" onfocus='driver("create-post2")'>
    <input id='create-post3' type="" name="" onfocus='driver("create-post3")'>


    <div id="run-element-without-popover" onclick="driver1()">
        popover
    </div>

    <script type="text/javascript">
        function driver(id){
              const driver = new Driver();
            driver.highlight(`#${id}`);
        }


        function driver1(){
            const driver = new Driver({
                opacity: 0,
                closeBtnText: '关闭'
            });

            driver.highlight({
              element: '#run-element-without-popover',
              popover: {
                title: 'Title for the Popover',
                description: 'Description for it',
                position: 'button', // can be `top`, `left`, `right`, `bottom`
              }
            });
        }
    </script>

</body>
</html>

2016-12-18 00:53:10 sinat_34719507 阅读数 1263

在bootstrap中popover.js,popover英文是什么意思?

popover  ['pɒp,әuvә]
n.  膨松饼,薄空心酥饼(因过松泡,常涨出烤型外)
明显看是不正确的翻译,很烦闷,死记硬记单词 。

图灵计算机词典:
其实在bootstrap中popover是组合词:
popover=pop+over
1、pop
n.  砰然声, 枪击, 含气饮料, 流行音乐, 通俗艺术
vi.突然出现;发砰的响声
[计]1. 出现点, 邮局协议;
[计]2.上托,弹出(栈),退栈
2、over
prep.  在...之上, 遍于...之上, 越过
[计].在...上方(越过,遍及;adv.结束(翻转过来,过
3、popover=pop+over=弹出+在...上方=在上方弹出,即“弹出框”

4、在bootstrap中popover英文组合意思即“弹出框”!

5、弹出框(Popover):对应的插件文件“popover.js”模态-弹出框模块

bootstarp的popover使用

阅读数 1211

01-Popover跳转

阅读数 760

iphone popover库

阅读数 415

ionic4 popover

阅读数 826

没有更多推荐了,返回首页