HTML文件中调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zepto插件的写法</title>
</head>
<body>
<div>这里是插件</div>
<script type="text/javascript" src="../../lib/zepto.min.js"></script>
<script type="text/javascript" src="../../lib/zepto.color.js"></script>
<script type="text/javascript">
$("div").color({
col : "red"
}).addClass("helloworld");
</script>
</body>
</html>
zepto.color.js插件的创建,前面的一个 ; 号是容错处理,怕上一个script里面的函数忘记写;号。导致程序无法运行
;(function($){
//一个插件的写法 $.fn可以给Zepto添加扩展。
$.fn.color = function(option){
var options = $.extend({
col: "blue",
fz : "20px"
}, option);
this.css("color", options.col);
this.css("fontSize", options.fz);
return this;
}
})(Zepto); //这里的$就代表Zepto了,这是zepto中定义的一个函数
多组插件写法
;(function($){
$.extend($.fn, {
color: function(option){
var options = $.extend({
col: "blue",
fz : "20px"
}, option);
this.css("color", options.col);
this.css("fontSize", options.fz);
return this;
},
background: function(option){
var options = $.extend({
bg: "blue"
}, option);
this.css("background", options.bg);
return this;
}
})
})(Zepto);