1

Facebook の通知バーのようなものを探しています。あなたが持っている「友達リクエスト」、「通知」、または「メッセージ」の数を示すもの。ブートストラップ、ファンデーションなどで実装された、私たちが使用できる素晴らしいものはありますか? または私は CSS を使用する必要があります..独自のものを作成するには?

ありがとう

4

1 に答える 1

1

実際、Bootstrap にはすでに概念が組み込まれており、バッジと呼ばれています。

誰かが以前にアイデアを持っていたようですが、それは CakePHP と呼ばれるライブラリのためのもので、情報を引き出す簡単な方法がわかりません:

ここで素敵なスニペットの例を見つけましたが、通知バッジは右上ではなく左側にあります。

次のようなマークアップがあります。

<div class="navbar" style="position: static;">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Title</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li>
              <a href="#" 
                 data-html="true"
                 data-placement="bottom"
                 data-toggle="popover"
                 data-content="Notification 1<br/>Notification 2"
                 data-original-title="Notifications">
                  <span class="badge badge-success">2</span> Notifications
              </a>
          </li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div><!-- /navbar-inner -->
</div>

そして、次のようなスタートアップ関数:

$(function() {
    $('[data-toggle=popover]').popover();
})

ポップオーバーを使用して通知を表示します。ページのロード中に通知をクライアントにプッシュし、ユーザーが通知メニューを開いたときに通知を処理済みとしてマークし、その情報を返すなど、機能に変えるにはさらに多くのコードを記述する必要があります。データストアに。

于 2013-07-21T18:16:17.513 に答える