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实现计数气泡提醒

标签：气泡提醒   jqmobi   

原文地址：http://blog.csdn.net/cwb1128/article/details/39228547