

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

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

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

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

  
[![画像の説明をここに入力](https://i.stack.imgur.com/nh9kG.jpg)](https://i.stack.imgur.com/nh9kG.jpg)


CC BY-SA 3.0
2016-04-02T15:21:21.287
23690
2016-04-05T08:39:13.317
13367
question
javascript monaca html
monacaで作成したアプリ内でバッジ表示をしたい


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

[code]

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

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

[code]

    $("ons-toolbar-button").append('<span class="menu-badge">!</span>');
    
[/code]


CC BY-SA 3.0
2016-04-05T08:39:13.317
23762
2016-04-05T08:39:13.317
13314
23690
answer