Возможно иметь в заголовке раздела класс стиля и функцию скрипта, определенные во включаемом файле, который включен в другой включаемый файл. - PullRequest
Новая
       40

Возможно иметь в заголовке раздела класс стиля и функцию скрипта, определенные во включаемом файле, который включен в другой включаемый файл.

1 голос
/ 17 октября 2019

Возможно иметь класс стилей и функцию скрипта в разделе head / head, где класс стиля и функция скрипта определены в файле xhtml, который включен в другой файл xhtml. Вот пример:

Файл template.xhtml 

<h:body> 

        <ui:insert name="content" >
         Template content
        </ui:insert>

</h:body>

Файл content.xhtml 

<ui:composition template="template.xhtml">

  <h:outputScript target="head">
        function contentJS()
        {

        }
  </h:outputScript>     

    <ui:define name="content">

        <ui:include src="subcontent.xhtml"/>        

    </ui:define>

</ui:composition>

Файл subcontent.xhtml 

<ui:composition ...>

  <h:outputScript target="head">
        function subcontentJS()
        {

        }
  </h:outputScript>     

  <style>       
            .mystyleclass {color:red}
  </style>

  <div class="mystyleclass">Text color red</div>

</ui:composition>

В результате xhtml у меня есть только одна функция javascript, а не две функции javascript (contentJS и subcontentJS), а класс mystyleclass отсутствует вГоловная секция.

1 Ответ

1 голос
/ 17 октября 2019

У вас есть две проблемы в разметке:

  1. Блок h:outputScript, определяющий contentJS, находится не в блоке <ui:define.../> и, следовательно, не включен в визуализированный вывод.

  2. style - это простой HTML-элемент, который не помещается в head, а отображается напрямую. Измените это на h:outputStylesheet target="head".

template.xhtml: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />

<h:body>

    <ui:insert name="content">
    Template content
    </ui:insert>

</h:body>
</html>

content.xhtml: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />

<h:body>

    <ui:composition template="template.xhtml">

        <ui:define name="content">

            <h:outputScript target="head">
                function contentJS()
                {

                }
            </h:outputScript>

            <ui:include src="subcontent.xhtml" />

        </ui:define>

    </ui:composition>
</h:body>
</html>

subcontent.xhtml: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />

<h:body>
    <ui:composition>

        <h:outputScript target="head">
            function subcontentJS()
            {

            }
        </h:outputScript>

        <h:outputStylesheet target="head">
            .mystyleclass {
                color: red
            }
        </h:outputStylesheet>

        <div class="mystyleclass">Text color red</div>

    </ui:composition>
</h:body>
</html>
...