我正在尝试使用PrimeFaces 4.0实现进度条。
我在官方网站上关注了这个例子：
http://www.primefaces.org/showcase/ui/progressBar.jsf
但是，在我复制并粘贴代码并运行它之后，
萤火虫告诉我
“PF没有定义。”
请在下面找到我的代码：
<h:form>
<p:growl id="growl" />
<h3>Client Side ProgressBar</h3>
<p:commandButton value="Start" id="start" type="button"
onclick="start()" widgetVar="startButton1" />
<p:commandButton value="Cancel" id="cancel" type="button"
onclick="cancel()" />
<p:progressBar id="progressBarClient" widgetVar="pbClient"
style="width:300px" />
</h:form>
以下是我的javascripts：
<script type="text/javascript">
function start() {
PF('startButton1').disable();
window['progress'] = setInterval(function() {
var pbClient = PF('pbClient'),
oldValue = pbClient.getValue(),
newValue = oldValue + 10;
pbClient.setValue(pbClient.getValue() + 10);
if(newValue === 100) {
clearInterval(window['progress']);
}
}, 1000);
}
function cancel() {
clearInterval(window['progress']);
PF('pbClient').setValue(0);
PF('startButton1').enable();
}
其中基本上都是从官方网站上复制的例子。
尝试类似的东西：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Title</title>
</f:facet>
</h:head>
<h:body>
<h:form>
<p:growl id="growl" />
<h3>Client Side ProgressBar</h3>
<p:commandButton value="Start" id="start" type="button"
onclick="start()" widgetVar="startButton1" />
<p:commandButton value="Cancel" id="cancel" type="button"
onclick="cancel()" />
<p:progressBar id="progressBarClient" widgetVar="pbClient"
style="width:300px" />
</h:form>
<script type="text/javascript">
function start() {
PF('startButton1').disable();
window['progress'] = setInterval(function() {
var pbClient = PF('pbClient'),
oldValue = pbClient.getValue(),
newValue = oldValue + 10;
pbClient.setValue(pbClient.getValue() + 10);
if (newValue === 100) {
clearInterval(window['progress']);
}
}, 1000);
}
function cancel() {
clearInterval(window['progress']);
PF('pbClient').setValue(0);
PF('startButton1').enable();
}
</script>
</h:body>
</f:view>
</html>