jqMobi實現計數氣泡提醒

由於要在應用系統主界面報警圖標的右上角顯示帶數字的紅色氣泡，以便直觀的實現提醒功能，效果圖如下：

                                             

 

經過技術選型，選擇了jqMobi開發框架，首先下載此開發框架的最新版，目前是2.1.0版本。

實現方式一：

1）解壓下載的appframework-2.1.0.zip。

2）找到下列文件，並在頁面中引入:

      appframework.min.js

      appframework.ui.js

      af.css3animate.js

      af.scroller.js

      appframework.css

       badges.css

3）用法如下：  $.ui.updateBadge("#" + id, res.Msg, "tr");

     第一個參數是需要顯示的標籤ID，第二個參數是需要顯示的文字，第三個參數是需要顯示的位置。

     第三個參數可輸入的字符及含義：

     bl - bottom left     tl - top left    br - bottom right      tr - top right (default)

    使用如上步驟即可實現需要的效果，但是如果需要引用jquery的話，會和jqMobi衝突，導致效果出不來。因此可以採用如下實現方式。

實現方式二：

1）參考此地址的實現方式。

2）下載appframework-master.zip。

3）解壓，找到appframework-master\build\ui下的af.ui.jquery.min.js，並引入

4）然後引入jquery.js和badges.css兩個文件即可。

5）用法和第一種一樣。