(jquery plugin) to create a percent dynamic color bar

I have not written the jquery plugin before, in the development of this, write the code, and look at the definition of jquery plug-ins (how to develop the stuff), come and go.

The reason to write this plug-in, mainly for the next project to facilitate the implementation of this type of function, in the previous survey of the application, the use of this to show the results, but at that time was not used in the development of plug-ins, a lot of code, look also bored, with a lot of trouble (then a morning).

Fortunately, this feature is relatively simple, just right for the new handwriting plugin.

Specific effects

This is also a simple scale chart bar.

The specific code for the plugin is as follows:

1; (function ($) {2$.fn.percentbar =function(o) {3         varOPTIONS1 =$.extend ({4Percent:[],//proportional arrays, such as: [0.5,0.4,0.6] longer than 1 o'clock, in order to scale5Bar_bgcolor: ' #EFEFEF ',//background color of the color bar6Bar_bordercolor: ' #E2E2E2 ',//border color of the color bar7Bar_borderwidth:1,//border width of the color bar8WIDTH:250,//width of the color bar9Height:14,//height of the color barTenCallbackfunction(){}//L callback function (after the color bar is displayed) One },o); A         varg= This. Length; -         varStyledata=Initcolor (); -$( This). CSS ({"Background": "None repeat scroll 0 0 #EFEFEF", "Border": "1px solid #E2E2E2", "height": options1.height+ "px", "wid Th ": options1.width+" px "," Background-color ": Options1.bar_bgcolor," Border-color ": Options1.bar_bordercolor," Border-width ": options1.bar_borderwidth+" px "}); the$( 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 +             { A$ (Element). FIND ("span"). Animate ({width:Math.round (options1.percent[index] * options1.width)}, "Slow") at             } -  -         }); -          -         //Initialize the color bar -         functionInitcolor () { in             varo = []; -             varn = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335 F "," #fbe096 "," #ffc535 "]; to             varQ =N.slice (); +              for(varp = 0, l = g; P < L; p++) { -                 varK = Math.floor (Math.random () *q.length); the O.push (Q[k]); *Q.splice (k, 1); $                 if(Q.length = = 0) {Panax NotoginsengQ =N.slice () -                 } the             } +             returno A         } the          +          -     } $}) (JQuery);

Originally wanted to put the CSS independent, but in the end is directly out of the jquery plug-in, so the use of more convenient to say.

Cases:

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

<div class= ". Good" ><div> <div class= ". Good" ><div> method Parameter Description:

percent: Proportional Array (proportion), such as: [0.5,0.4,0.6] length greater than 1 o'clock, in order to proportion
Bar_bgcolor: Background color of the color bar
Bar_bordercolor: Border color of color bars
Bar_borderwidth: Border width of the color bar
Width: thickness of the color bar
Height: Width of the color bar
Callback: Callback function (after the color bar is displayed)

(jquery plugin) to create a percent dynamic color bar