<!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实例对象扩展的。
两种的应用场景不一样。