一个超棒的jQuery通知栏插件 - jBar

日期:2012-10-24  来源:GBin1.com

一个超棒的jQuery通知栏插件 - jBar

在线演示  本地下载

以前我们分享过一款基于jQuery,backbone的通知类库:Backbone.Notifier,今天我们分享另外一个款超棒的通知插件 - jBar。

jBar是 一款基于jQuery的用户行为调用的通知栏实现,和一般的通知不太一样的地方在于它并不弹出一个窗口或者其它提示,当有新的信息或者消息需要传递给用户 的时候,它会在页面顶端或者底端生成一个工具栏,用户可以选择查看或者稍后查看,整个过程不会打断用户目前的浏览操作,也不会让用户感觉到干扰。

主要特性

  • 轻量级的jQuery插件
  • 代码容易实现
  • 支持自定义,方便的修改CSS
  • 并且支持整合jQueryUI
  • 支持现代浏览器

如何使用

使用jbar非常简单,你只需要引入jQuery类库和jBar类库,如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<!--[if lt IE 10]><script src="js/html5.js"></script><![endif]-->

javascript代码如下:

$(window).load(function() {
        // jBar Script by Todd Motto
        $('.jBar').hide();
        $('.jRibbon').show().removeClass('up', 300);
        $('.jTrigger').click(function(){
            $('.jRibbon').toggleClass('up', 300);
            $('.jBar').slideToggle();
        });
});

代码使用非常简单的jQuery实现。希望大家喜欢,如果有任何问题,请给我们留言!

来源:一个超棒的jQuery通知栏插件 - jBar

posted @ 2012-10-25 12:46  igeekbar  阅读(1777)  评论(1编辑  收藏  举报

中文互联: GBin1.com | RSS订阅 | 邮件订阅 | 手机订阅