首页 > 代码库 > 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实现计数气泡提醒