基于jq实现插件讲述基本操作,提示信息

网上很多插件基本都是基于jq实现的,那么如果我们要实现一个基于jq的插件要如何编写代码呢?本文以一个简单提示信息为例来讲述基于jq实现插件效果!

实现效果:


完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.messageBox{
padding: .5rem 1.5rem;
background: rgba(0,0,0,.5);
color: #fff;
border-radius: .3rem;
position: fixed;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
z-index: 99999;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
jQuery.fn.extend({
cbmessage:function(content){
$(".messageBox").fadeOut().remove()
var i = 3;
setTimeout(function(){
$(".messageBox").fadeOut().remove()
},3000)
$("body").append('<div class="messageBox">'+content+'</div>').fadeIn();
return this;
}
})
})
//调用
$(function(){
$("body").cbmessage("六月初博客站")
})
</script>
</head>
<body>
</body>
</html>

大致讲解:

jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法)  

cbmessage:自定义的方法名

在方法中编写对应的操作,如显示隐藏,插入html等等。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!