zepto插件的写法

最新推荐文章于 2021-04-12 10:47:10 发布

csdn_yqf1994

最新推荐文章于 2021-04-12 10:47:10 发布

阅读量567

点赞数

分类专栏： Zepto 文章标签：插件

本文链接：https://blog.csdn.net/CSDN_yqf1994/article/details/89240499

版权

Zepto 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

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);

csdn_yqf1994

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zepto插件的写法

HTML文件中调用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>zepto插件的写法</title></head><body> <div>这里是插件</div> <s...
复制链接

扫一扫

专栏目录