jquery插件:仿百度首页可展开收起的消息提示控件
消息提示插件大伙并不陌生了,无论是个系统还是网站,基本都要有消息系统。但我认为,一个好的提示插件应当具备很好的独立性,不与页面其他元素发生任何关系,其次是能对外提供丰富的接口,因为你生来就是被别人来调用的嘛。看了下百度个人首页的右侧滑出层效果还不错(尽管百度的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插件:仿百度首页可展开收起的消息提示控件的更多相关文章
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- jquery messagetip信息语提示控件
编写原因: 作为提示框,jquery有个messagebox的控件,也就是弹出的提示框.但这个控件如果不是用在需要确认的时候,单单警告提示.消息提示.失败提示时,用户还需要去点下确认,有时这操作还是挺 ...
- jquery插件——仿新浪微博限制输入字数的textarea
内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...
- jquery的智能提示控件
福利到~分享一个基于jquery的智能提示控件intellSeach.js 一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
- C# WPF 低仿网易云音乐(PC)Banner动画控件
原文:C# WPF 低仿网易云音乐(PC)Banner动画控件 由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴,而且我也写有很 ...
- 福利到~分享一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
- 一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
- 百度地图API示例之添加定位相关控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
随机推荐
- IosPush推送通知的实现
1. Apple推送通知的机制 上图可以分为三个阶段: 第一阶段:应用程序把要发送的消息.目的iPhone的标识打包,发给APNS. 第二阶段:APNS在自身的已注册Push服务的iPhone列表中, ...
- Linux的学习之路
linux的安装配置.常用命令: 基本上学习任务: 1.在VMware(9)虚拟机上安装Linux操作系统(安装CentOs操作系统) 2.了解Linux操作系统 3.通过XShell工具操作Linu ...
- 【转载】PHP 开发者该知道的 5 个 Composer 小技巧
Composer是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer PHP依赖管理的新时代>.本文介绍使用Composer的五个小技巧,希望能给你的PHP开发带来方 ...
- 解决SQL server 2014 修改表中的字段,无法保存的问题。
修改PROJECT表中的字段,保存时,弹出上面的窗体,无法保存. 解决方法为:[工具]->[选项]->[设计器]中,去掉“阻止保存要求重新创建表的更改”前的勾选.
- 深入理解HTTP协议
- 斗地主——扎金花——3DMark
public class Card {//扑克类 private String face; private String suit; // 牌面值和花色初始化 public Card(String f ...
- 将一个数组分成奇数部分和偶数部分,并分别排好序 CVTE
给定一个数组,将奇数放到前面,偶数放到后面,各自排好序 (2016年3月12日晚上,CVTE笔试编程第一道题): 思路很简单: (1)先将数组中的奇数和偶数分开(利用两个指针遍历一遍即可,同时统计好数 ...
- 使用sklearn进行集成学习——理论
系列 <使用sklearn进行集成学习——理论> <使用sklearn进行集成学习——实践> 目录 1 前言2 集成学习是什么?3 偏差和方差 3.1 模型的偏差和方差是什么? ...
- Bootstrap 栅格系统
1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的m ...
- java变量
java有四种变量: 成员变量:类成员,在类体内,但在任何方法或构造器之外. 局部变量:在一个代码块中声明并使用. 参数:方法或构造器的变量. 异常处理参数:和参数类似,只是异常处理的自变量而不是方法 ...