今天简单说说JQuery插件的封装。
- 首先上一份简单的模板
//传进来参数有window和document，如果插件用不上，可以不写。目的是为了快速查找window和document。
;(function($,window,document){
//设置插件的名字
var pluginName = "defaultPluginName";
//默认参数配置项
var defaults = {
propertyName : "value"
}
//插件类的构造方法
function Plugin(element,options){
//拿到dom元素，获得对应jq对象，要$(element)
this.element = element;
//覆盖默认配置项
this.options = $.extend({},defaults,options);
//缓存配置项
this._defaults = defaults;
//缓存插件名字（并没神马用）
this._name = pluginName;
//调用初始函数
this.init();
}
// 插件初始化函数
Plugin.prototype.init = function(){
//做你想做的事情
}
// 也可以这样 能定义更多函数
Plugin.prototype = {
init: function () {
this.fun*(); // 这样可以用来调用其他函数
}
fun1: function() { }
fun2: function() { }
.....
}
//fn就是prototype
$.fn[pluginName] = function(options){
//each表示对多个元素调用，用return 是为了返回this，进行链式调用
return this.each(function(){
if(!$.data(this,'plugin_'+pluginName)){
//生成插件类实例。
$.data(this,'plugin_'+pluginName,new Plugin(this,options));
}
});
}
})(jQuery,window,document);
插件封装中，需要注意的是this的使用。不多说。通过上面的模板便能很轻松的封装自己的插件啦~~~
- 然后上一份这是我自己写的轮播图插件
使用方式 很简单的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/slider.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<title>轮播插件</title>
</head>
<body>
<div id="myDiv" style="margin-top: 50px; width: 90%; margin: 0 auto;">
<ul>
<li style="background-image: url('img/1.jpg');">
<!-- 添加想要的内容 -->
</li>
<li style="background-image: url('img/2.jpg');">
<!-- 添加想要的内容 -->
</li>
<li style="background-image: url('img/3.jpg');">
<!-- 添加想要的内容 -->
</li>
<li style="background-image: url('img/4.jpg');">
<!-- 添加想要的内容 -->
</li>
</ul>
</div>
<script type="text/javascript">
$('#myDiv').SliderImg(); // 通过id的必须的
//$('#myDiv').data('myDiv_SliderImg').ToggleImg(2);
</script>
</body>
</html>
将轮播图当做背景图，可以继续在轮播图上添加需要的内容。提供两种轮播效果，淡入淡出和左右滑动，默认参数在插件中可以看到
var defaults = {
Type: 'default', // fade淡入淡出|default左右滚动
ShowPrevNext: true, // 是否显示下一个上一个
ShowBtn: true, // 是否显示切换圆按钮
BtnAlign: 'center', // 切换按钮位置 left|center|right
AutoPlay: true, // 是否自动滚动
TimeOut: 5 // 自动滚动间隔时间
}
可以调用时通过以下方式自定义参数
$('#myDiv').SliderImg({
Type: 'fade'
});
通过data方法获取到轮播插件对象，便可以通过该对象调用内部方法。如下
$('#myDiv').data('myDiv_SliderImg').ToggleImg(2);
调用ToggleImg()方法切换到第三张图。
该轮播插件使用方式就这样，插件如何封装就根据模板和这份插件便可以学会，很简单的。
网友评论