Primefaces js在p：layout中不起作用答案

【问题标题】：Primefaces js not working inside p:layoutPrimefaces js在p：layout中不起作用
【发布时间】：2013-09-10 11:09:54
【问题描述】：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view  contentType="text/html">
        <h:head>

            <f:facet name="first">
                <h:outputScript library="primefaces" name="jquery/jquery.js"/>
                <h:outputScript target="head">
                    $ = jQuery;
                </h:outputScript>
            </f:facet>
            <script type="text/javascript">
                function scrollToTop() {
                    $('html, body').animate({scrollTop: 0}, 'slow');
                }
            </script>

        </h:head>

        <h:body id="body">
            <h:form id="form"> 

                <p:layout id="layout" fullPage="true">
                    <p:layoutUnit id="mid" position="center" style="background: #125790; ">
                        <br></br><br></br><br></br><br></br><br></br><br></br>
                        <br></br><br></br><br></br><br></br><br></br><br></br>
                        <br></br><br></br><br></br><br></br><br></br><br></br>
                        <br></br><br></br><br></br><br></br><br></br><br></br>
                        <br></br><br></br><br></br><br></br><br></br><br></br>
                        <br></br><br></br><br></br><br></br><br></br><br></br>
                        <a href="javascript:scrollToTop()">Scroll to top</a>
                    </p:layoutUnit>
                </p:layout>
            </h:form>
        </h:body>
    </f:view>
</html>

ScrollTop 不工作。有什么问题？

【问题讨论】：

萤火虫（或类似的东西）说什么？我们可以处理的任何错误？

标签： javascript jsf layout primefaces

【解决方案1】：

那是因为滚动的不是html或body，而是<p:layoutUnit position="center">内容的HTML表示。 $("html,body") 选择器没有涵盖这一点，因此它似乎没有做任何事情。如果您熟悉基本的 HTML 和 CSS，并仔细查看生成的 HTML 输出，那么您就会理解它。

正确的选择器是：

$(".ui-layout-center .ui-layout-unit-content").animate({scrollTop: 0}, "slow");

与具体问题无关，您声明脚本的方式不必要地笨拙。应该这样做：

<h:head>
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript>
        function scrollToTop() {
            $(".ui-layout-center .ui-layout-unit-content").animate({scrollTop: 0}, "slow");
        }
    </h:outputScript>
</h:head>

更好的是，将该函数放在自己的 JS 文件中：

<h:head>
    <h:outputScript library="primefaces" name="jquery/jquery.js" />
    <h:outputScript name="functions.js" />
</h:head>

此外，href 中 javascript: 伪协议的使用在这里显得突兀和不鼓励。你应该把真正的href放在href中，并利用onclick来不显眼地增强它。

<p:layoutUnit position="center">
    <div id="top" />
    ...
    <a href="#top" onclick="scrollToTop(); return false;">Scroll to top</a>
</p:layoutUnit>

更好的是，在加载过程中添加点击事件处理程序，这样您的 HTML 就没有硬编码的on* 属性。

这也说明对基础JS的理解不够。我建议与基本的 HTML 和 CSS 一起学习。最终，如果您更好地理解 HTML/CSS/JS，那么您也会自然而然地更好地理解 JSF（在这个问题的上下文中，它只是一个 HTML/CSS/JS 代码生成器）。

【讨论】：