消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统。但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调用的嘛。看了下百度个人首页的右侧滑出层效果还不错(尽管百度的UI一直被广大业内人士诟病),决定仿造它来做个消息提示插件。插件写的不多,拿此来练练手~

  百度的

我的

  样式是由单独的css文件控制的,不喜欢的可以自己设置。下面介绍一下对外提供的API:

  首先,代码中有这么一行:

$(function(){
window.msgbox = $.msgbox();
});

  即创建一个全局变量msgbox,在任何地方都可以访问到它。只所以这么做是因为,我认为消息盒子对于一个系统来讲就应该是一个全局的东西,你在系统的任何位置,都可能会收到消息,所以这个msgbox应该是在任何地方都能访问得到的,并且整个系统只有一个就够了。若你有别的想法,也可以将这几行从源码中删掉,自己在页面上创建。msgbox包含的方法如下:

名称 参数 描述
hideBox() 隐藏消息盒子
showBox() 显示消息盒子
openBox([time]) 不加参数,永久展开。加参数time,则在该毫秒数后自动收起 展开消息盒子
closeBox() 收起消息盒子
setMsgnum(n) nunmber,未读消息条数 设置未读消息条数
getMsgnum() 获取未读消息条数
clearMsgnum() 清除未读消息
setTitle() 设置标头
setContent(cont) string,html字符串 设置主面板中的内容
getContent() 获取住面板中的内容

  最后附上打包文件,有demo页,一看就明白。

  http://files.cnblogs.com/lvdabao/msgbox.zip

jquery插件:仿百度首页可展开收起的消息提示控件的更多相关文章

  1. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

  2. jquery messagetip信息语提示控件

    编写原因: 作为提示框,jquery有个messagebox的控件,也就是弹出的提示框.但这个控件如果不是用在需要确认的时候,单单警告提示.消息提示.失败提示时,用户还需要去点下确认,有时这操作还是挺 ...

  3. jquery插件——仿新浪微博限制输入字数的textarea

    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...

  4. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  5. jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  6. C# WPF 低仿网易云音乐(PC)Banner动画控件

    原文:C# WPF 低仿网易云音乐(PC)Banner动画控件 由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴,而且我也写有很 ...

  7. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  8. 一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  9. 百度地图API示例之添加定位相关控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

随机推荐

  1. 强大的Spring缓存技术(下)

    基本原理 一句话介绍就是Spring AOP的动态代理技术. 如果读者对Spring AOP不熟悉的话,可以去看看官方文档 扩展性 直到现在,我们已经学会了如何使用开箱即用的 spring cache ...

  2. wget下载工具

    转自于:http://www.jb51.net/LINUXjishu/86326.html 1.使用wget下载单个文件  e.g. wget http://cn.wordpress.org/word ...

  3. python学习之路-day12-mysql && orm

    一.数据库 1.数据库介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数据存储 ...

  4. 第3天作业 PoEdu MyString实现

    作业要求 代码: #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <cstring> class My ...

  5. android应用中增加权限判断

    android6.0系统允许用户管理应用权限,可以关闭/打开权限. 所以需要在APP中增加权限判断,以免用户关闭相应权限后,APP运行异常. 以MMS为例,在系统设置——应用——MMS——权限——&g ...

  6. 需要了解的 Linux 网络和监控命令

    列出来的10个基础的每个linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些: hostname, ping, ifconfig, iwconfig, netstat, nslookup ...

  7. mysql解压缩安装(一)

    MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C:\P ...

  8. STL的迭代器和类型萃取

    今天就可以把STL库中迭代器的实现,和类型萃取好好整理一下了 迭代器的设计思维是STL的关键所在,在STL的实际运用和泛型思维,迭代器都扮演着十分重要的角色,STL力求把数据容器和算法的概念分开来,于 ...

  9. spring mvc 使用ehcache

    一.需要导入的jar包 1.ehcache.jar 2.ehcache-spring-annotations-1.2.0.jar 3.guava-r09.jar 4.slf4j-api-1.6.6.j ...

  10. iOS App打包上架的流程

    一.申请苹果开发者账号 首先需要申请苹果开发者账号才能在APP store 里发布应用. 开发者账号分为:(1)个人开发者账号   (2)企业开发者账号   主要的区别是:点击打开链接 1.个人开发者 ...