jquery PrimeUI -如何让它工作？

axzmvihb 于 11个月前发布在 jQuery

关注(0)|答案(3)|浏览(100)

我是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%的代码能够正常工作。
有什么我错过的吗？

jquery

来源：https://stackoverflow.com/questions/40641637/primeui-how-to-get-it-to-work

3条答案

按热度按时间

pinkon5k1#

我基于Dialog示例代码创建了一个Plunker，它不会执行PrimeElement代码。

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中的一个bug。你可以为Plunker测试你自己的代码。

更新

当我修补这个更多，因为我没有使用PrimeUI之前，我更新了我的Plunker匹配他们的示例代码.当我去关闭一个对话框时，我遇到你描述的错误.
TypeError：t（...）.zIndex不是函数
第一个月
primeui.min.js（line 3，col 9489）
我切换到非最小化版本，得到：
TypeError：$（...）.zIndex不是函数
if ($(event.target).zIndex() < $this.element.zIndex()) {个
primeui.js（line 4116，col 29）
.zIndex()是jQuery UI的一个元素，应该已经加载了。这个错误表明PrimeUI中的某些东西没有正确使用它或禁用它。

赞(0）回复(0）举报 11个月前

disbfnqx2#

下载PrimeUI的latest release，将primeui-all.min.js和primeui-all.min.css导入到html中，它们内嵌了必要的库（jQuery，jQuery-UI.

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

赞(0）回复(0）举报 11个月前

uujelgoq3#

当您在打开模态时尝试在对话框外单击时，此错误可能会重现。Primeui将检查您单击的元素是否在模态掩码上方，以便它可以决定忽略您的输入。当它这样做时，它将调用zIndex函数，由于错误的jquery ui而不存在。
Primeui 4.1.15只兼容jquery ui 1.11.4。从jquery ui 12及以上版本开始，zIndex被弃用。因此，解决方案只是降级到1.11.4。
https://api.jqueryui.com/1.11/zIndex/
https://jqueryui.com/upgrade-guide/1.12/#removed-zindex
(You可能需要为jquery 3.0.0+添加一个迁移脚本，因为jquery ui 1.11.4与jquery有其他单独的兼容性问题。
也许可以从1.11.4中提取zIndex函数并将其添加到较新的jquery ui版本中，但这仅限于在本地下载jquery ui并在部署webapp时将其编译在一起。最后，使用jquery ui 1.11.4的上述选项是我用来处理这个问题的。

赞(0）回复(0）举报 11个月前

我来回答

jquery PrimeUI -如何让它工作？

3条答案

相关问题

热门标签

最新问答