一个超棒的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 @   igeekbar  阅读(1793)  评论(1编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
历史上的今天:
2011-10-25 GBin1教程:使用jQuery Mobile快速开发一个手机阅读网站
2011-10-25 5个在线Ajax“加载中”旋转图标生成器工具

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

点击右上角即可分享
微信分享提示