Fatal编程技术网
  • jsf/
  • Jsf 导航栏切换按钮不工作引导面

Jsf 导航栏切换按钮不工作引导面

jsf

Jsf 导航栏切换按钮不工作引导面,jsf,bootsfaces,Jsf,Bootsfaces,我试图探索BootsFaces，但是我被困在Navbar中，因为Navbar并没有在小屏幕中扩展 这是我的index.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:u

我试图探索BootsFaces，但是我被困在Navbar中，因为Navbar并没有在小屏幕中扩展

这是我的
index.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://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions"
    xmlns:b="http://bootsfaces.net/ui">

<h:head></h:head>
<body>

    <b:navBar brand="KP's Brand" inverse="true" brandHref="#" fixed="top">
        <b:container>
            <b:navbarLinks>
                <b:navLink value="home" iconAwesome="home" href="#"></b:navLink>
                <b:navLink value="Cricket" href="#"></b:navLink>
                <b:navLink value="football" href="#"></b:navLink>
                <b:navLink value="Sports" href="#"></b:navLink>
            </b:navbarLinks>
        </b:container>
    </b:navBar>

    <b:container>
        <p:row>
            <p:panel header="hello world">Welcome to Primefaces world</p:panel>
        </p:row>
    </b:container>
</body>
</html>
这是桌面上显示的页面

以及移动设备中显示的页面 如上所示，即使显示了导航栏切换按钮，但单击该按钮时，我无法看到（不展开）导航链接

以下是Firebug html代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link
    href="/kp-bjsf/javax.faces.resource/theme.css.xhtml?ln=primefaces-bootstrap"
    rel="stylesheet" type="text/css">
<link href="/kp-bjsf/javax.faces.resource/css/core.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link href="/kp-bjsf/javax.faces.resource/css/navbar.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link
    href="/kp-bjsf/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.2"
    type="text/css" rel="stylesheet">
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script src="/kp-bjsf/javax.faces.resource/js/tooltip.js.xhtml?ln=bsf"
    type="text/javascript"></script>
<link
    href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="/kp-bjsf/javax.faces.resource/js/html5shiv.js.xhtml?ln=bsf"></script><script src="/kp-bjsf/javax.faces.resource/js/respond.js.xhtml?ln=bsf"></script><![endif]-->
<script type="text/javascript">if(window.PrimeFaces){}</script>
</head>
<body>
    <div role="navigation" class="navbar navbar-inverse navbar-fixed-top"
        id="j_id_5">
        <div class="container">
            <div class="navbar-header">
                <button data-target=".navbar-ex1-collapse" data-toggle="collapse"
                    class="navbar-toggle" type="button">
                    <span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span
                        class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand"><span>KP's Brand</span></a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <div class="container" id="j_id_6">
                    <ul class="nav navbar-nav" id="j_id_7">
                        <li class="" name="j_id_8" id="j_id_8"><a tabindex="-1"
                            role="menuitem" href="#"><span><i class="fa fa-home"
                                    id="j_id_8_icon"></i></span> home</a></li>
                        <li class="" name="j_id_9" id="j_id_9"><a tabindex="-1"
                            role="menuitem" href="#">Cricket</a></li>
                        <li class="" name="j_id_a" id="j_id_a"><a tabindex="-1"
                            role="menuitem" href="#">football</a></li>
                        <li class="" name="j_id_b" id="j_id_b"><a tabindex="-1"
                            role="menuitem" href="#">Sports</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="j_id_c">
        <div data-widget="widget_j_id_e"
            class="ui-panel ui-widget ui-widget-content ui-corner-all"
            id="j_id_e">
            <div
                class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                id="j_id_e_header">
                <span class="ui-panel-title">hello world</span>
            </div>
            <div class="ui-panel-content ui-widget-content" id="j_id_e_content">Welcome
                to Primefaces world</div>
        </div>
    </div>

    <div id="textarea_simulator"
        style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>
</body>
</html>


if（window.PrimeFaces）{}
切换导航

    

  • 

  • 

  • 

  • 


你好，世界
欢迎
面对世界
还让我知道如何在
当前重叠后渲染
我花了一段时间才看到错误，但结果非常简单：用
替换HTML样式的
标记。这是一个肮脏的陷阱，我也不止一次被它抓住

至于重叠：在我们的展示中，我们只是在body标签上添加了一个75像素的填充

此时，将
标记上移一级。它在导航栏中没有意义<代码>是关于定义页面宽度（以及其他一些内容）。第二，请在
内放置
。生成的源代码如下所示：

<!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://java.sun.com/jsf/facelets"                                                                                      
    xmlns:f="http://java.sun.com/jsf/core"                                                                                           
    xmlns:h="http://java.sun.com/jsf/html"                                                                                           
    xmlns:p="http://primefaces.org/ui"                                                                                               
    xmlns:pe="http://primefaces.org/ui/extensions"                                                                                   
    xmlns:b="http://bootsfaces.net/ui">                                                                                              

  <h:head></h:head>                                                                                                                  
  <h:body style="padding-top: 75px">                                                                                                 
    <b:container>                                                                                                                    
        <b:navBar brand="KP's Brand" inverse="true" brandHref="#" fixed="top">                                                       
            <b:navbarLinks>                                                                                                          
                <b:navLink value="home" iconAwesome="home" href="#"></b:navLink>                                                     
                <b:navLink value="Cricket" href="#"></b:navLink>                                                                     
                <b:navLink value="Football" href="#"></b:navLink>                                                                    
                <b:navLink value="Sports" href="#"></b:navLink>                                                                      
            </b:navbarLinks>                                                                                                         
        </b:navBar>                                                                                                                  
    </b:container>                                                                                                                   

    <b:container>                                                                                                                    
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:panel title="Hello world">
                   Welcome to the BootsFaces world :)
                </b:panel>                                                
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:messages />                                                                                                       
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
    </b:container>                                                                                                                   
  </h:body>                                                                                                                          
</html>                                                                                                                              


欢迎来到BootsFaces世界：）
乍一看还不错，所以让我们先检查一下简单的东西。该功能是否适用于您的移动浏览器和我们的showcase？我成功复制并解决了该错误-下面是我的答案。建议也使用
。我发现另一个问题，如果我添加两个导航栏，并且在移动设备上，当我单击一个导航栏可折叠按钮时，导航栏都会展开。好的，这需要修复。我在我们的错误追踪器上为您打开了一个错误：。谢谢你报告这个错误！感谢您的参与，感谢您的快速响应。我已经设法修复了这个错误。再过几天，我将发布一个新的开发者预览快照，这样你就可以自己测试我的错误修复（如下）。一旦签入，让我知道，我可以从源代码构建。 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link
    href="/kp-bjsf/javax.faces.resource/theme.css.xhtml?ln=primefaces-bootstrap"
    rel="stylesheet" type="text/css">
<link href="/kp-bjsf/javax.faces.resource/css/core.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link href="/kp-bjsf/javax.faces.resource/css/navbar.css.xhtml?ln=bsf"
    type="text/css" rel="stylesheet">
<link
    href="/kp-bjsf/javax.faces.resource/primefaces.css.xhtml?ln=primefaces&amp;v=5.2"
    type="text/css" rel="stylesheet">
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script
    src="/kp-bjsf/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&amp;v=5.2"
    type="text/javascript"></script>
<script src="/kp-bjsf/javax.faces.resource/js/tooltip.js.xhtml?ln=bsf"
    type="text/javascript"></script>
<link
    href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
    rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="/kp-bjsf/javax.faces.resource/js/html5shiv.js.xhtml?ln=bsf"></script><script src="/kp-bjsf/javax.faces.resource/js/respond.js.xhtml?ln=bsf"></script><![endif]-->
<script type="text/javascript">if(window.PrimeFaces){}</script>
</head>
<body>
    <div role="navigation" class="navbar navbar-inverse navbar-fixed-top"
        id="j_id_5">
        <div class="container">
            <div class="navbar-header">
                <button data-target=".navbar-ex1-collapse" data-toggle="collapse"
                    class="navbar-toggle" type="button">
                    <span class="sr-only">Toggle navigation</span><span
                        class="icon-bar"></span><span class="icon-bar"></span><span
                        class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand"><span>KP's Brand</span></a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <div class="container" id="j_id_6">
                    <ul class="nav navbar-nav" id="j_id_7">
                        <li class="" name="j_id_8" id="j_id_8"><a tabindex="-1"
                            role="menuitem" href="#"><span><i class="fa fa-home"
                                    id="j_id_8_icon"></i></span> home</a></li>
                        <li class="" name="j_id_9" id="j_id_9"><a tabindex="-1"
                            role="menuitem" href="#">Cricket</a></li>
                        <li class="" name="j_id_a" id="j_id_a"><a tabindex="-1"
                            role="menuitem" href="#">football</a></li>
                        <li class="" name="j_id_b" id="j_id_b"><a tabindex="-1"
                            role="menuitem" href="#">Sports</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="j_id_c">
        <div data-widget="widget_j_id_e"
            class="ui-panel ui-widget ui-widget-content ui-corner-all"
            id="j_id_e">
            <div
                class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"
                id="j_id_e_header">
                <span class="ui-panel-title">hello world</span>
            </div>
            <div class="ui-panel-content ui-widget-content" id="j_id_e_content">Welcome
                to Primefaces world</div>
        </div>
    </div>

    <div id="textarea_simulator"
        style="position: absolute; top: 0px; left: 0px; visibility: hidden;"></div>
</body>
</html>

<!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://java.sun.com/jsf/facelets"                                                                                      
    xmlns:f="http://java.sun.com/jsf/core"                                                                                           
    xmlns:h="http://java.sun.com/jsf/html"                                                                                           
    xmlns:p="http://primefaces.org/ui"                                                                                               
    xmlns:pe="http://primefaces.org/ui/extensions"                                                                                   
    xmlns:b="http://bootsfaces.net/ui">                                                                                              

  <h:head></h:head>                                                                                                                  
  <h:body style="padding-top: 75px">                                                                                                 
    <b:container>                                                                                                                    
        <b:navBar brand="KP's Brand" inverse="true" brandHref="#" fixed="top">                                                       
            <b:navbarLinks>                                                                                                          
                <b:navLink value="home" iconAwesome="home" href="#"></b:navLink>                                                     
                <b:navLink value="Cricket" href="#"></b:navLink>                                                                     
                <b:navLink value="Football" href="#"></b:navLink>                                                                    
                <b:navLink value="Sports" href="#"></b:navLink>                                                                      
            </b:navbarLinks>                                                                                                         
        </b:navBar>                                                                                                                  
    </b:container>                                                                                                                   

    <b:container>                                                                                                                    
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:panel title="Hello world">
                   Welcome to the BootsFaces world :)
                </b:panel>                                                
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
        <b:row>                                                                                                                      
            <b:column span="12">                                                                                                     
                <b:messages />                                                                                                       
            </b:column>                                                                                                              
        </b:row>                                                                                                                     
    </b:container>                                                                                                                   
  </h:body>                                                                                                                          
</html>