我正在努力将我的简单JavaScript Donut Chart转换为jQuery插件.
这是我的第一个jQuery插件,我可以在一些地方使用一些帮助,请…
到目前为止演示的内容：http://jsfiddle.net/jasondavis/qsgqebox/
下面是我到目前为止的JavaScript.
jQuery的
jQuery.fn.updatePercentageGraph = function (options) {
var settings = $.extend({
// These are the defaults.
percent: 0,},options );
var percent = settings.percent;
if(typeof percent === 'undefined') {
var percent = parseInt(this.data('percent'));
}else{
if(percent === '') {
var percent = parseInt(this.data('percent'));
}else{
var percent = parseInt(percent);
this.attr('data-percent',percent);
}
}
var deg = 360*percent/100;
if (percent > 50) {
this.addClass('gt-50');
}else{
this.removeClass('gt-50');
}
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+'%');
};
用法：
$('#project_progress2').updatePercentageGraph(34);
我需要帮助的是：
1)
它目前要求用户像这样设置HTML：
我想做的就是把它放在你可以简单地做这样的事情的地方….
jQuery部分会自动创建：
2)更新一些选择器以允许页面上的多个圆环图
到目前为止,插件中的另一个问题是从上面显示的JavaScript底部开始的第3和第4行.它调用$(‘.ppc-progress-fill’)和$(‘.ppc-percentnts span’),这将阻止在页面上使用多个图表,因此需要更新以定位存在于该页面中的类.仅限当前图表.
3)优化以防止每次调用函数以更新百分比值时重新创建HTML结构
如果我将此插件转换为自动生成HTML结构,那么我还需要考虑对其进行优化,以便每次我的代码运行时都不会一直重复生成该结构,这将调用$( ‘#project_progress2’)updatePercentageGraph(34).因为在我将使用它的项目中,这些图表将不断更新百分比值.
或许甚至可能更好的是有一个创建初始图表HTML的函数,然后是第二个可以反复调用的函数,它只处理百分比的更新,并且不会尝试重建和注入HTML结构结束了！
我提到的这些问题是我现在有点困难的关键领域,请给我一些帮助.
JSFiddle演示：
到目前为止我所拥有的JSFiddle还有一些按钮来测试更新百分比值：http://jsfiddle.net/jasondavis/qsgqebox/
最佳答案
1) The part jQuery would auto create
2) Update some selectors to allow multiple Donut charts on page
防止使用整页选择器.相反,您可以保留对创建的HTML结构的引用,并仅对此子集起作用.不是整个DOM.
3) Optimize to prevent the HTML structure from being re-created every time the function is called to update the percent value
解决多个实例的常用模式是创建一个包含插件实例的数据属性.如果某个实例已存在,那么您只需对该实例执行操作,而不是创建新实例.
拥有此实例对于另一个用于向插件添加方法的jQuery模式也很有用.您可以检查传递给插件的参数是否为字符串,然后调用具有该名称的方法.
$('#project_progress').updatePercentageGraph('percent',percent);
var percent = $('#project_progress').updatePercentageGraph('percent');
一体化,我会建议这样的事情：
(function ($,undefined) {
'use strict';
function PercentageGraph(element,options) {
this.$percentageGraph = $(element).append(
'
见demo
