最近在工作中写了一个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&nbsp;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插件的更多相关文章

  1. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

  2. JS~Boxy和JS模版实现一个标准的消息提示框

    面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...

  3. Java编程的逻辑 (61) - 内存映射文件及其应用 - 实现一个简单的消息队列

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  4. Flutter Toast消息提示框插件

    Flutter Toast消息提示框插件 在开发flutter项目中,想必大家肯定会用到toast消息提示,说到这里, 大家肯定会想到https://pub.dev/ 插件库, 但是插件市场上有太多类 ...

  5. 【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件

    原文:https://segmentfault.com/a/1190000012344970 插件介绍 这是一个我在写以前的项目的途中发现的一个国人写的jQuery图像裁剪插件,当时想实现用户资料的头 ...

  6. js消息提示框插件-----toastr用法

     (本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...

  7. 头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)

    flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...

  8. 如何利用C# Roslyn编译器写一个简单的代码提示/错误检查?

    OK, 废话不多说,这些天在写C#代码时突然对于IDE提示有了一些想法,之前也有了解过,不过并没有深入. 先看个截图: 一段再简单不过的代码了,大家注意看到 count 字段下面的绿色波浪线了吗,我们 ...

  9. (二)如何利用C# Roslyn编译器写一个简单的代码提示/错误检查?

    上一篇我们讲了如何建立一个简单的Roslyn分析项目如分析检查我们的代码. 今天我们主要介绍各个项目中具体的作用以及可视化分析工具. 还是这种截图,可以看到解决方案下一共有三个项目. Analyzer ...

随机推荐

  1. 多Form界面控件状态变化问题分析

    假定有frmA,frmB,frmC三个界面,当frmA中触发显示frmC与frmB触发显示frmC时显示界面不同,或者让frmC上的某个按钮不可用,此时应该在如何来控制frmC的显示.是采用在frmC ...

  2. iOS面试题

    一个区分度很大的面试题 考察一个面试者基础咋样,基本上问一个 @property 就够了: @property 后面可以有哪些修饰符? 线程安全的: atomic,nonatomic 访问权限的 re ...

  3. spring boot开发入门

    最近学习了spring boot,刚刚入门,整理下

  4. 基于SSH框架的网上商城的质量属性

    常见质量属性 1.性能 性能就是一个东西有多快,通常指响应时间或延迟. 响应时间:从发出请求到收到响应所用的时间,比如用户点击网页中的超链接或桌面应用程序中的按钮 延迟:消息从A点到B点,通过你的系统 ...

  5. &&&&数组去重方法总结&&&&&

    [数组去重]本文一共总结了5种方法: //方法一:sort方法 var ary = [1, 4, 2, 3, 1, 2, 2, 3, 3, 2, 5, 2, 1, 2];Array.prototype ...

  6. linux 下C++查询mysql数据库

    上一节我们看了怎么使用mysql提供的API来连接mysql数据库,现在来看看怎么执行一条简单的查询语句,并且把查询的结果显示出来. 准备工作:首先新建了一个数据库inote,在这个数据库下面新建了一 ...

  7. bzoj violet系列 (2708~2725)

    cbh大爷说:写博客不能弃坑. orz cbh 那我就来更新博客了. violet这个系列的题好神啊……出题人好劲啊…… ……怎么最近都在理性愉悦啊…… 另外bzoj400题纪念~ 2708: [Vi ...

  8. python Unicode 编码解码

    1 #将Unicode转换成普通的Python字符串:"编码(encode)" 2 unicodestring = u"Hello world" 3 utf8s ...

  9. sort()基础知识总结+超简短的英文名排序写法

    结合前些天学的箭头函数我想到一种非常简短的sort排序写法:(这可能是最短的英文名排序方法了) 贴出来大家一起探讨一下: [4,1,2,32].sort((x,y)=>x>y); //[1 ...

  10. selenium Remote Server 实现原理

    selenium作为一个出色的web automation框架,被越来越多的企业采用究其原因,框架设计的比较remarkable, 作为一个开源的框架,能够开辟出一套协议,以至于针对app测试的app ...