Twitter bootstrap 在JSF中导入引导组件_Twitter Bootstrap_Jsf 2_Primefaces

Twitter bootstrap 在JSF中导入引导组件

twitter-bootstrap jsf-2 primefaces

Twitter bootstrap 在JSF中导入引导组件,twitter-bootstrap,jsf-2,primefaces,Twitter Bootstrap,Jsf 2,Primefaces,嗯，我正在尝试将引导程序用于JSF项目。我正在使用此引导布局：因此，我正在尝试导入metisMenu，但没有成功，请参见： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"

嗯，我正在尝试将引导程序用于JSF项目。我正在使用此引导布局：

因此，我正在尝试导入metisMenu，但没有成功，请参见：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<h:head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Projeto A</title>

    <h:outputStylesheet library="js" name="bootstrap-3.3.2-dist/css/bootstrap.min.css" />   
    <h:outputStylesheet library="js" name="metisMenu/metisMenu.min.css" />
    <h:outputStylesheet library="css" name="sb-admin-2.css" />

    <h:outputScript library="js" name="jquery-2.1.3.min.js" />  
    <h:outputScript library="js" name="bootstrap-3.3.2-dist/js/bootstrap.min.js" /> 
    <h:outputScript library="js" name="metisMenu/metisMenu.min.js" />
    <h:outputScript library="js" name="sb-admin-2.js" />

</h:head>

<body>


</body>

</html>

见我的JS：

$(function() {

    $('#side-menu').metisMenu();

});

//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function() {
    $(window).bind("load resize", function() {
        topOffset = 50;
        width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
        if (width < 768) {
            $('div.navbar-collapse').addClass('collapse');
            topOffset = 100; // 2-row-menu
        } else {
            $('div.navbar-collapse').removeClass('collapse');
        }

        height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
            $("#page-wrapper").css("min-height", (height) + "px");
        }
    });

    var url = window.location;
    var element = $('ul.nav a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('li')) {
        element.addClass('active');
    }
});

$（函数（）{
$（“#侧菜单”）.metisMenu（）；
});
//在窗口加载时加载正确的侧栏，
//折叠窗口调整大小时的侧边栏。
//将#页面包装的最小高度设置为窗口大小
$（函数（）{
$（窗口）.bind（“加载调整大小”，函数（）{
topOffset=50；
宽度=（this.window.innerWidth>0）？this.window.innerWidth:this.screen.width；
如果（宽度<768）{
$（'div.navbar-collapse'）.addClass（'collapse'）；
topOffset=100；//2行菜单
}否则{
$（'div.navbar-collapse'）.removeClass（'collapse'）；
}
高度=（（this.window.innerHeight>0）？this.window.innerHeight:this.screen.height）-1；
高度=高度-地形偏移；
如果（高度<1）高度=1；
如果（高度>地形偏移）{
$（“#页面包装器”）.css（“最小高度”，（高度）+“px”）；
}
});
var url=window.location；
var元素=$（'ul.nav a'）.filter（函数（）{
返回this.href==url | | url.href.indexOf（this.href）==0；
}).addClass（'active'）.parent（）.parent（）.addClass（'in'）.parent（）；
if（元素is（'li'））{
元素addClass（'active'）；
}
});

有几种因素可能会导致这种情况，回答这个问题基本上就像在黑暗中做空一样

检查以下内容：

1）当您在浏览器中检查页面时，

#侧菜单的jsf id是什么

是否具有类似

formId:panelId:side menu

的id？如果是这样，您的初始代码应该引用具有转义id的组件，例如

formId\：panelId\：侧菜单

，否则它将看不到该组件。请记住，尽管提供了一个id，但如果一个组件有一个jsf元素（在2.2中是可能的），它将被分配一个jsf组件id

2）在哪里初始化

$（“#侧菜单”）.metisMenu（）-是否在document.ready中？如果不是在执行此代码时，组件将不会呈现，因此无法进行初始化
我个人会将所有脚本文件移到页面底部，因为这会影响页面加载速度，并且在文档中加载所有组件之前，脚本都是无用的
如果以上都不起作用，请为整个页面或至少是我们可以看到可能导致此问题的部分添加代码
 啊，那句话。。。不是很有用，因为我们对整个页面一无所知。你为什么不发一个帖子呢？这是一个更重要的问题，这已经是一个sscce了。你好。我也有同样的问题。你解决这个问题了吗？如何操作？1-我使用的是HTML而不是JSF组件，所以我不需要输入“formId \：panelId”。2-它在文档内。准备好了，我将发布我的所有页面。我用侧菜单UL添加了更多代码。我创建了一个类似于您的项目，所有工作都正常-因此此代码是可以的。唯一的区别是你使用了primefaces
，但我没有。我还看到您包含了jQuery库，但是，当您使用primefaces时，它会注入其绑定的jQuery库，这与您添加的jQuery库冲突，请参见：和。删除jQuery库并使用one primefaces add运行程序。您可能还需要使用jQuery（..）
而不是$
符号，就像我记得在我的primefaces时代它不支持$一样，或者执行类似操作。希望它能起作用，随时发布。删除您添加的jQuery库是否解决了问题？
Uncaught TypeError: undefined is not a function in $('#side-menu').metisMenu()

$(function() {

    $('#side-menu').metisMenu();

});

//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function() {
    $(window).bind("load resize", function() {
        topOffset = 50;
        width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
        if (width < 768) {
            $('div.navbar-collapse').addClass('collapse');
            topOffset = 100; // 2-row-menu
        } else {
            $('div.navbar-collapse').removeClass('collapse');
        }

        height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
            $("#page-wrapper").css("min-height", (height) + "px");
        }
    });

    var url = window.location;
    var element = $('ul.nav a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('li')) {
        element.addClass('active');
    }
});