2

ページの真ん中にあるコンテンツパネルを作成したいと思います。スクロールバーが表示される前に、幅と高さの両方をページの特定のパーセントまで拡張できます。

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>

ただし、これは実際には何もしません。中央に配置されていないため、「content」タグに挿入したものはすべてページ全体に展開されます。

誰かが私の目標を達成する方法を手伝ってもらえますか？

編集

RickCalderによって投稿されたソリューションを試しました。以下は私のコードです。しかし、それは私にはうまくいきません。私は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);
});
4

2 に答える 2

4

ページ内の何かを完全に中央に配置するには、計算を実行できるように、固定サイズにする必要があります。

.centeredPanel{
    width:500px;
    height:500px;
    position:absolute;
    left:50%; //sets left edge at the midway point of it's container
    top:50%; //sets top edge at the midway point of it's container
    margin-left:-250px; //moves the div back half it's width to centre it.
    margin-top:-250px; //moves the div up half it's height to centre it.
}

デモ： http： //jsfiddle.net/calder12/qNNvb/

パーセンテージでそれを行うには、jQueryが必要です。

.centeredPanel{
    width:25%;
    height:25%;
    min-width:100px;
    min-height:100px;
    position:absolute;
    left:50%;
    top:50%;
    background-color:red;
}​


$(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);
});

デモ： http： //jsfiddle.net/calder12/qNNvb/3/

于 2012-11-12T20:46:53.937 に答える
0

JQueryを使用してページを中央に配置することをお勧めします。このソリューションは機能しますか？

https://stackoverflow.com/a/210733/1285564

于 2012-11-13T15:21:59.103 に答える