Percentage dynamic color bar plug-in based on jquery

I have never written a jquery plug-in before. When developing this, I wrote some code and looked at the definition of jquery plug-in (how to develop it, etc.), and it went back and forth.

The reason why I want to write this plug-in is mainly to facilitate the implementation of this type of function in future projects. In the previous questionnaire survey application, this was used to display the results, but it was not developed at the time. It doesn’t have to be a plug-in. It’s a lot of code that is annoying to read and troublesome to use (it took me a whole morning to adjust it).

Fortunately, this function is relatively simple and is just right for new handwriting plug-ins.

The specific effect is as shown in the figure:

Percentage dynamic color bar plug-in based on jquery_jquery

This is also a simple proportion diagram. ( function ($) {
$.fn.percentbar = function (o) {
var options1 = $.extend({

percent:[],//Percent array, such as: [0.5,0.4, 0.6] When the length is greater than 1, the distribution ratio is in order bar_bgcolor:'#EFEFEF', //Background color of the color barbar_bordercolor:'#E2E2E2',//Border color of the color barbar_borderwidth: 1,//The border width of the color barwidth:250,//The width of the color barheight:14,//The height of the color barcallback:function(){}//lCallback function (After the color bar is displayed)

},o);

var g=this.length;
var styleData=InitColor();
$(this).css({ "background": "none repeat scroll 0 0 #EFEFEF", "border": "1px solid #E2E2E2" ,"height": options1.height "px","width": options1.width "px","background-color":options1 .bar_bgcolor,"border-color":options1.bar_bordercolor,"border-width":options1.bar_borderwidth "px"});
$(this).each(function(index, element) {
$( element).append("

");
if(g==index 1)
{
$( element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "slow",options1.callback)
}else
{
$(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "slow")
}
});
//Initialize the color bar
function InitColor() {
var o = [];
var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6 ", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"];
var q = n.slice();
for (var p = 0, l = g; p < l; p ) {
var k = Math.floor(Math.random() * q. length);
o.push(q[k]);
q.splice(k, 1);
if (q.length == 0) {
q = n.slice( )
}
}
return o
}
}
})(jQuery);

Originally I wanted to separate css, but in the end It is better to export it directly to the jquery plug-in, which is more convenient to use.

Example:

Copy code

The code is as follows:

$(". good").percentbar({ percent: [0.5, 0.4], width: 500 });

Method parameter description: percent: proportion array (proportion), such as: [0.5,0.4,0.6] When the length is greater than 1, it will be distributed in order Ratiobar_bgcolor: background color of color barbar_bordercolor: border color of color barbar_borderwidth: border width of color bar

width: width of color bar

height: height of color bar
callback: callback function (after the color bar is displayed)

Related labels：

percentage

source：php.cn

Previous article：jQuery UI Autocomplete 1.8.* Chinese input correction method under firefox_jquery Next article：dotopAlert prompts the user to install the player code_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn