-1

現在、monacaとniftymbaasでアプリを作成しております。

内容としてはスライディングメニューを採用していて、niftymbaas側から新しいデータを取得した際に、メニューボタン及び、メニュー内の項目にバッジ表示をしたくて質問をしました。
イメージとしては下の画像のような感じにしたいです。

流れ的に、mbaas側の新しいデータを取得してmonaca側に伝えてバッジ表示をさせるという考え方であっているのでしょうか?
参考になるサイト、またはプログラムを教えて頂けると助かります。

ご教授よろしくお願いします。

                                                       
画像の説明をここに入力

1 件の回答 1

1

バッジのような見た目を実現するにはスタイルを定義しておきます。
検索すれば凝ったCSSも数多く見つかると思います。

.menu-badge {
  padding: 2px 4px;
  font-size: .5em;
  color: white;
  background-color: red;
  border-radius: 3px;
}

また、動的に表示するにはJavaScriptを使いますが、
基本的には表示させたい部分に<span>要素を追加する形になるかと思います。
例えばjQueryだと以下のような感じで。

$("ons-toolbar-button").append('<span class="menu-badge">!</span>');
2
  • 回答ありがとうございます。 バッジ表示がなんとかできました。 しかし、onsen-uiのスライディングでangularjsを使っているせいか様々なページに遷移をすると、バッジが何個も表示し続けてしまいます。上の画像ですとNのところです。何個も表示しない方法はありますか?よろしくお願いします。
    – donadesu
    2016年4月8日 16:04
  • なぜ何個も表示し続けるか理解していますか?
    – otak-lab
    2016年4月13日 1:58

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。