【发布时间】：2015-03-24 07:26:48
【问题描述】：
嗯，我正在尝试将引导程序与 JSF 项目一起使用。我正在使用这个引导布局：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');
}
});
【问题讨论】：
-
啊，那行...不是很有用，因为我们对整个页面一无所知。你为什么不发sscce.org？
-
不高兴这是更重要的问题和平，这已经是一个sscce。
-
你好。我也有同样的问题。你解决了这个吗？怎么样？
标签： twitter-bootstrap jsf-2 primefaces