Percentage dynamic color bar plug-in based on jquery

I have never written the jquery plug-in before. When developing this plug-in, I will write the code and take a look at the definition of the jquery plug-in (how to develop something like this.

The reason for writing this plug-in is mainly to facilitate the implementation of this type of function in future projects. This is used to display the result in the application that conducted the questionnaire survey before, however, plug-ins were not used at the time of development, and a lot of code was annoying. It was very troublesome to use (it was called one morning at the time ).

Fortunately, this function is relatively simple and is suitable for the new handwriting plug-in.

Specific results



This is a simple proportional chart.
The specific code of the plug-in is as follows:
Copy codeThe Code is as follows:
; (Function ($ ){
$. Fn. percentbar = function (o ){
Var options1 = $. extend ({
Percent: [], // ratio array, for example, when the length of [0.5, 0.4, 0.6] is greater than 1, the distribution ratio is sequential.
Bar_bgcolor: '# efefef', // the background color of the Color Bar.
Bar_bordercolor: '# e2e2e2e2', // border color of the Color Bar
Bar_borderwidth: 1, // Border width of the Color Bar
Width: 250, // The width of the Color Bar
Height: 14, // The height of the Color Bar
Callback: function () {}// l callback function (after the color bar is displayed)
}, O );
Var g = this. length;
Var styleData = InitColor ();
Certificate (this).css ({"background": "none repeat scroll 0 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 ("<p style = \" float: left; margin: 0; padding: 0; \ "> <span style = \" float: left; height: "+ options1.height +" px; overflow: hidden; background-color: "+ styleData [index] +"; width: 0px \ "> </span> </p> ");
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, css was designed to be independent, but it was directly included in the jquery plug-in. This makes it easier to use.

Example:
Copy codeThe Code is as follows:
$ (". Good"). percentbar ({percent: [0.5, 0.4], width: 500 });
<Div class = ". good"> <div>
<Div class = ". good"> <div>

Method parameter description:
Percent: Percentage array (proportion). For example, if the length of [0.5, 0.4, 0.6] is greater than 1, the distribution ratio is sequential.
Bar_bgcolor: the background color of the Color Bar.
Bar_bordercolor: border color of the Color Bar
Bar_borderwidth: Border width of the Color Bar
Width: the width of the Color Bar.
Height: the height of the Color Bar.
Callback: callback function (after the color bar is displayed)