1

Xpages Mobile コントロールで下部のタブ バーを取得しようとしています。通常は黒で暗いアイコンが表示され、アイコンを押すとページが変わります。

実際のモバイル コントロール タブ バーのルック アンド フィールを取得する方法がわかりませんでした。これは、標準のタブ バーではなく、segmentedTabBar に適しているようです。以下のコードを使用して手動で Dojo にアクセスしようとしましたが、ルック アンド フィールは得られましたが、タブ バーが画面の下部ではなく上部に表示されています。

モバイル コントロール バージョンを使用したいのですが、それでも簡単です。XPages で動作する下部タブ バーを取得したいと考えています。

アドバイスをいただければ幸いです。

<xe:singlePageApp id="singlePageApp1" selectedPageName="home">


<xe:appPage id="appPage1" pageName="home">

    <ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"/Add_32x32.png",
                   selected:true'>
        Featured
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"/1_48x48.png"'>
        Categories
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"1_48x48.png"'>
        Top 25
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"Add_32x32.png"'>
        Search
    </li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='icon1:"1_48x48.png"'>
        Updates
    </li>
</ul>

</xe:appPage></xe:singlePageApp></xp:view>
4

3 に答える 3

2

295 ページの IBM Press の Extension Library ブックを参照してください。タブ バーに関するこの章には、画面の下部にあるアクション バーの例が含まれています。

<xe:tabBar id="tabBar1">
  <xe:tabBarButton id="tabBarButton1" label="Button 1"></xe:tabBarButton>
  <xe:tabBarButton id="tabBarButton2" label="Button 2"></xe:tabBarButton>
  <xe:tabBarButton id="tabBarButton3" label="Button 3"></xe:tabBarButton>
</xe:tabBar>

を使用すると、セグメント化されたタブ バーにしか見えませんbarType="segmentedControl"。

于 2013-03-14T07:58:33.960 に答える
1

私は自分で同じことを達成しようとしています。XPages Mobile Controls は、固定サイズ (スクロール可能) コンテンツをヘッダーとフッターの間に配置できる Mobile Scrollable Pane をまだサポートしていないため、この問題が発生していると思われます。CSS は、タブ バーの絶対配置を使用して、コンテンツと共にスクロールしないようにする可能性が最も高いでしょう。しかし、それが達成されたら、何らかの形のスクロール可能なペインを実装して、メイン コンテンツがツールバーの上/下をスクロールしないようにする必要があります。

次の CSS は「ほとんどの場合」機能しますが、正しい場所にスナップするのに気が進まないことがあります。

.rpTabBar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  height: 50px;
  margin-top: -50px;
  clear: both;
}
于 2013-03-14T22:56:50.423 に答える