关于"jQuery创建自己的插件(自定义插件)的方法"，下面是一个完整的攻略：
1.创建插件的基本步骤
创建 jQuery 插件的基本步骤包含以下几个步骤：
1. 使用 jQuery 的 $.fn 或者 $.prototype 创建插件的模板
2. 给插件添加默认参数
3. 在模板中编写插件的具体代码
4. 在插件中使用 JavaScript 的面向对象编程思想，支持多个实例
5. 使用插件的时候，需要对插件进行实例化
下面结合具体的例子展示以上步骤：
2.示例一：jQuery模拟滚动条插件
- 创建插件的模板，使用
$.fn或者$.prototype，这里我们选择使用$.fn:
$.fn.myScrollBar = function(options){
// Code Here
}
- 给插件添加默认参数：
$.fn.myScrollBar = function(options){
var settings = $.extend({
bgColor : "#fff",
barColor : "#999"
},options);
}
- 在模板中编写滚动条效果的具体代码：
$.fn.myScrollBar = function(options){
var settings = $.extend({
bgColor : "#fff",
barColor : "#999"
},options);
return this.each(function(){
// 获取当前元素，即包含内容的容器元素
var $self = $(this);
// 创建滚动条主体元素
var $scrollBox = $("<div>").addClass("scroll-box");
// 创建滚动条背景元素
var $scrollBg = $("<div>").addClass("scroll-bg").css("background-color", settings.bgColor);
// 创建滚动条条状元素
var $scrollBar = $("<div>").addClass("scroll-bar").css("background-color", settings.barColor);
// 把滚动条背景元素和滚动条条状元素添加到主体元素中
$scrollBox.append($scrollBg).append($scrollBar);
// 把滚动条主体元素添加到容器元素中
$self.append($scrollBox);
// 设置容器元素为相对定位
$self.css("position", "relative");
// 设置滚动条主体元素为绝对定位，右侧居中
$scrollBox.css({
"position": "absolute",
"right": "0",
"top": "0",
"bottom": "0",
"width": "14px",
"margin": "auto",
"display": "none"
});
// 设置滚动条背景元素的高度为容器元素的高度
$scrollBg.css("height", "100%");
// 根据容器元素的内容高度和容器元素的高度，计算滚动条条状元素的高度，并设置滚动条条状元素的高度、top和bottom值
var barHeight = $self.height() * $self.height() / $self.children().height();
$scrollBar.css({
"height": barHeight + "px",
"top": "0",
"bottom": "0"
});
// 绑定容器元素的滚动事件
$self.on('scroll', function(){
var st = $(this).scrollTop();
var ch = $(this).children().height();
var ph = $self.height();
var pc = st/(ch-ph);
var pt = pc*(ph-barHeight);
$scrollBar.css("top", pt + "px");
});
// 绑定滚动条条状元素的mousedown/mouseup/mousemove事件
$scrollBar.on("mousedown", function(e){
var scrollBarT = $(this).position().top;
var mouseY = e.pageY;
$(this).addClass("active");
$(document).on("mousemove", function(e){
var newMouseY = e.pageY;
var movY = newMouseY - mouseY;
var newScrollBarT = scrollBarT + movY;
var maxT = $self.height() - barHeight;
if(newScrollBarT < 0){
newScrollBarT = 0;
}else if(newScrollBarT > maxT){
newScrollBarT = maxT;
}
var newScrollPc = newScrollBarT / (maxT);
var newSt = newScrollPc * ($self.children().height() - $self.height());
$self.scrollTop(newSt);
$scrollBar.css("top", newScrollBarT + "px");
});
});
$(document).on("mouseup", function(){
$scrollBar.removeClass("active");
$(document).off("mousemove");
});
});
}
- 在插件中使用 JavaScript 的面向对象编程思想，支持多个实例：
$.fn.myScrollBar = function(options){
var settings = $.extend({
bgColor : "#fff",
barColor : "#999"
},options);
return this.each(function(){
var $self = $(this);
if(!$self.hasClass("scroll-wrap")){
$self.addClass("scroll-wrap");
var scroll = new ScrollBar($self, settings);
scroll.createScrollBar();
scroll.bindEvent();
$self.data("scroll", scroll);
}
});
};
function ScrollBar(dom, settings){
this.dom = dom;
this.settings = settings;
this.$scrollBox = $("<div>").addClass("scroll-box");
this.$scrollBg = $("<div>").addClass("scroll-bg").css("background-color", this.settings.bgColor);
this.$scrollBar = $("<div>").addClass("scroll-bar").css("background-color", this.settings.barColor);
this.$scrollBox.append(this.$scrollBg).append(this.$scrollBar);
this.dom.append(this.$scrollBox);
this.$scrollBox.css({
"position": "absolute",
"right": "0",
"top": "0",
"bottom": "0",
"width": "14px",
"margin": "auto",
"display": "none"
});
this.$scrollBg.css("height", "100%");
this.createScrollBar = function(){
var barHeight = this.dom.height() * this.dom.height() / this.dom.children().height();
this.$scrollBar.css({
"height": barHeight + "px",
"top": "0",
"bottom": "0"
});
var me = this;
setTimeout(function(){
me.$scrollBox.css("display", "block");
},0);
};
this.bindEvent = function(){
var me = this;
this.dom.on('scroll', function(){
var st = $(this).scrollTop();
var ch = $(this).children().height();
var ph = me.dom.height();
var pc = st/(ch-ph);
var pt = pc*(ph-me.$scrollBar.height());
me.$scrollBar.css("top", pt + "px");
});
me.$scrollBar.on("mousedown", function(e){
var scrollBarT = $(this).position().top;
var mouseY = e.pageY;
$(this).addClass("active");
$(document).on("mousemove", function(e){
var newMouseY = e.pageY;
var movY = newMouseY - mouseY;
var newScrollBarT = scrollBarT + movY;
var maxT = me.dom.height() - me.$scrollBar.height();
if(newScrollBarT < 0){
newScrollBarT = 0;
}else if(newScrollBarT > maxT){
newScrollBarT = maxT;
}
var newScrollPc = newScrollBarT / (maxT);
var newSt = newScrollPc * (me.dom.children().height() - me.dom.height());
me.dom.scrollTop(newSt);
me.$scrollBar.css("top", newScrollBarT + "px");
});
});
$(document).on("mouseup", function(){
me.$scrollBar.removeClass("active");
$(document).off("mousemove");
});
};
}
- 使用插件的时候，需要对插件进行实例化：
$(function(){
$('.content').myScrollBar();
});
3.示例二：计数器插件
- 创建插件模板：
$.fn.myCounter = function(options){
// Code Here
}
- 给插件添加默认参数：
$.fn.myCounter = function(options){
var settings = $.extend({
maxValue : 10,
minValue : 0,
step : 1,
initValue : 0,
wrapClass : "counter-wrap",
minusClass : "counter-minus",
addClass : "counter-add",
inputClass : "counter-input",
disabledClass : "disabled"
},options);
// Code Here
}
- 在模板中编写计数器效果的具体代码：
$.fn.myCounter = function(options){
var settings = $.extend({
maxValue : 10,
minValue : 0,
step : 1,
initValue : 0,
wrapClass : "counter-wrap",
minusClass : "counter-minus",
addClass : "counter-add",
inputClass : "counter-input",
disabledClass : "disabled"
},options);
return this.each(function(){
var $self = $(this);
var counter = new Counter($self, settings);
counter.createCounter();
counter.bindEvent();
$self.data("counter", counter);
});
};
function Counter(dom, settings){
this.dom = dom;
this.settings = settings;
this.createCounter = function(){
this.$wrap = $("<div>").addClass(this.settings.wrapClass);
this.$input = $("<input>").addClass(this.settings.inputClass).attr("type", "text").val(this.settings.initValue);
this.$minus = $("<button>").addClass(this.settings.minusClass).html("-");
this.$add = $("<button>").addClass(this.settings.addClass).html("+");
this.$wrap.append(this.$minus).append(this.$input).append(this.$add);
this.dom.append(this.$wrap);
if(this.settings.initValue <= this.settings.minValue){
this.$minus.addClass(this.settings.disabledClass);
}
if(this.settings.initValue >= this.settings.maxValue){
this.$add.addClass(this.settings.disabledClass);
}
this.$input.attr("disabled", true);
};
this.bindEvent = function(){
var me = this;
this.$minus.on("click", function(){
if(me.$minus.hasClass(me.settings.disabledClass)){
return;
}
var value = parseInt(me.$input.val()) - me.settings.step;
me.$add.removeClass(me.settings.disabledClass);
if(value <= me.settings.minValue){
value = me.settings.minValue;
me.$minus.addClass(me.settings.disabledClass);
}
me.$input.val(value);
});
this.$add.on("click",function(){
if(me.$add.hasClass(me.settings.disabledClass)){
return;
}
var value = parseInt(me.$input.val()) + me.settings.step;
me.$minus.removeClass(me.settings.disabledClass);
if(value >= me.settings.maxValue){
value = me.settings.maxValue;
me.$add.addClass(me.settings.disabledClass);
}
me.$input.val(value);
});
this.$input.on("change", function(){
var value = $(this).val();
if(isNaN(value) || value == ""){
$(this).val(me.settings.initValue);
}
value = parseInt($(this).val());
if(value <= me.settings.minValue){
value = me.settings.minValue;
me.$minus.addClass(me.settings.disabledClass);
}else{
me.$minus.removeClass(me.settings.disabledClass);
}
if(value >= me.settings.maxValue){
value = me.settings.maxValue;
me.$add.addClass(me.settings.disabledClass);
}else{
me.$add.removeClass(me.settings.disabledClass);
}
$(this).val(value);
});
};
}
- 使用插件的时候，需要对插件进行实例化：
$(function(){
$('.counter').myCounter({
maxValue : 100,
minValue : 0,
step : 2,
initValue : 0
});
});
好了，以上就是"jQuery创建自己的插件(自定义插件)的方法"的完整攻略，希望对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery创建自己的插件(自定义插件)的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 