1

jsp ページに jQuery UI を含めたいと考えています。私はこれを試しました

<jsp:root 
    xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    version="2.1" >

    <jsp:directive.page 
        contentType="text/html" 
        pageEncoding="UTF-8" />

    <jsp:output
        doctype-root-element="html"
        doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />

    <c:url var="cssUrl" value="/resources/css/eAuditStyle.jspx"/>

    <html xmlns="http://www.w3.org/1999/xhtml">
        <body>                       
            <f:view>                              
                <h:form>
                    <jsp:include page="topMenu.jspx" flush="true" />                  
                    <div id="menuBodyContainer" >             
                        <jsp:include page="leftMenu.jspx" flush="true" />

                        <div id="myBody">
               </h:form>             
            </f:view>          
        </body>       
    </html>   
</jsp:root>

ここに私の leftmenu.jsp があります

<jsp:root 
    xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    version="2.1">

    <jsp:directive.page contentType="text/html" pageEncoding="UTF-8"/>

    <f:subview id="leftMenu" >           
        <div id="menu">               
            <div id="myAccordion">                  
                <h2>
                    <a href="#">Header 1</a>
                </h2>

                <div>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 
                </div>

                <h2>
                    <a href="#">Header 2</a>
                </h2>

                <div>
                    Etiam tincidunt est vitae est. Ut posuere, mauris at sodales 
                </div>

                <script src="resources/development-bundle/jquery-1.7.2.js"></script>
                <script type="text/javascript" src="resources/development-bundle/ui/jquey.ui.core.js"></script>
                <script type="text/javascript" src="resources/development-bundle/ui/jquery.ui.widget.js"></script>
                <script src="resources/development-bundle/ui/jquery.ui.accordion.js"></script>
                <script>
                    $(function() {
                        $("#myAccordion").accordion();
                    });
                </script>                    
            </div> <!--end of id="myAccordion"  -->                
        </div> <!--end of menu -->       
</f:subview>

jQuery 1.7.2.js のみが含まれています。も含まれます<link rel="stylesheet" href="resources/development-bundle/themes/base/jquery.ui.all.css" />。つまり、パスは正しいです。他のファイルが含まれていない理由:(。助けてください。

ありがとうございました。

4

2 に答える 2

0

これはうまくいくはずです-

<script type="text/javascript">
<![CDATA[
   $(function() {
     $("#myAccordion").accordion();
   });
]]>
</script>

または、すべてをcdata内に配置する必要があるかもしれません-

<![CDATA[
  <script src="resources/development-bundle/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="resources/development-bundle/ui/jquey.ui.core.js"></script>
  <script type="text/javascript" src="resources/development-bundle/ui/jquery.ui.widget.js"></script>
  <script src="resources/development-bundle/ui/jquery.ui.accordion.js"></script>
  <script>
    $(function() {
      $("#myAccordion").accordion();
    });
  </script>
]]>
于 2012-06-19T11:39:13.067 に答える