Bevels Bevels - 1 month ago 16
Javascript Question

Pull value from an HTML data attribute into a jQuery plugins options array

Many jQuery plugins have an options array which allows you to specify certain settings.

Is it possible to write a function directly into the plugins options array to add a value from a HTML data-attribute? or pull any html content for that matter?

Example:

The following is for the Circliful plugin which creates a simple circular chart based on the percentage value you specify in

percent:
which obviously wants an integer.. but what I'd like to do is pull a value from the DOM and add it as the percent value.

I've wanted to do this on a number of occasions but I've always ended up finding workarounds, it'd be great to know if it's possible.

Thanks!

$( document ).ready(function() {
$("#your-circle").circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 50 //get value of a data attribute and put it here
});
});

Answer

from the plugin documentation you seem to do this by default using data-percent attribute

see:https://github.com/pguso/jquery-plugin-circliful#data-attributes

or you can create a global variable and pass the value to the property:

$( document ).ready(function() {
        var percent = $("#your-circle").attr('data-percent');
        $("#your-circle").circliful({
        animationStep: 5,
        foregroundBorderWidth: 5,
        backgroundBorderWidth: 15,
        percent: percent //get value of a data attribute and put it here
});
});

(note: seems that the data-attributes only work with a earlier version of the plugin )