一个简单的消息提示jquery插件
最近在工作中写了一个jquery插件,效果如下:

就是一个简单的提示消息的一个东西,支持最大化、最小化、关闭、自定义速度、自定义点击事件,数据有ajax请求和本地数据两种形式。还有不完善的地方,只做了最基本的功能,等有了修改再上传上来。
/**
* 消息提示<br>
* 自动生成的html结构如下:
*
* <div class="title">消息提醒 <div class="toggle" style=""></div> <div
* class="close"></div> </div> <div class="content">
* <ul>
* <li>1、<a href="message.html">八成土地底价成交</a></li>
* <li>2、<a href="message2.html">国有建设用地使用权挂牌出让公告</a></li>
* <li>3、<a
* href="message3.html">您有一笔成本结算单(2013-000666)需要审批。2013-09-15 9:30</a></li>
* </ul>
* </div>
**/ /**
* 消息提示器
*
* 参数说明
*
* @param {Object}
* title 提示标题:默认为消息提醒
* @param {Object}
* items 提示数据:默认为undefined <br>
* items中对象必须的属性包括:id,link,text,其他属性可以任意添加.
* 当参数中提供了ajax的url时,不会使用items中的数据
* @param {Object}
* ajax 提示数据:默认为{type : 'POST', dataType : 'json', url : '' }
* 参数与jQuery中的参数一致,但dataType必须为json,返回的数据格式必须与items属性的格式一致<br>
* @param {Object}
* initShow 布尔值,是否在页面加载时就显示,默认为true
* @param {Object}
* onClose 函数,this表示当前的reminder控件,在点击关闭按钮时会掉用此回调函数
* @param {Object}
* slideDuration 数值,最小化或最大化时的速度,默认为500
* @param {Object}
* onToggle 函数,最小化或最大化时的回调,this表示当前的reminder控件,在点击最小化或者最大化按钮时调用
* @param {Object}
* fadeDuration 数值,关闭按钮点击后窗口淡入淡出的速度,默认为1000
* @param {Object}
* onItemClick 函数,在点击数据项时调用,this表示当前的reminder控件,参数为数据项对象
*
* @author Lee
* @since 2013-8-19 <br>
*/
(function($, undefined) {
$.fn.reminder = function(options, params) {
if (typeof options == 'string') {
if (this.length > 0) { }
return;
} var opts = $.extend(true, {}, $.fn.reminder.defaults, options); return this.each(function() {
$(this).data('reminder.opts', opts);
_init.call($(this));
});
}; function _init() {
_initHTML.call(this);
_initData.call(this);
_initEvent.call(this);
} function _initHTML() {
var opts = this.addClass('reminder').data('reminder.opts'), container = $('<ul></ul>');
$('<div></div>').addClass('title').text(opts.title).append(
'<div class="toggle"></div>').append(
'<div class="close"></div>').appendTo(this);
$('<div></div>').addClass('content').append(container).appendTo(this);
} function _initData() {
var opts = this.data('reminder.opts'), items = opts.items;
if (opts.ajax.url) {
var $this = this;
$.ajax($.extend(true, {}, opts.ajax, {
success : function(items) {
_appendItem.call($this, items);
opts.ajax.success.call(this, items);
}
}));
} else {
_appendItem.call(this, items);
}
} function _appendItem(items) {
var container = this.find('.content>ul');
if (items && items instanceof Array) {
for ( var i = 0; i < items.length; i++) {
var li = $('<li></li>').appendTo(container), item = items[i];
$('<a></a>').attr('link', item.link).attr('id', item.id).text(
item.text).data('data', item).appendTo(li);
}
}
} function _initEvent() {
var $this = this;
var opts = this.data('reminder.opts');
this.delegate('.close', 'click', function() {
_close.call($this);
}).delegate('.toggle', 'click', function() {
_toggle.call($this);
}).delegate('.content li a', 'click', function() {
var data = $(this).data('data');
_itemClick.call($this, data);
}); if (opts.initShow) {
this.find('.content').slideDown(opts.slideDuration);
}
} function _close() {
var opts = this.data('reminder.opts');
this.fadeOut(opts.fadeDuration);
opts.onClose.call(this);
} function _toggle() {
var opts = this.data('reminder.opts'), $this = this;
this.find('.content').slideToggle(opts.slideDuration, function() {
$this.find('.toggle').toggleClass('min');
});
opts.onToggle.call(this);
} function _itemClick(item) {
var opts = this.data('reminder.opts');
opts.onItemClick.call(this, item);
} $.fn.reminder.defaults = {
title : '消息提醒',
items : [ {
id : '',
link : '',
text : '',
data : undefined
} ],
ajax : {
type : 'POST',
dataType : 'json',
url : ''
},
initShow : true,
onClose : $.noop,
slideDuration : 1000,
onToggle : $.noop,
fadeDuration : 500,
onItemClick : $.noop
};
})(jQuery);
2013-08-21
下载地址:http://pan.baidu.com/share/link?uk=641094506&shareid=3987044409
一个简单的消息提示jquery插件的更多相关文章
- 基于jQuery消息提示框插件Tipso
今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览 ...
- JS~Boxy和JS模版实现一个标准的消息提示框
面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...
- Java编程的逻辑 (61) - 内存映射文件及其应用 - 实现一个简单的消息队列
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- Flutter Toast消息提示框插件
Flutter Toast消息提示框插件 在开发flutter项目中,想必大家肯定会用到toast消息提示,说到这里, 大家肯定会想到https://pub.dev/ 插件库, 但是插件市场上有太多类 ...
- 【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件
原文:https://segmentfault.com/a/1190000012344970 插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头 ...
- js消息提示框插件-----toastr用法
(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...
- 头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)
flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...
- 如何利用C# Roslyn编译器写一个简单的代码提示/错误检查?
OK, 废话不多说,这些天在写C#代码时突然对于IDE提示有了一些想法,之前也有了解过,不过并没有深入. 先看个截图: 一段再简单不过的代码了,大家注意看到 count 字段下面的绿色波浪线了吗,我们 ...
- (二)如何利用C# Roslyn编译器写一个简单的代码提示/错误检查?
上一篇我们讲了如何建立一个简单的Roslyn分析项目如分析检查我们的代码. 今天我们主要介绍各个项目中具体的作用以及可视化分析工具. 还是这种截图,可以看到解决方案下一共有三个项目. Analyzer ...
随机推荐
- Nginx中root与alias的用法及区别:
Nginx中root与alias都是定义location {}块中虚拟目录访问的文件位置: 先看看两者在用法上的区别: location /img/ { alias /var/www/image/; ...
- PostgreSQL数据库中的常见错误
转载以作参考. 错误1 FATAL: connection limit exceeded for non-superusers 原因:非超级用户的连接数(max_connections - super ...
- temp
netstat -tlnap lsof -i :40735 ps -ef|grep 10259 iftop iptraf nethogs gidxylxhqp http://blog.csdn.net ...
- logging 文件日志
1. 例子 import logging logging.basicConfig(filename='log.txt', #文件名 level=logging.DEBUG, #级别 format=u' ...
- nodeJS爬虫---慕课网
源代码一(爬取html源码) //引入http模块var http = require('http');//引入url地址var url = 'http://www.imooc.com/learn/2 ...
- 【bzoj4721】[Noip2016]蚯蚓
题目描述 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓.蛐 ...
- session、cookie浅见
万事开头难,刚开始不一定能写好博文,不,应该是一定写的不好,但我定会用心. 以前只知道session是存在服务器,cookie是存在客户端,至于它们工作的原理就不了解了.为了巩固自己记忆,小小的总结了 ...
- Android 系统工具类SystemUtils
包含的功能有: 获取系统中所有APP应用.获取用户安装的APP应用.根据包名和Activity启动类查询应用信息.跳转到WIFI设置.WIFI网络开关.移动网络开关.GPS开关 当前若关则打开 当前若 ...
- nuget的搭建及多源冲突
为什么使用nuget来管理类库引用就不再阐述,好处真的一抓一把.在使用nuget的时候,我们如果总去访问别人的nuget源,受限于网络情况的好坏,速度真的没法保证,更别说访问国外的源了.那好,我们来自 ...
- ios app的版本号
ios其实有3个版本号 version 就是ios的版本号 (只能分3段,并且都是数字) build 是ios构建内部版本时的版本号 (可以分4段) 而提交到appstore时, 还是要创建一个sku ...