1

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

我错过了什么？

4

2 回答 2

1

我根据 Dialog 示例代码创建了一个 Plunker，它不会执行 PrimeElement 代码。这是我创建的示例（版本 3：https ://plnkr.co/edit/WMawVdtcvDpmVxzI4b3Q?p=preview ）

索引.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 以匹配他们的示例代码。当我关闭对话框时，我遇到了您描述的错误。

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

于 2016-11-16T23:51:17.800 回答
1

下载最新版本的 PrimeUI 并将文件primeui-all.min.js和primeui-all.min.css导入到您的 html 中。他们嵌入了必要的库（jQuery、jQuery-UI ...）。完成此操作后，错误将消失。

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

于 2018-02-05T13:08:40.140 回答