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

Я новичок в PrimeUI и попытался выполнить шаги из руководства PrimeUI QuickStart.PrimeUI - как заставить его работать?

Из одного пункта:

In order to use PrimeElements, add X-Tag library that also includes the pollyfill for custom elements.

<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% из них, чтобы работать.

Есть ли у меня какие-то недостатки?

источник

2016-11-16 JackTheKnife

Когда я скачать последнюю версию выключить GitHub, я вижу '' primeelements.js' и primeelements.min.js' прямо в Zip. Вы не видите их? – Twisty

Я создал Plunker, основанный на примере кода Dialog, и он не выполнил бы код PrimeElement. Вот пример, который я создал (Version 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 и протестировать свой собственный код.

Update

Как я возиться с этим больше, так как я раньше не использовал PrimeUI, я обновил свой Plunker, чтобы соответствовать их пример кода. Когда я иду закрыть диалоговое окно, я сталкиваюсь с описанной ошибкой.

TypeError: t(...).zIndex is not a function

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

primeui.min.js (line 3, col 9489)

я перешел к не-минимизированы версии и получили:

TypeError: $(...).zIndex is not a function

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

primeui.js (line 4116, col 29)

.zIndex() является элементом JQuery UI и должен был уже загружен. Эта ошибка говорит о том, что что-то в PrimeUI не использует его правильно или не отключает.

источник

2016-11-16 23:51:17 Twisty

Точно - что-то не так с библиотекой PrimeUI 4.x или их документацией (не обновляется?). Я вернулся к версии 3, и элементы, которые там были, работают примерно на 75% по сравнению с версией 4 – JackTheKnife

@JackTheKnife Я бы пообещал на их GitHub и сообщил об этом. Я раскошелился с плунжером с the bestui.js и попытался возиться с этим разделом кода. Я обнаружил, что он не выглядит как объект jQuery; следовательно, '.zIndex()' не может быть вызван, не является функцией этого объекта. Я могу вернуться к их более раннему коду и посмотреть, будет ли это обрабатываться по-другому, и, возможно, мы сможем вернуть код только для этой функции. – Twisty

Скачать latest release из PrimeUI и импортировать файлы primeui-all.min.js и primeui-all.min.css в ваш HTML. У них есть необходимые библиотеки, встроенные (jQuery, jQuery-UI ...). Как только это будет сделано, ошибки исчезнут.

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

источник

2018-02-05 13:08:40 Nikofoxxx

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

ответ

Смежные вопросы