jQuery插件简单示例

最新推荐文章于 2021-10-21 16:47:57 发布

生活在他方

最新推荐文章于 2021-10-21 16:47:57 发布

阅读量745

点赞数

分类专栏：前台开发资料文章标签： web前端插件 jquery javascript jquery插件

本文链接：https://blog.csdn.net/wuyt2008/article/details/50508979

版权

前台开发资料专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这个示例是拿来当模板用的，基本上只是给出了jquery插件写法的最基本格式

pluginlearn.js：

// JavaScript Document
(function($) { 

    //全局变量    
    "use strict";
    var showNum = 0,//显示数字
        divHeight = 200,//div的高
	divWidth =100;//div的宽
		
	//私有方法开始
	function ShowPrivate(obj){
		obj.html("by private");
	}
	//私有方法结束
		
		
	//主体开始    
	$.fn.pluginlearn = function(options) {
		
		//可输入参数
		$.fn.pluginlearn.defaults = {
			backgroundColor: "red",
            width: null
		};
		
		var opts = $.extend({}, $.fn.pluginlearn.defaults, options);
		
		
        //主体方法开始
		return this.each(function () {
			
			//变量赋值
			if(opts.width===null){
				opts.width=150;
			}
			
			//主体程序部分
			$(this).html(showNum);
			
			$(this).hover(function(){
				$(this).height(divHeight);
				$(this).width(opts.width);
				ShowPrivate($(this));
				$(this).css("background-color",opts.backgroundColor);
			},function(){
				$(this).height(divHeight);
				$(this).width(divWidth);
				$(this).html(showNum);
				$(this).css("background-color","gray");
			});
			//主体程序部分结束
			
		});
		//主体方法结束
        
	};   
	//主体结束

	//暴露方法开始
	$.fn.pluginlearn.width = function(width) {    
		divWidth=width;   
	};  
	//暴露方法结束
})($);

引用的index.html页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.main {
	height:100px;
	width:100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:100px;
	background-color:blue;
}
</style>

</head>
<body>
<div class="main"></div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="pluginlearn.js"></script>
<script>
$(document).ready(function() {
//	$(".main").pluginlearn();
	
//	$(".main").pluginlearn({
//		width:200
//	});

//	$(".main").pluginlearn({
//		backgroundColor:"yellow",
//		width:300
//	});

//	$.fn.pluginlearn.width(50); 
//	$(".main").pluginlearn();
//	$.fn.pluginlearn.width(50); 

});


</script>
</body>
</html>

生活在他方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件简单示例

这个示例是拿来当模板用的，基本上只是给出了jquery插件写法的最基本格式pluginlearn.js：// JavaScript Document(function($) { //全局变量 "use strict"; var showNum = 0,//显示数字 divHeight = 200,//div的高 divWi
复制链接

扫一扫