文档章节

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

攻城狮不是猫
 攻城狮不是猫
发布于 2015/07/02 09:31
字数 2693
阅读 78
收藏 0

一、弹出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():表示弹出层的正文,这里是弹出一个idwebDav的对象。A.one('#webDav').html()这是aui代码的写法(aui其实是YUI的衍生版,所以和YUI的用法基本上一样),表示选择idwebDav的对象,取其中的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>

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

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

WoredPress垃圾评论屏蔽插件

博客的后台经常有大量的垃圾评论,由于设置了回复发邮件通知,手机上又有微信接受邮件通知,结果就是一天到晚收到垃圾评论的提醒,烦不胜烦。

刚开始琢磨着添加一个验证码来屏蔽垃圾评论,但是发现添加了验证码没有作用,难道这些垃圾评论不是程序生成的?还是WordPress有漏洞?不得而知。

在搜索插件的时候发现了一个叫Akismet的插件,对于屏蔽这些垃圾评论有奇效。

可以在wordpress的后台插件管理处搜索此插件进行安装。

安装之后在http://akismet.com/wordpress/申请一个密钥,填到此插件配置处即可启用垃圾评论屏蔽。

FusionCharts入门指南

最近在项目中做了一个自定义指标配置的功能,其中的指标展现部分使用的FusionCharts,这个图表的功能强大,入门简单。

一、下载相关文件

首先从官方网站下载相关的内容,下载地址:http://www.fusioncharts.com/download/trials/

其中的fusioncharts是一些常用的指标类型,如饼图、折线图、柱状图等等。

官方下载地址:http://www.fusioncharts.com/Downloads/Evals/FusionCharts_XT_Evaluation.zip

FusionWidgets是一些像仪表盘、温度计、计量仪等类弄的图表。

官方下载地址:http://www.fusioncharts.com/Downloads/Evals/FusionWidgets_XT_Trial.zip

官方所有下载地址:包括以上和powechartsmap等。

http://www.fusioncharts.com/downloads/Evals/FusionChartsSuiteXTEval.zip

从官方网站上下载的是试用版,在图表的左上角会有一个Fusioncharts的水印(破解版就是去除这个水印,破解版可以到网上搜索,这里不再提供),如下图所示:

二、如何学习

破解版是去掉了上面的水印,相对于正式版没有其他的区别,所以代码的书写上是一样的。这里是以3.2版本为例的。

将下载的压缩包解压,双击里面的Index.html页面,会打开一个主页,里面显示有文档、示例等,其中的Documentation是文档,里面有详细的说明第一个的xmljson的示例,是学习使用的最佳文档。

Chart Gallery算是一个快速导览,里面提供一些效果的展示。

Live Deom常用图表的示例。

如果在这些里面不方便查找自己想要的,可以点击code目录,code目录下面有具体第一个图表的示例。点击相应的文件夹即可浏览示例代码。

三、如何编写

1、使用时首先将charts目录复制到自己的项目工程的某一个目录下面。

2、在页面中引入jquery的库(可以是charts目录下面的jquery,也可以是外部的)

3、引入FusionCharts.js库,这个库的路径是在charts目录下面,也就是图表所在的目录。

4、在页面中开始编写代码。示例(计量仪)代码如下:

<div id="chartContainer"></div>
<script type='text/javascript'>
var myChart = new FusionCharts( "FusionCharts/Cylinder.swf", "myChartId", "200", "250", "0", "1" );
 
 var json={
 "chart": {
 "palette": "4", //颜色方案,有1-5
 "lowerlimit": "0", //最小值
 "upperlimit": "4000", //最大值
 "numbersuffix": " ", //单位
 "bgcolor": "FFFFFF" //颜色
 },
 "value": "2452" //实际的值
};
 myChart.setJSONData(json);
 myChart.render("chartContainer");
 
</script>

5、为简单示意,就调了一个相关比较简单的图表,其他图表只是中间的JSON数据有区别,其他地方区别不大。

6、逐行解释意思:

new FusionCharts这是新建一个图表对象,其中第一个参数为相对应的图表地址;第二个参数此图表的ID,用于在其他地方调用;第三个参数是宽;第四个是高;第五个为是否debug模式,0为否;第六个参数为是否注册js,也就是jsflash是否可以相互通信调有。一般为1.

var json:这里为我自己定义的json对象数据,FusionCharts支持XMLjson两种数据格式,我这里是使用的json

myChart.setJSONData(json)将前面的数据传入到FusionCharts中。这里可以使用xml的,代码为myChart.setXMLDataxml)。如果是远程加载的,为myChart.setXMLUrlurl)。

myChart.render("chartContainer")渲染FusionCharts。里面的参数为html元素的容器ID。也主是在哪一个容器里面显示此图表。

这样就完成了图表的显示。不同的图表中在于其中json或者xml数据的区别,和图表的一些元数据,如使用哪一个图表、宽、高等信息。其他一样,具体的可以看文档。

四、其他

在网上下载的破解版,有时候会出现有些图表数据不能正确显示,仔细观察但又发现json数据格式是正确。这个原因是由于js的问题,请从官网上下载最新的FusionCharts。然后将里面的FusionCharts.js替换破解版里面的即可。

Liferay的AUI框架如何学习

一、AUI是什么?

Liferay中的AUI框架,官方叫做Alloy,是一个UI超框架,能为浏览器的三方面,结构,风格和表现建立网络应用提供连续的简单的API

它融合了三种设计语言:HTML, CSS JAVA

准确来说AUILiferayYUI的基础上进行的Liferay扩展,以方便Liferay的一些实际应用和扩展。AUI的很多语法结构、使用方法都都和YUI相关不太多。熟悉YUI的能够快速熟悉AUI

二、如何学习

学习AUI最简单的方法就是将官方的Alloy包下载下来,这个需要到Liferay官网上下载,没有和Liferay的下载包整合在一起。下载地址:http://www.liferay.com/downloads/liferay-projects/alloy-ui

下载下来的alloy包里面的包结构如下:

可以看到里面有APIdemos等,我们主要关心这两个内容,可以在demos下面看到各个组件的demo,查看html的源代码即可看到使用方法,在API里面有各个组件的API说明。

通过查看demosapi就可以快速的掌握如何使用AUI

© 著作权归作者所有

攻城狮不是猫
粉丝 5
博文 57
码字总数 86313
作品 0
杭州
程序员
私信 提问
Cocos2D-X弹出对话框的实现与封装

在用Cocos2DX引擎开发游戏的过程中,我们经常需要弹出一个对话框或者提示框,通知玩家一些必要的信息。这时候我们就需要考虑怎样设计和封装一个这样的弹出对话框。首先,这样的弹出框一般都是...

暖冰
2015/11/16
403
0
Web开发中的弹出对话框控件介绍

Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了。不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,...

walb呀
2017/12/04
0
0
abp(net core)+easyui+efcore实现仓储管理系统——EasyUI之货物管理二 (二十)

abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+easyui+efcore实现仓储管理系统——解决方案介绍(二) a...

DotNet菜园
09/29
0
0
网络分析工具 Wireshark 用户手册

本手册介绍:介绍Wireshark安装、界面、基本操作 详细清单如下: 目录 译者序 1. 为什么要翻译 2. 关于本手册 2.1. 用什么工具编写的 2.2. 手册翻译的效果 2.3. 翻译中的问题 3. 补充说明 前...

红薯
2010/08/03
3.2K
9
UG编程文字加工,全方位实例讲解,文末有作业哦!

  文字加工常用于模具标记、零件装饰、简单文字雕刻等,如图6.1所示。文字加工一般在零件精加工之后进行。由于加工的刀具直径很小,很容易折断。因此文字加工切削量少,需要在转速高达100...

UG数控编程
2018/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

golang-字符串-地址分析

demo package mainimport "fmt"func main() {str := "map.baidu.com"fmt.Println(&str, str)str = str[0:5]fmt.Println(&str, str)str = "abc"fmt.Println(&s......

李琼涛
53分钟前
4
0
Spring Boot WebFlux 增删改查完整实战 demo

03:WebFlux Web CRUD 实践 前言 上一篇基于功能性端点去创建一个简单服务,实现了 Hello 。这一篇用 Spring Boot WebFlux 的注解控制层技术创建一个 CRUD WebFlux 应用,让开发更方便。这里...

泥瓦匠BYSocket
今天
6
0
从0开始学FreeRTOS-(列表与列表项)-3

FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像。 在FreeRTOS中,列表与列表项使用得非常多,是FreeRTOS的一个数...

杰杰1号
今天
4
0
Java反射

Java 反射 反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的 Class,Class 类 用于表示.class 文件(字节码)) 一、反射的概述 定义:JAVA 反射机制是在运行状态中,对于任...

zzz1122334
今天
5
0
聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部