Question

好吧，我正在尝试使用JSF Project的bootstrap。我正在使用这个引导程序布局：http://startbootstrap.com/template-overviews/sb-admin-2/。

所以，我正在尝试导入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>

身体内侧我有一个平和的菜单

<div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search..." />
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->

但我在浏览器控制台上遇到以下错误：

Uncaught TypeError: undefined is not a function in $('#side-menu').metisMenu()

见我的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');
    }
});

Answer 1

有几件事可能导致这种情况，回答这个问题基本上就像在黑暗中做空。

检查以下内容：

1）当您在浏览器中检查页面时，#side-menu的jsf id是否具有类似formId:panelId:side-menu的ID - 如果是这样，您的初始化代码应引用具有转义ID的组件，例如{ {1}}否则它将无法看到该组件。记住，尽管给出了一个id，如果一个组件有一个jsf元素（在2.2中是可能的），它将被分配一个jsf组件id。

2）你在哪里初始化formId\:panelId\:side-menu - 它在document.ready中吗？如果不执行此代码，则组件将不会被渲染，因此无法初始化。

我个人会将所有脚本文件移到页面底部，因为它会影响页面加载速度，并且在文档中加载所有组件之前脚本都是无用的。

如果上述方法都不起作用，请为整个页面添加代码，或至少添加可能导致此问题的段。

在JSF中导入引导程序组件

1 个答案: