0
"wheel"プラグインを使用していますが、値とスライダを更新する方法がわかりません。 更新機能がありますが、更新する必要があるときはいつでも、外部から呼び出す方法はわかりません。ここでプラグイン以外のプラグイン関数を呼び出す
は、プラグインのコードである：ここで
var pluginName = "wheel",
defaults = {
min: 0,
max: 1,
step: 0.1
};
// The actual plugin constructor
function Plugin(element, options) {
this._defaults = defaults;
this._name = pluginName;
this.arc;
this.deg = 0;
this.element = element;
this.handle = element.querySelector(".handle");
this.progress = element.querySelector(".progress");
this.options = $.extend({}, defaults, options) ;
this.progressFill;
this.rad = -Math.PI/2;
this.svg;
this.value;
this.init();
}
Plugin.prototype.startDrag = function (event) {
var self = this;
$(window).on("mousemove touchmove", function (event) {
event.preventDefault();
self.drag(event);
}).on("mouseup touchend", function (event) {
event.preventDefault();
self.stopDrag(event);
});
};
Plugin.prototype.drag = function (event) {
var self = this;
var $element = $(self.element);
var pageX = event.pageX;
var pageY = event.pageY;
var touches = event.originalEvent.touches;
// Touch device
if (touches && touches.length === 1) {
pageX = touches[0].pageX;
pageY = touches[0].pageY;
}
var offset = $element.offset();
var deltaX = pageX - (offset.left + $element.width()/2);
var deltaY = pageY - (offset.top + $element.height()/2);
self.rad = Math.atan2(deltaY, deltaX);
self.deg = self.rad * (180/Math.PI);
// Convert radians to degrees relative to positive y-axis
if (self.deg <= 0 && self.deg >= -90) {
self.deg = 90 + self.deg;
} else if (self.deg < -90) {
self.deg = 270 + 180 + self.deg;
} else {
self.deg += 90;
}
this.update();
};
Plugin.prototype.stopDrag = function() {
$(window).off("mousemove mouseup");
this.update();
};
Plugin.prototype.keyDown = function (event) {
var self = this;
var step = self.options.step || 1;
switch (event.keyCode) {
case 38:
self.deg += step;
if (self.deg > 360) {
self.deg -= 360;
}
break;
case 40:
self.deg -= step;
if (self.deg < 0) {
self.deg += 360;
}
break;
default:
break;
}
// Convert degrees to radians relative to positive x-axis
if (self.deg >= 0 && self.deg <= 270) {
self.rad = (self.deg - 90) * (Math.PI/180);
} else {
self.rad = (self.deg - 360 - 90) * (Math.PI/180);
}
self.update();
};
Plugin.prototype.update = function() {
var self = this;
var $element = $(self.element);
var $handle = $(self.handle);
var progress = self.deg/360;
var radius = $element.width()/2 - $handle.width()/2;
var left = Math.cos(self.rad) * radius + $element.width()/2;
var top = Math.sin(self.rad) * radius + $element.height()/2;
$handle.css({
left: left,
top: top
});
self.value = (self.options.max - self.options.min)/360 * self.deg;
if (typeof self.options.onChange === "function") {
self.options.onChange(self.value);
}
// Draw progress bar
self.progressFill.attr("d", self.arc.endAngle(2 * Math.PI * progress));
};
Plugin.prototype.init = function() {
// Place initialization logic here
// You already have access to the DOM element and
// the options via the instance, e.g. this.element
// and this.options
var self = this;
var $element = $(self.element);
var $handle = $(self.handle);
var width = $element.width();
var height = $element.height();
$handle.on("mousedown touchstart", function (event) {
event.preventDefault();
self.startDrag(event);
$(this).focus();
}).keydown(function (event) {
event.preventDefault();
self.keyDown(event);
});
self.arc = d3.svg.arc()
.startAngle(0)
.innerRadius(width/2 - 20)
.outerRadius(width/2);
self.svg = d3.select(this.progress)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
self.progressFill = self.svg.append("path")
.attr("class", "progress-fill");
self.update();
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function (options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName,
new Plugin(this, options));
}
});
}})(jQuery, d3, window, document);
は私の呼び出しです：
var w;
$(function() {
w = $(".wheel").wheel({
min: 0,
max: 120,
step: 5,
onChange: function (value) {
$(".wheel .value").html(Math.round(value) + " Min");
}
});
});
私はこれはHTMLのみで文字列を更新します
function setWheel(value){
$(".wheel .value").html(Math.round(value) + " Min");
$(".wheel").update();
}
を試してみました - それは意志CSSのすべてを適用しないでください。