最近在工作中写了一个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 ...
随机推荐
-
UML 之 四种关系
学习过UML的人都知道,UML之中有九种图和四种关系,今天,我们先来介绍一下这四种关系: 对于我们这些初学者来说,UML之中无非是 关联.依赖.泛化和实现,但是其中,关联和依赖又如何区分?泛化又如何 ...
-
php中include包含文件路径查找过程
首先,“路径”分为三种: 1.绝对路径,以/开头(unix系统)或c:等盘符开头(windows系统). 2.相对路径,以.开头,有./(当前目录)和../(上级目录). 3.其他路径,不是绝对路径和 ...
-
学习Android之内部类
java语言允许在类中再定义类,这种在其它类内部定义的类就叫内部类.内部类又分为:常规内部类.局部内部类.匿名内部类和静态嵌套类四种.我们内部类的知识在Android手机开发中经常用到. 一.常规内部 ...
-
C语言练习题_邮票组合
背景: 我们寄信都要贴邮票,在邮局有一些小面值的邮票,通过这些小面值邮票中的一张或几张的组合,可以满足不同邮件的不同的邮资. 现在,邮局有4种不同面值的邮票.在每个信封上最 ...
-
[React] React Fundamentals: Build a JSX Live Compiler
we want to have the ability to write JSX and see the output live in the browser. <!doctype html&g ...
-
给EditText中的图片加监听
package com.example.helloword; import android.app.Activity; import android.content.Context; import a ...
-
React周末特训班
Document #react819_content a { text-decoration: none; color: #ef7b2e; border-bottom: 1px solid #ef7b ...
-
js判断参数是否为非数字
isNaN() 函数用于检查其参数是否是非数字值.
-
linux 安装python 和pip
下载文件 python官网:https://www.python.org/downloads/ 百度网盘http://pan.baidu.com/s/1mixGB12 密码 9nzu [r ...
-
MYSQL查询系列 常考问题
表结构: `student`('id'.'name'.'code'.'age'.'sex')学生表 `teacher`('id'.'name')教师表 `course`('id'.'name'.'te ...