Liferay 6.1开发学习(十三):弹出层/弹出对话框的使用

2012年11月04日 Liferay 评论 13 条 阅读 14,853 views 次

在日常的开发中,为了提高用户体验,经常会使用弹出层或者弹出框。在Liferay中可以使用AUI的标签及封装的JavaScript代码方便的达到这一目的。针对弹出内容的不同,弹出对话框大体上可以分为三种形式,弹出div层、弹出普通的HTML页或JSP页面、弹出portlet。

注意:本文的方法除了最后一个,其他的仅在6.1下面有效果。6.2的弹出方法请参看这篇文章:6.2弹出层的实现

一、弹出div层

有几种写法,本质上是一样的,一种是普通的JavaScript代码,一种是使用aui标签。

1、普通的javascript代码

<script>
    function test(){
    AUI().use('aui-dialog', function(A) {
        var popup = new A.Dialog(
            {
                bodyContent: A.one('#webDav').html(),
                centered: true,
                destroyOnClose: true,
                modal: false,
                title: '弹出层测试',
                width: 500,
                buttons: [
                {
                    label: '确定',
                    handler: function() {
                        alert('点击了确定');
                    }
                },{
                    label:'取消',
                    handler:function(){
                        this.close();
                    }
                }
                ]
            }
        ).render();
    });
}
</script>

代码看起来有点小复杂,其实很简单,逐步的说明一下:

var popup: 这是定义当前的弹出层对象。在其他地方可以使用popup.close()关闭当前的对话框。

bodyContent: A.one('#webDav').html():表示弹出层的正文,这里是弹出一个id为webDav的对象。A.one('#webDav').html()这是aui代码的写法(aui其实是YUI的衍生版,所以和YUI的用法基本上一样),表示选择id为webDav的对象,取其中的html代码。

centered:弹出后是否居中,默认为false.

destroyOnClose:是否在半闭时销毁

modal: 是否模态否,也就是是不是锁定背景是否让背景可以编辑,值为true/false,默认为false,为true时背景不可以编辑。

title:弹出层的标题,使用单引号或双引号。

width:弹出层的宽度,必须为数字,不能用百分比。如果不写为自适应。

height:弹出层的高度,如果不写为自适应。

buttons:在弹出层上面定义的按钮。非必须。我们一般添加确定和取消两个。多个按钮之间使用逗号分割,text的内容为按钮的显示值,handler为绑定的方法

2、使用aui标签

<aui:script use="aui-dialog">
    var create = A.one('#createNew');
        create.on(
            'click',
            function(event) {
                var popup = new A.Dialog(
                    {
                        bodyContent: A.one('#webDav').html(),
                        centered: true,
                        modal: true,
                        title: '弹出层测试',
                        width: 500
                    }
                ).render();
            }
        );
</aui:script>

和上面的的基本上差不多,这里是在createNew的对象上绑定了一个click的方法,如果此对象被点击了,执行弹出层代码。其他的和上面的一样。

上面使用的是aui标签,所以需要在页中引入

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

3、使用Liferay.provide

此种方法和上面的非常类似,如下:

<aui:script>
Liferay.provide(
    window,
    'showDialog',
    function() {
        var A = AUI();
        var dialog = new A.Dialog(
            {
                bodyContent: A.one('#webDav').html(),
                destroyOnClose: true,
                modal: false,
                title: '这是标题',
                width: 900
            }
        ).render();
    },
    ['aui-dialog']
);
</aui:script>

写法和上面的没有太多的区别,只是写法的不同。showDialog 这个参数其实就是函数名,在其他地方可以直接调用此方法来弹出下面的弹出层,如果是要传参数可以直接写在showDialog(arg)这个里面。上面的的function里面添加此参数。如function(arg),在下面直接使用arg参数即可。

二、弹出一个HTML页面或者是JSP页面。

弹出一个页面的方法和上面的基本上相同,具体看下面的示例。

<aui:script>
Liferay.provide(
    window,
    'showDialog',
    function() {
        var A = AUI();
        var url= "要弹出的页面的地址";
        var dialog = new A.Dialog(
            {
                destroyOnClose: true,
                modal: false,
                title: '这是标题',
                width: 900
            }
        ).plug(
            A.Plugin.IO,
                {
                    uri: url
                }
        ).render();
    },
    ['aui-dialog']
);
</aui:script>

不同之处是加了一个plug来显示待弹出的页面地址。在dialog里面也可以添加bodyContent属性,里面可以添加上在弹出的过程的提示语,比“页面正在加载中请稍候……”,在url加载后将替换上面的内容。

三、弹出一个portlet页面。

使用二里面的方法也可以弹出一个portlet页面,但是有时候会不能正常工作,步骤2的弹出的原理还是弹出一个div,在这个div里面加载目标页面的内容。弹出portlet页面我们需要弹出一个iframe,这样就可以使弹出的portlet页面正常工作。方法如下:

<aui:script>
    Liferay.provide(
        window,
        'showPortletUrl',
        function(url) {
            var instance = this;
                Liferay.Util.openWindow(
                    {
                        cache: false,
                        dialog: {
                            align: Liferay.Util.Window.ALIGN_CENTER,
                            after: {
                                render: function(event) {
                                    this.set('y', this.get('y') + 50);
                                }
                            },
                            width: 1000
                        },
                        dialogIframe: {
                            id: 'siteManagementIframe',
                            uri: url
                        },
                        title: '管理页面',
                        uri: url
                    }
                );
        },
        ['liferay-util-window']
    );
</aui:script>

在上面的方法中我是将待弹出的porltet的URL以参数的形式传进来的,调用的时候方法为:showPortletUrl(url)。dialogIframe中的id为弹出的iframe的id名,uri为待加载的portlet页面地址。

注意:如果要弹出porltet,请讲windowState设为pop_up,也就是LiferayWindowState.POP_UP这个变量。


用户头像

13 条留言  访客:9 条  博主:2 条   引用: 2 条

  1. 请问,liferay怎么使用其他系统的portlet,其他系统的portlet怎么编写,求大神给个例子。

    • avatar 胡启稳

      其他系统的portlet?啥意思,是现在有两个portal系统,需要在liferay中使用另一个的?是要迁移还是集成?
      集成的话可以使用WSRP
      迁移还是需要适量的调整一些代码的

  2. 请问,弹出层里的buttons 的text显示不出来怎么回事呢?

  3. 我在js里面调用第一个的时候为什老是报错呢…

    Uncaught TypeError: undefined is not a function

    就是这样的…冷大 什么原因啊…

  4. avatar 小二

    用[三、弹出一个portlet页面。]的方式弹出一个portlet,可是关闭popup用什么方法呢?

  5. 照着上面写,new A.Dialog()这个法一直报: Uncaught TypeError: undefined is not a function,请问是什么原因呀…

  6. 弹出框上的’x’关闭按钮,如何监听这个按钮的事件?

来自外部的引用: 2 条

  • Liferay 6.2弹出层 | IT人生录
  • Liferay弹出层如何将弹出页面的值返回 | IT人生录

给我留言

Copyright © IT人生录 保留所有权利.   主题设计 知更鸟 滇ICP备16001547号-1

用户登录

分享到: