我是 PrimeUI 新手,并尝试按照 PrimeUI 快速入门指南中的步骤进行操作。
摘自一段:
为了使用 PrimeElements,添加 X-Tag 库,其中还包括 自定义元素的 pollyfill。
<script type="text/javascript"src="%PATH%/x-tag-core.min.js"></script>
<script type="text/javascript" src="%PATH%/primeelements-3.0.js"></script>
但PrimeUI下载包不包含
primeelements-3.0.js
。有什么线索我可以在哪里获得该文件吗?
继续举例。我尝试使用 PrimeElements - Web Components 中的代码
<button type="button" is="p-button" icon="fa-external-link" onclick="document.getElementById('dlgelement').show()" >Show</button>
<p-dialog id="dlgelement" title="Dialog Header" modal showeffect="fade" hideeffect="fade" draggable resizable>
<p>Dialog content here.</p>
</p-dialog>
最终效果是我可以打开对话框但由于错误无法关闭它
primeui.min.js:3 Uncaught TypeError: t(...).zIndex is not a function
at HTMLDocument.<anonymous> (http://localhost/lib/primeui.min.js:3:9501)
at HTMLDocument.dispatch (http://localhost/lib/jquery.js:4732:27)
at HTMLDocument.elemData.handle (http://localhost/lib/jquery.js:4544:28)
我已经尝试了他们的展示中的其他代码示例,但我已经完成了其中大约 10% 的工作。
我缺少什么吗?
我根据 Dialog 示例代码创建了一个 Plunker,它不会执行 PrimeElement 代码。这是我创建的示例(版本 3:https://plnkr.co/edit/WMawVdtcvDpmVxzI4b3Q?p=preview)
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/primeui/4.1.15/primeui.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/primeui/4.1.15/primeui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/x-tag/1.5.11/x-tag-core.min.js"></script>
<script type="text/javascript" src="primeelements.js"></script>
</head>
<body>
<button id="btn-show" type="button" onclick="document.getElementById('dlgelement').show()" is="p-button" icon="fa-external-link-square">PrimeElement</button>
<p-dialog id="dlgelement" title="Title of Dialog" modal>
content here
<script type="x-facet-buttons">
<button type="button" is="p-button" icon="fa-check" onclick="document.getElementById('dlgelement').hide()">Yes</button>
<button type="button" is="p-button" icon="fa-close" onclick="document.getElementById('dlgelement').hide()">No</button>
</script>
</p-dialog>
</body>
</html>
我只有在添加 jQuery 初始化后才能让它工作。
<script>
$(function(){
$('#dlgelement').puidialog();
$('#btn-show').click(function(){
$('#dlgelement').show();
});
});
</script>
在这里工作:(版本 5)https://plnkr.co/edit/WMawVdtcvDpmVxzI4b3Q?p=preview
这可能是 PrimeUI 中的一个错误。您可以使用 Plunker 并测试您自己的代码。
更新
当我对此进行更多修改时,由于我之前没有使用过 PrimeUI,所以我更新了我的 Plunker 以匹配他们的示例代码。当我去关闭对话框时,我遇到了您描述的错误。
类型错误:t(...).zIndex 不是函数
...nd(this.blockEvents,function(i){return t(i.target).zIndex()<e.element.zIndex()?!...
primeui.min.js(第 3 行,第 9489 栏)
我切换到非最小化版本并得到:
类型错误:$(...).zIndex 不是函数
if ($(event.target).zIndex() < $this.element.zIndex()) {
primeui.js(第 4116 行,第 29 栏)
.zIndex() 是 jQuery UI 的一个元素,应该已经加载。此错误表明 PrimeUI 中的某些内容未正确使用或禁用它。
下载 PrimeUI 的 最新版本 并将文件 primeui-all.min.js 和 primeui-all.min.css 导入到您的 html 中。它们嵌入了必要的库(jQuery、jQuery-UI...)。完成此操作后,错误就会消失。
在这里工作:plnkr.co/edit/y0zevrqyTpVpxdS4Yr1x?p=preview
打开模式后,当您尝试在对话框外部单击时,可能会重现此错误。 Primeui 将检查您单击的元素是否位于模态掩码上方,以便决定忽略您的输入。当它这样做时,它将调用 zIndex 函数,由于错误的 jquery ui,该函数不存在。
Primeui 4.1.15 仅兼容 jquery ui 1.11.4。从 jquery ui 12 及更高版本开始,zIndex 已弃用。因此,解决办法就是降级到1.11.4。
(您可能需要为 jquery 3.0.0+ 添加迁移脚本,因为 jquery ui 1.11.4 与 jquery 存在其他单独的兼容性问题。)
可能可以从 1.11.4 中提升 zIndex 函数并将其添加到较新的 jquery ui 版本中,但这仅适用于您在本地下载 jquery ui 并在部署 web 应用程序时将其一起编译的情况。最后,我选择使用 jquery ui 1.11.4 来解决这个问题。