2

私が何をしようとしているのかを理解するには、この質問を参照してください。唯一の例外は、ApplicationLayoutを使用していて、PlaceBarの下にツールバーが必要なことです。CSSをだましてPlaceBarの下にツールバーを表示し、スクロールするときにそれをページの上部に保持する方法はありますか？または、ApplicationLayoutの上部（PlaceBar、TitleBarなど）を修正して、どちらもスクロールしないようにするのはどうでしょうか。

4

1 に答える 1

4

更新：このアイデアを拡張してXSnippetを作成しました。こちらからダウンロードしてください。

プレースバーやタイトルバーなどのアプリケーションレイアウトの上部を修正するには、アプリケーションレイアウトコントロールによって生成されたHTMLページのCSSを調べる必要があります（Google Chromeには、そのためのInspect Elementの優れた機能があります）。lotusTitleBar、などのlotusPlaceBarクラスをlotusContent使用します。これらのクラスをカスタムCSSで使用して、フローティングツールバーを作成できます。

したがって、これが拡張ライブラリからのアプリケーションレイアウト制御を備えたXPageである場合を考えてみましょう。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.resources>
        <xp:styleSheet href="/cssAppLayoutFloatingMenu.css"></xp:styleSheet>
    </xp:this.resources>
    <xe:applicationLayout id="applicationLayout1">
        <xp:panel>
            Sample Text. 1
            <xp:br></xp:br>
            Sample Text. 2
            <xp:br></xp:br>
            Sample Text. 3
            <xp:br></xp:br>
            Sample Text. 4
        </xp:panel>
        <xe:this.configuration>
            <xe:oneuiApplication titleBarName="Sample Title" placeBarName="Sample Place">
                <xe:this.footerLinks>
                    <xe:basicContainerNode label="Container 1">
                        <xe:this.children>
                            <xe:basicLeafNode label="Link 1" href="/"></xe:basicLeafNode>
                            <xe:basicLeafNode label="Link 2" href="/"></xe:basicLeafNode>
                        </xe:this.children>
                    </xe:basicContainerNode>
                    <xe:basicContainerNode label="Container 2">
                        <xe:this.children>
                            <xe:basicLeafNode label="Link 1" href="/"></xe:basicLeafNode>
                            <xe:basicLeafNode label="Link 2" href="/"></xe:basicLeafNode>
                        </xe:this.children>
                    </xe:basicContainerNode>
                </xe:this.footerLinks>
                <xe:this.placeBarActions>
                    <xe:pageTreeNode label="Page 1"></xe:pageTreeNode>
                    <xe:pageTreeNode label="Page 2"></xe:pageTreeNode>
                </xe:this.placeBarActions>
            </xe:oneuiApplication>
        </xe:this.configuration>
    </xe:applicationLayout>
</xp:view>

このCSSを使用して、タイトルバーとプレースバーをフロートにすることができます

.lotusTitleBar {
    /*Class for Title bar*/
    position: fixed;
    width: 100%;
    height: 45px;
    z-index: 100;
}
.lotusPlaceBar {
    /*Class for Place bar*/
    position: fixed;
    width: 100%;
    z-index: 100;
    top: 45px; /*Start after height of lotusTitleBar*/
    height: 35px;
}
.lotusContent {
    /*Class for Content*/
    position: relative;
    top: 80px; /*Height of lotusTitleBar + Height of lotusPlaceBar*/
}

注：これは、タイトルバーとプレースバーのみを使用した非常に基本的な例です。アプリケーションレイアウトにバナーやその他の要素を含める場合は、それに応じて変更する必要があります。

于 2013-01-23T06:19:12.983 に答える