我想创建一个位于页面绝对中间的内容面板。在滚动条出现之前,它可以将其宽度和高度都扩展到页面的某个百分比。在页面中部创建Conetent面板
我在JSF页面上使用Primefaces。我确信有很多解决方案可以做到这一点。我想使用JSF的组合。
这里是我的解决方案:
<p:layout id="layout">
<p:layoutUnit position="center">
<p:panel header="Test" style="width:50%">
<ui:insert name="content"/>
</p:panel>
</p:layoutUnit>
</p:layout>
然而,这并没有真正做任何事情。它不居中,我插入“内容”标签的内容扩展到整个页面。
任何人都可以协助我如何实现我的目标吗?
编辑
我试过了Rick Calder发布的解决方案。以下是我的代码。但它不适合我。我将css写入了style.css。我将javascript写入resizeContentPanel.js。我在我的resource.xhtml的头部加载了JQUery和resizeContentPanel.js。我相信这些都是正确的步骤。有什么我可能会失踪。
至于我其实错了,我没有看到内容面板。当我调试javascript时,它的高度边缘为-71,宽度边缘为-160。我假设这就是为什么我不能看到它。
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>
<ui:insert name="windowTitle"/>
</title>
<h:outputStylesheet library="css" name="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<h:outputScript library="scripts" name="resizeContentPanel.js" />
</h:head>
<h:body>
<div class="centeredPanel">
<p:layout id="layout" >
<p:layoutUnit position="center">
<ui:insert name="content"/>
</p:layoutUnit>
</p:layout>
</div>
<h:form>
<div id="stack">
<p:stack id="stackMenu" icon="/resources/images/stack/stack.png" model="#{pageBuilder.stackMenuModel}" />
</div>
</h:form>
<div id="dock">
<p:dock id="dockMenu" model="#{pageBuilder.dockMenuModel}"/>
</div>
</h:body>
的style.css
root
{
display: block;
}
body
{
background-image: url('../../resources/images/background/background.jpg');
}
.centeredPanel{
width:25%;
height:25%;
min-width:100px;
min-height:100px;
position:absolute;
left:50%;
top:50%;
}
resizeContentPanel.js
$(document).ready(function(){
var heightMargin = -($('.centeredPanel').height()/2);
var widthMargin= -($('.centeredPanel').width()/2);
$('.centeredPanel').css('margin-left',widthMargin);
$('.centeredPanel').css('margin-top',heightMargin);
});
$(window).resize(function(){
var heightMargin = -($('.centeredPanel').height()/2);
var widthMargin= -($('.centeredPanel').width()/2);
$('.centeredPanel').css('margin-left',widthMargin);
$('.centeredPanel').css('margin-top',heightMargin);
});
真棒,谢谢!是否有可能以页面的百分比来做高度和宽度?就像我希望它占据75%的宽度和50%的高度。这可能吗? – user489041
我想如果你想使用百分比,你将需要使用JavaScript来计算高度和宽度,并适当地设置边距。我想不出另一种方式去做。 –
请参阅编辑jQuery和百分比。 –