首页 > 代码库 > jqMobi实现计数气泡提醒

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)用法和第一种一样。

 

 

jqMobi实现计数气泡提醒