PrimeUI - как заставить его работать?

Я новичок в PrimeUI и пытался следовать инструкциям руководства PrimeUI QuickStart.

Из одного абзаца:

Чтобы использовать 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 - веб-компоненты

<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% из них работают.

Любые itps, что мне не хватает?

Источник

3 ответа

Я создал Plunker на основе примера кода Dialog, и он не будет выполнять код 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 и должен уже быть загружен. Эта ошибка говорит о том, что что-то в PrimeUI неправильно использует его или отключает.

Источник

Загрузите последнюю версию PrimeUI и импортируйте файлы primeui-all.min.js и primeui-all.min.css в ваш html. В них встроены необходимые библиотеки (jQuery, jQuery-UI...). Как только это будет сделано, ошибки исчезнут.

Работаемздесь: plnkr.co/edit/y0zevrqyTpVpxdS4Yr1x?p=preview

Источник

Эта ошибка может воспроизводиться при попытке щелкнуть за пределами диалогового окна, когда модальность включена. Primeui проверит, находится ли элемент, по которому вы щелкаете, над маской модальности, чтобы принять решение игнорировать ваш ввод. Когда он это сделает, он вызовет функцию zIndex, которая не существует из-за неправильного пользовательского интерфейса jquery.

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

(Возможно, вам придется добавить сценарий миграции для jquery 3.0.0+, поскольку jquery ui 1.11.4 имеет другие отдельные проблемы совместимости с jquery.)

Вероятно, можно поднять функцию zIndex из версии 1.11.4 и добавить ее в более новые версии jquery ui, но это только в том случае, если вы загрузили jquery ui локально и скомпилировали его при развертывании своего веб-приложения. В конце концов, описанный выше вариант использования jquery ui 1.11.4 был тем, что я выбрал для решения этой проблемы.

Источник
Другие вопросы по тегам