有几种写法,本质上是一样的,一种是普通的JavaScript代码,一种是使用aui标签。
<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为绑定的方法
<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" %>
此种方法和上面的非常类似,如下:
<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参数即可。
弹出一个页面的方法和上面的基本上相同,具体看下面的示例。
<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页面,但是有时候会不能正常工作,步骤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这个变量。
博客的后台经常有大量的垃圾评论,由于设置了回复发邮件通知,手机上又有微信接受邮件通知,结果就是一天到晚收到垃圾评论的提醒,烦不胜烦。
刚开始琢磨着添加一个验证码来屏蔽垃圾评论,但是发现添加了验证码没有作用,难道这些垃圾评论不是程序生成的?还是WordPress有漏洞?不得而知。
在搜索插件的时候发现了一个叫Akismet的插件,对于屏蔽这些垃圾评论有奇效。
可以在wordpress的后台插件管理处搜索此插件进行安装。
安装之后在http://akismet.com/wordpress/申请一个密钥,填到此插件配置处即可启用垃圾评论屏蔽。
最近在项目中做了一个自定义指标配置的功能,其中的指标展现部分使用的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
官方所有下载地址:包括以上和powecharts、map等。
http://www.fusioncharts.com/downloads/Evals/FusionChartsSuiteXTEval.zip
从官方网站上下载的是试用版,在图表的左上角会有一个Fusioncharts的水印(破解版就是去除这个水印,破解版可以到网上搜索,这里不再提供),如下图所示:
破解版是去掉了上面的水印,相对于正式版没有其他的区别,所以代码的书写上是一样的。这里是以3.2版本为例的。
将下载的压缩包解压,双击里面的Index.html页面,会打开一个主页,里面显示有文档、示例等,其中的Documentation是文档,里面有详细的说明第一个的xml、json的示例,是学习使用的最佳文档。
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,也就是js和flash是否可以相互通信调有。一般为1.
var json:这里为我自己定义的json对象数据,FusionCharts支持XML和json两种数据格式,我这里是使用的json。
myChart.setJSONData(json):将前面的数据传入到FusionCharts中。这里可以使用xml的,代码为myChart.setXMLData(xml)。如果是远程加载的,为myChart.setXMLUrl(url)。
myChart.render("chartContainer"):渲染FusionCharts。里面的参数为html元素的容器ID。也主是在哪一个容器里面显示此图表。
这样就完成了图表的显示。不同的图表中在于其中json或者xml数据的区别,和图表的一些元数据,如使用哪一个图表、宽、高等信息。其他一样,具体的可以看文档。
在网上下载的破解版,有时候会出现有些图表数据不能正确显示,仔细观察但又发现json数据格式是正确。这个原因是由于js的问题,请从官网上下载最新的FusionCharts。然后将里面的FusionCharts.js替换破解版里面的即可。
Liferay中的AUI框架,官方叫做Alloy,是一个UI超框架,能为浏览器的三方面,结构,风格和表现建立网络应用提供连续的简单的API。
它融合了三种设计语言:HTML, CSS 和 JAVA。
准确来说AUI是Liferay在YUI的基础上进行的Liferay扩展,以方便Liferay的一些实际应用和扩展。AUI的很多语法结构、使用方法都都和YUI相关不太多。熟悉YUI的能够快速熟悉AUI。
学习AUI最简单的方法就是将官方的Alloy包下载下来,这个需要到Liferay官网上下载,没有和Liferay的下载包整合在一起。下载地址:http://www.liferay.com/downloads/liferay-projects/alloy-ui
下载下来的alloy包里面的包结构如下:
可以看到里面有API、demos等,我们主要关心这两个内容,可以在demos下面看到各个组件的demo,查看html的源代码即可看到使用方法,在API里面有各个组件的API说明。
通过查看demos和api就可以快速的掌握如何使用AUI。