最近在工作中写了一个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. 配置hadoop

    1.$ tar -zxvf  hadoop-1.0.3.tar.gz 2.添加hadoop到环境变量 root登陆: sudo su 修改环境变量:vi  /etc/environment 添加: / ...

  2. C#:泛型(Generic)

    前言:  此系列都为个人对C#的回顾,属于个人理解,新司机可参考.求老司机指点.如果有什么问题或不同见解,欢迎大家与我沟通! 目录:  泛型是什么 泛型的好处及用途 如何声明使用泛型 泛型类 泛型方法 ...

  3. 美团HD(3)-加载分类导航数据

    DJHomeViewController.m /** 设置导航栏左侧内容 */ - (void)setupLeftNavItem { // Logo UIImageView *logoView = [ ...

  4. 关于MapReduce中自定义Combine类(一)

    MRJobConfig      public static fina COMBINE_CLASS_ATTR      属性COMBINE_CLASS_ATTR = "mapreduce.j ...

  5. Linux命令-自动挂载文件/etc/fstab功能详解[转]

    一./etc/fstab文件的作用 磁盘被手动挂载之后都必须把挂载信息写入/etc/fstab这个文件中,否则下次开机启动时仍然需要重新挂载. 系统开机时会主动读取/etc/fstab这个文件中的内容 ...

  6. Nacl开发

    环境搭建:http://www.bojinxiaozhu.com/2014/0221/80.html http://blog.csdn.net/xoyojank/article/details/814 ...

  7. nginx使用ngx_lua访问后端Thrift-Server实现和介绍

    背景 随着openresty的出现,让nginx使用lua解决一些业务的能力大幅度提高,ngx_lua可以使用nginx自生的基于事件驱动的IO模型,和后端的存储,业务等系统实现非阻塞的连接交互. 如 ...

  8. php中的高危函数

    phpinfo() 功能描述:输出 PHP 环境信息以及相关的模块.WEB 环境等信息. 危险等级:中 passthru() 功能描述:允许执行一个外部程序并回显输出,类似于 exec(). 危险等级 ...

  9. git操作

    svn终结,git时代来临 git是最好的分布式版本控制系统 廖雪峰的git讲的蛮不错,http://www.liaoxuefeng.com/wiki/0013739516305929606dd183 ...

  10. [每日一记] Python报错 IndentationError: unexpected indent

    IndentationError: unexpected indent 代码缩进出现错误 今天这个报错的原因是,早些时候的代码里Tab和空格混起来用了,,,[不是我...是编辑器的锅 不过我已经把Su ...