JQuery扩展插件--提示信息
2023-06-13 09:15:30 时间
学校做项目顺便写的,还是有点用的。
/***
* JQuery扩展插件--提示信息
*
* 本函数用于创建提示信息
*
* Example
* <code>
* var t = $.noticeMessage(msg, a, b);
* </code>
*
*
* function noticeMessage([msg, a,b])
* @Param {
* msg: 信息内容(默认: Notice Message!)
* a: 配置选项({expire: 过期时间(默认5秒), time: 过渡时间, from: {起始CSS样式}, to:{最终CSS样式}})
* b: 回调函数
* }
* @Return {jQuery(msgDiv): 产生的信息DOM组件的jQuery容器}
*
*
* Example:
* <code>
* var t = $.noticeMessage("Hello World!");
* </code>
*
*
* @Author OWenT
* @Version 1.0
* @Link http://www.owent.net
*/
jQuery.extend({
noticeMessage: function (msg, a, b) {
msg = msg || "Notice Message!";
var option = { "expire": 5000, "time": 500,
"from": { "background-color": "LightGreen", "opacity": "0", "position": "fixed", "bottom": "0px", "z-index": "1000",
"font-size": "24px", "color": "DarkGreen", "padding": "3px", "font-weight": "bold"
},
"to": { "opacity": "1", "bottom": "+5px" }
};
var callback = function () { };
if (a && jQuery.isFunction(a))
callback = a;
else {
a = a || {};
jQuery.extend(option, a);
callback = b || function () { };
}
var msgDiv = document.createElement("div");
jQuery(msgDiv).css(option.from).html(msg);
jQuery(document.body).append(msgDiv);
jQuery(msgDiv).stop().animate(option.to, option.time, callback);
if (option.expire > 0) {
setTimeout(function () {
if (msgDiv) {
jQuery(msgDiv).stop().animate({ "opacity": "0", "bottom": "-5px" }, option.time,
function () { callback(); jQuery(this).remove(); });
}
}, option.expire);
}
return jQuery(msgDiv);
}
});
写在最后补充一下,这个动机基本没什么用了
以后会抽业余时间写个Metro风格的网页库
https://github.com/owent/SimpleMetro
这个目前已经有东西完胜上面的代码了,就此别过
相关文章
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jQuery技巧大放送学习jquery的朋友可以看下
- jQuery入门构造函数
- JQuery插件模板制作jquery插件的朋友可以参考下
- jQuery的实现原理的模拟代码-4重要的扩展函数extend
- jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
- jQuery中使用了document和window哪些属性和方法小结
- 用JQuery在网页中实现分隔条功能的代码
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- Jquery事件的连接使用示例
- 探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
- UpdatePanel和jQuery不兼容局部刷新jquery失效
- jquery判断RadioButtonList和RadioButton中是否有选中项示例
- 基于jquery扩展漂亮的下拉框可以二次修改
- jQuery操作元素css样式的三种方法
- jquery用data方法获取某个元素上的事件
- jQuery创建DOM元素实例解析
- jQuery针对各类元素操作基础教程
- 原生js实现复制对象、扩展对象类似jquery中的extend()方法
- jQuery表格列宽可拖拽改变且兼容firfox