Liferay 6.2弹出层/弹出框的实现

2016年03月25日 Liferay 评论 2 条 阅读 705 views 次

曾经写过一个6.1的弹出层的博客:《Liferay 6.1开发学习(十三):弹出层/弹出对话框的使用》。Liferay更新到6.2之后,在UI层采用了Bootstrap,所以很多写法有变化,弹出层的写法也是一样的。之前那篇博客里面的除了最后一个外,其他的都不能再使用。

在6.2里面如果要使用弹出层,需要使用如下的代码:

AUI().use('aui-modal',function(A) {
    var modal = new A.Modal(
      {
        //bodyContent: '正文件',
        contentBox:'#bodyContent',
        //srcNode : '#bodyContent',
        centered: true,
        headerContent: '<h3>Modal header</h3>',
        modal: true,
        destroyOnHide: true,
        render: '#modal',
        width: 450,
        toolbars:{
        footer:[
              {
                 label: '取消',
                 on: {
                   click: function() {
                     modal.hide();
                   }
                 }
               },
               {
                 label: '确定',
                 on: {
                   click: function() {
                     alert('点击了确定,可以在这里调用其他函数');
                   }
                 },
                primary: true
               }         ]
        }
      }
    ).render();
});

这是一个完整带按钮的弹出层,弹出的一个DIV,如果是不需要按钮将下面的footer部分去掉即可。

弹出一个JSP或者是portlet

上面的代码是弹出一个div的方法,如果是要弹出一个页面,Use 添加:'aui-dialog-iframe-deprecated','io-plugin-deprecated',完整的如下:

function popTest(){
AUI().use('aui-modal','aui-dialog-iframe-deprecated','io-plugin-deprecated'
,function(A) {
var url = '${toAddUrl}';
    var modal = new A.Modal(
      {
        bodyContent: '正文件',
        //contentBox:'#bodyContent',
        //srcNode : '#bodyContent',
        centered: true,
        headerContent: '<h3>Modal header</h3>',
        modal: false,
        destroyOnHide: true,
        render: '#modal',
        width: 750,
        height:600,
        toolbars:{
        footer:[
              {
                 label: '取消',
                 on: {
                   click: function() {
                     modal.hide();
                   }
                 }
               },
               {
                 label: '确定',
                 on: {
                   click: function() {
                     alert('点击了确定,可以在这里调用其他函数');
                   }
                 },
                primary: true
               }         ]
        }
      }
    ).plug(
       A.Plugin.DialogIframe,
        {
        uri: url,
        }
       )
.render();
});
}

主要就是在下面添加了一个plug,用来接受要弹出的页面的地址。

用户头像

2 条留言  访客:0 条  博主:0 条   引用: 2 条

来自外部的引用: 2 条

  • Liferay弹出层如果将弹出页面的值返回 | IT人生录
  • Liferay 6.1开发学习(十三):弹出层/弹出对话框的使用 | IT人生录

给我留言

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

用户登录

分享到: