效果图：

网站页面上弹出消息提示狂，用来提示重大事件。

<script src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/static/media/js/activebar2.js"></script>

　　　　//设置消息条通知内容
                var $strTip = '欢迎您加入中国失智老人网！';
                //在div元素中显示通知内容
                $('<div></div>').html($strTip).activebar({
                    'background': 'yellow',//背景色
                    'border': 'black',//1像素的边框背景色
                    'font': 'serif', //字体名
                    'fontColor':'red',//字体颜色
                    'fontSize':'20px',//字体大小
                    'icon': 'url(/static/media/images/pagination.png)',//通知栏左侧信息图标
                    'button':'url(/static/media/images/pagination.png)',//通知栏右侧删除图标
                    'url': 'http://www.weather.com.cn/', //点击内容跳转的URL
                    'highlight': 'blue'//鼠标移到消息栏，显示的背景色
                });

完整demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>消息通知条插件</title>
        <link rel="stylesheet" href="http://www.ijquery.cn/css/css.css" />
        
        
        
        <!-- start -->
        <script src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
        <script src="js/activebar2.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                //设置消息条通知内容
                var $strTip = '温馨提示：明天有大雨，请大家出行时携带好雨具！';
                
                //在div元素中显示通知内容
                $('<div></div>').html($strTip).activebar({
                    'font': 'serif', //字体名
                    'url': 'http://www.weather.com.cn/', //点击内容的URL
                    'highlight': 'Highlight',
                });
            });
        </script>
        <!-- end -->
        
        
        
    </head>
    <body>
        <div id="header">
            <h1>第94款插件：activebar2.js消息通知条插件</h1>
        </div>
        <div id="container">
            <center>
                
                
            </center>
        </div>
    </body>
</html>

注意事项：

不兼容jquery最新1.11.版本。

activebar的用法的更多相关文章

  1. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  2. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  4. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  5. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

  9. 萌新笔记——vim命令“=”、“d”、“y”的用法（结合光标移动命令，一些场合会非常方便）

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

随机推荐

  1. selenium 学习笔记 ---新手学习记录（10） 问题总结（java）--poi--excel 操作

    1.当我使用poi想要操作xlsx时,报错,解决方法下载xmlbeans-2.6.0.jar架包,引入即可.点我下载 https://yunpan.cn/cSdVqp6e4v6Jk  访问密码 2c5 ...

  2. Linux中fork()函数详解（转）

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同, ...

  3. jQuery事件函数bind,live,delegate的区别

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何 ...

  4. activemq下activemq.bat不能启动

    今天下载了一个apache-activemq-5.5.0-bin.rar解压缩后双击/bin目录下的activemq.bat批处理文件发现启动窗口一闪而过无法启动,最后找到原因是因为在环境变量-系统变 ...

  5. 面试题：给定一个长度为N的数组，其中每个元素的取值范围都是1到N。判断数组中是否有重复的数字

    题目:给定一个长度为N的数组,其中每个元素的取值范围都是1到N.判断数组中是否有重复的数字.(原数组不必保留) 方法1.对数组进行排序(快速,堆),然后比较相邻的元素是否相同.时间复杂度为O(nlog ...

  6. c++实现精确计时

    //获取比較准确是程序执行时间 #include<iostream> #include<windows.h> using namespace std; int main(voi ...

  7. Oracle PL/SQL 游标

    在PL/SQL块中执行SELECT.INSERT.DELETE和UPDATE语句时,ORACLE会在内存中为其分配上下文区(Context Area),即缓冲区.游标是指向该区的一个指针,或是命名一个 ...

  8. .Net将多个DLL打包为一个DLL(ILMerge)

    在做.Net底层编码过程中,为了功能独立,有可能会生成多个DLL,引用时非常不便.这方面微软提供了一个ILMerge工具原版DOS工具,可以将多个DLL合并成一个.下载完成后需要安装一下,然后通过DO ...

  9. React Native for android 项目驱动教程

    第一节 搭建开发环境 第二节 显示页面标题 第三节 实现页面布局 # React native是什么? React Native,是颠覆性的移动开发技术.它使用js开发,又是原生应用,不同于Hybri ...

  10. 【转】android开发中关于模拟器emulation的常见问题

    [转]android开发中关于模拟器emulation的常见问题 Trouble: 无法启动android模拟器,提示 XDM authorization key matches an existin ...