您的位置：首页 > Web前端 > JQuery

jQuery插件简单示例

2016-01-13 10:43 609 查看

这个示例是拿来当模板用的，基本上只是给出了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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航