<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.message{
position: fixed;
top: 30%;
left: 30%;
z-index: 1;
border: 1px black solid;
width: 200px;
height: 150px;
text-align: center;
}
.message button{
display: block;
margin: 0 auto;
}
</style>
<script src="jquery.min.js"></script>
<script>
(function($){
$.extend({
message:function(obj) {
var $body=$("body");
var $div=$("<div class='message'> hello world</div>");
var $close=$("<button>关闭</button>");
$div.append($close);
$body.append($div);
$close.on("click",function(){
$div.remove();
});
}
});
})(jQuery);
</script>
</head>
<button id="testDel">删除</button>
<body>
<script>
$(function(){
$("#testDel").click(function(){
$.message();
});
});
</script>
</body>
</html>
这个只是实现一个最简单的提示框，主要熟悉jquery.extend
进阶篇
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.message{
position: fixed;
top: 30%;
left: 30%;
z-index: 1;
border: 1px black solid;
width: 200px;
height: 150px;
text-align: center;
}
.message button{
display: block;
margin: 0 auto;
}
</style>
<script src="jquery.min.js"></script>
<script>
(function($){
$.extend({
message: function(message) {
var $body=$("body");
var $div=$("<div class='message'></div>");
$div.text(message||"是否要执行此操作");
var $close=$("<button>关闭</button>");
$div.append($close);
$body.append($div);
$close.on("click",function(){
$div.remove();
});
}
});
})(jQuery);
</script>
</head>
<button id="testDel">删除</button>
<body>
<script>
$(function(){
$("#testDel").click(function(){
// $.message();
$.message("hello ！！！！！！！！！！！！");
});
});
</script>
</body>
</html>
进阶篇新增参数注入和参数默认值。
高级篇
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.message{
position: fixed;
top: 30%;
left: 30%;
z-index: 1;
border: 1px black solid;
width: 200px;
height: 150px;
text-align: center;
}
.message button{
display: block;
margin: 0 auto;
}
</style>
<script src="jquery.min.js"></script>
<script>
(function($){
$.extend({
message:function(obj) {
var success=obj.success;
var fail=obj.fail;
var message=obj.message||"您确定要执行此操作吗";
var $body=$("body");
var $div=$("<div class='message'></div>message");
$div.text(message);
var $t=$("<button>同意</button>");
var $f=$("<button>不同意</button>");
$div.append($t);
$div.append($f);
$body.append($div);
$t.on("click",function(){
$div.remove();
if(success && typeof(success) === 'function'){
success();
}
});
$f.on("click",function(){
$div.remove();
if(fail && typeof(fail) === 'function'){
fail();
}
});
}
});
})(jQuery);
</script>
</head>
<body>
<button id="testDel">删除</button>
<script>
$(function(){
$("#testDel").click(function(){
$.message({
message:"hellow!!!!!",
success:function(){
alert("执行同意操作");
},
fail:function(){
alert("执行取消操作");
}
});
});
});
</script>
</body>
</html>
高级篇参数扩展为单个复杂对象，方便以后添加参数。注入相关调用函数。
至此一个简单的helloworld级别的jquery插件demo结束。
这个demo是基于jquery 类对象扩展的。
之后补充一个基于Jquery实例对象扩展的。
两种的应用场景不一样。