PrimeUI - 如何让它工作?

问题描述 投票:0回答:3

我是 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% 的工作。

我缺少什么吗?

jquery jquery-ui prime-ui
3个回答
1
投票

我根据 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 中的某些内容未正确使用或禁用它。


1
投票

下载 PrimeUI 的 最新版本 并将文件 primeui-all.min.jsprimeui-all.min.css 导入到您的 html 中。它们嵌入了必要的库(jQuery、jQuery-UI...)。完成此操作后,错误就会消失。

在这里工作:plnkr.co/edit/y0zevrqyTpVpxdS4Yr1x?p=preview


0
投票

打开模式后,当您尝试在对话框外部单击时,可能会重现此错误。 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 来解决这个问题。

© www.soinside.com 2019 - 2024. All rights reserved.