在制作弹窗对话框插件之前，咱们先来制作一个显示Hell World提示的小案例：
1.按以下路径创建文件，并引入相对应的js；
├─source //主目录
│
├─Demo1 //第一个案例 - Hello World
│ │
│ ├─demo.html //html - 没啥好介绍的，就是HTML文件而已
│ │
│ └─demo.js //javascript - 插件主代码
│
├─Demo2 //第二个案例 - showModal
│ │
│ ├─demo.html //html - 不介绍，还是HTML文件而已
│ │
│ ├─jquery.showModal.css //css - 弹窗样式文件
│ │
│ ├─jquery.showModal.js //javascript - 插件主代码
│ │
│ └─res //resource - 资源文件夹
│ │
│ └─close.svg
│
└─js //jQuery库，案例jQuery引用来源都在这里
│
└─jquery.min.js //javascript - jQuery库，版本v1.10.2
注：编写插件之前请熟悉jQuery方法和事件的写法，不然学起来可能雨里雾里哦~另外，本章节不涉及样式编写，所以不用创建CSS文件。2.打开Demo1文件夹下的demo.js，编写下面代码：
;(function ($) {
"use strict";
$.fn.sayHello = function (options) {
return this.each(function () {
var $this = $(this);
$this.on('click', function() {
alert("Hello World");
});
});
};
})(jQuery);咱们简单讲下主要代码的作用及意义：
"use strict"; //启用严格模式，js压缩时慎用！
$.fn.sayHello = function (options) { //sayHello是你到时候调用的方法
return this.each(function () {
var $this = $(this);
$this.on('click', function() { //给sayHello方法添加click事件
alert("Hello World"); //单击时提示Hello World
});
});
};咱们把其他没有注释的代码当作一个插件编写的模板，也就是说可以不用动它，咱们只管写好我们要实现功能的代码就行。
3.打开同目录下的demo.html，编写下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<button class="Demo_sayHello">Hello World</button>
<script src="../js/jquery.min.js"></script>
<script src="demo.js"></script>
<script type="text/javascript">
$(function(){
$('.Demo_sayHello').sayHello();
});
</script>
</body>
</html>从上述代码可以看出，咱们写完插件调用时的代码是这样的：
$('.Demo_sayHello').sayHello(); //Demo_sayHello是类名，sayHello是方法，后面记得加()哦！编写完后打开html文件，点击以下按钮，这时应该会弹出并显示Hello World的提示框，如图：
这样一个简单的插件就完成啦！但是如果我们需要把Hello World改成其他提示消息呢？直接把Hello World改掉嘛？
答案是把方法参数化，简单说就是把不固定的内容写成参数形式。如果不写成参数形式，那么方法就成固定的啦！那又该怎么做才能让它方法参数化呢？答案是...看下一篇呀！
扫一扫
4266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
