1

私はこれを持っています：

<ons-tabbar var="tabbar">
    <ons-tabbar-item icon="search" label="Buscar" page="page2.html" active="true"><div class="badge-notification"><span class="notification">1</span></div></ons-tabbar-item>
    <ons-tabbar-item icon="star-o" label="Revisões" page="page2.html">XXXXXXX<span class="notification">9</span></ons-tabbar-item>
    <ons-tabbar-item icon="tag" label="Combinações" page="page2.html"><span class="notification">9</span></ons-tabbar-item>
    <ons-tabbar-item icon="comments" label="Conversas" page="page2.html"><span class="notification">9</span></ons-tabbar-item> </ons-tabbar>

バッジ通知を機能させるにはどうすればよいですか? 「検索」ボタンの上に (1) を表示するように?... CSS でこれを作成できます...しかし、タブバーの使用を失いました...

<div class="tab-bar">
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none" checked>
    <button class="tab-bar__button" data-role="none" >
        <i class="tab-bar__icon fa fa-4x fa-search"></i>
        <div class="tab-bar__label">Buscar</div>
    </button>
</label>
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none">
    <button class="tab-bar__button" data-role="none" >
    <i class="tab-bar__icon fa fa-4x fa-star-o"></i>
    <div class="tab-bar__label">Revisões</div>
    <span class="notification">8</span>
    </button>
</label>
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none">
    <button class="tab-bar__button" data-role="none" >
    <i class="tab-bar__icon fa fa-4x fa-tag"></i>
    <div class="tab-bar__label">Combinações</div>
    <span class="notification">9</span>
    </button>
</label>
<label class="tab-bar__item">
    <input type="radio" name="tab-bar-screen2" data-role="none" >
    <button class="tab-bar__button" data-role="none" >
    <i class="tab-bar__icon fa fa-4x fa-comments"></i>
    <div class="tab-bar__label">Bate-Papo</div>
    <span class="notification">10</span>
    </button>
</label>
</div>

良いドキュメントをどこで見つけることができるか知っている人はいますか?

4

2 に答える 2

0

Unfortunately, you cannot add badge to the tab item for the current version of OnsenUI. We will consider putting this in the next release.

However, it's possible if you use the CSS as shown in ur code above. But you can't use the function and transition of the OnsenUI framework anymore since now it's just simply OnsenUI CSS components. Therefore, you will need to write your own necessary function using JavaScript.

于 2014-08-07T03:46:40.200 に答える
0

質問を投稿してからしばらく経ちましたが、最近まったく同じ問題に対処しなければならなかったので、これが私の解決策です。

ons-tabOnsen は要素ごとに DOM を変更します。そのため、タブバーが完全に初期化されたことを確実に検出できなかったため、単純な DOM の変更 (jQuery であろうとなかろうと) は機能しませんでした。私がやったことは、毎秒実行する関数を設定するコントローラーを作成したことです ( changeNotifications)。この関数では、タブ バーが初期化されたことを検出したら、通知を追加します。

これは私のindex.htmlファイルです：

<body ng-controller="MainCtrl">
  <ons-tabbar var="tabbar" modifier="ios">
    <ons-tab icon="ion-email" id="inbox-tab" label="{{ 'Inbox' | translate }}" page="inbox.html" active="true">
  <!-- more tabs -->
</body>

「MainCtrl.jsメイン」コントローラーがあります」

function _MainCtrl($scope,) {
  function changeNotifications() {
    var inboxTab = $('#inbox-tab');
    if (!inboxTab.length) {
      return; // not initialized yet
    }
    var notif = $('#inbox-notification');
    if (!notif.length) {
      $('#inbox-tab > button').append(
        $('<div class="notification tabbar-notification" id="inbox-notification">5</div>'));
      notif = $('#inbox-notification');
    }

    var numWhatever = 5;
    if (numWhatever == 0) {
      notif.remove();
    } else {
      notif.text(numWhatever);
    }
  }

  function initNotifications() {
    ons.ready(function() {
      setInterval(changeNotifications, 1000);
    });
  }
  initNotifications();
}

Onsen のnotificationスタイルに加えて、tabbar-notificationCSS クラスを使用して以下を追加しています。

.tabbar-notification {
  position: absolute;
  margin-left: 10px;
  margin-top: -44px;
  min-width: 16px;
  font-size: 16px;
  line-height: 16px;
  height: 16px;
}
于 2015-09-30T20:42:48.080 に答える