css - XPages のフローティングツールバー/アクションバー/ボタンバー?

Question

Lotus Notes クライアントのアクション バーに似た、xXages 用のフローティング ツールバーを持っている人はいますか?

ブラウザをスクロールしている間、ツールバーをブラウザの上部に表示したいと思います。

拡張ページのツールバーは非常に見栄えがしますが、最初はクライアント側のコードしか実行せず、フロートしているようには見えません。

Answer 1

Floatは、CSSと以下を使用して実行できるものです。

position: fixed;
top: 0;

XPages Extension Library xe：toolbarコントロールの場合、カスタムスタイルシートで次のスタイルクラスをオーバーライドするために使用する必要があります。

.tundra .dijitToolbar {
  position: fixed;
  top: 0;
}

そして、ユーザーがスクロールしたときにウィンドウの上部にとどまるフローティングツールバーがあります。

xe：toolbarは、TreeNodesとサーバー側コードを追加できるonItemClickイベントを使用するため、サーバー側コードも実行します。

Answer 2

おかげで、すでにほとんど同じ答えが得られました。こちらがCCです。

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>
    <xp:styleSheet href="/PNC001.css"></xp:styleSheet>
</xp:this.resources>
<xp:panel id="toolbar" styleClass="PNCToolBar">

    <xp:callback facetName="ButtonBar" id="callback1"></xp:callback>
</xp:panel>

CSS

.PNCToolBar {
position:fixed;
top:0px;
left:0px;
width:100%;
height:46px;
color:#fff;
background:#F2F2F2;
padding-top:6.0px;
padding-left:15.0px
 }