Question

我是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)

我尝试了their showcase中的其他代码示例，但我有大约10％的代码可以使用。

我错过了什么？

Answer 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>

这基于Quick Start和Dialog示例。

我添加jQuery初始化后才能使它工作。

  <script>
  $(function(){
    $('#dlgelement').puidialog();
    $('#btn-show').click(function(){
      $('#dlgelement').show();
    });
  });
  </script>

在此工作:(第5版）https://plnkr.co/edit/WMawVdtcvDpmVxzI4b3Q?p=preview

这可能是PrimeUI中的一个错误。您可以为Plunker测试自己的代码。

<强>更新

当我更多地修补这个时，因为我以前没有使用过PrimeUI，所以我更新了我的Plunker以匹配他们的示例代码。当我关闭对话框时，遇到你所描述的错误。

TypeError：t（...）。zIndex不是函数

...nd(this.blockEvents,function(i){return t(i.target).zIndex()<e.element.zIndex()?!...

primeui.min.js（第3行，第9489行）

我切换到非最小化版本并得到：

TypeError：$（...）。zIndex不是函数

if ($(event.target).zIndex() < $this.element.zIndex()) {

primeui.js（第4116行，第29栏）

.zIndex()是jQuery UI的一个元素，应该已经加载了。此错误表明PrimeUI中的某些内容未正确使用或禁用它。

Answer 2

下载PrimeUI的latest release并将文件 primeui-all.min.js 和 primeui-all.min.css 导入您的html。他们嵌入了必要的库（jQuery，jQuery-UI ......）。完成后，错误将消失。

在此工作：plnkr.co/edit/y0zevrqyTpVpxdS4Yr1x?p=preview

PrimeUI - 如何让它工作？

2 个答案: