File: demo.html

Recommend this page to a friend!
  Classes of Robert Haddad   JQuery Bar Gauge   demo.html   Download  
File: demo.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: JQuery Bar Gauge
jQuery plugin to animate a progress gauge bar
Author: By
Last change: Update of demo.html
Date: 2 years ago
Size: 5,523 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bar Gauge Demo</title> <link rel="stylesheet" href="css/BarGauge/jquery.BarGauge.css" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.BarGauge.js"></script> <script type="text/javascript"> $(document).ready(function(e) { $('#demo1').BarGauge({ value: 51000, goal: 100000, decPlaces: 2, title: "Gizmo Orders", showTitle: true, value_before: "$", showValue: true, animSpeed: 'slow', animType: 'linear', toolTip: 'This is how you add a tool tip' }); $('#demo2').BarGauge({ value: 14, goal: 100, decPlaces: 2, color: '#989898', title: "Target Upload", showTitle: false, value_before: "Uploading Files", showValue: true, valueColor: '#909090', animSpeed: 1000, animType: 'swing', faceplate: "url(css/BarGauge/bar_graph-colorScale.png) no-repeat", }); $('#demo3').BarGauge({ color: 'red', backgroundColor: 'green', valueColor: '#000', value: 2, goal: 10, decPlaces: 0, title: "Company Growth", showTitle: true, value_after: "%", showValue: true, animSpeed: 'fast', faceplate: "url(css/BarGauge/bar_graph-gradient.png) no-repeat" }); }); </script> </head> <body> <h2>Demo 1</h2> <div id="demo1" class="barGauge_container"></div> <h2>Demo 2</h2> <div id="demo2" class="barGauge_container"></div> <h2>Demo 3</h2> <div id="demo3" class="barGauge_container"></div> <h2>Usage:</h2> <code> <h3>Include in Head Tag</h3> &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;<br /> &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js">&lt;/script&gt;<br /> &lt;script type="text/javascript" src="js/jquery.BarGauge.js">&lt;/script&gt;<br /> <h3>JavaScript / jQuery</h3> $('#demo1').BarGauge({<br /> &nbsp;&nbsp;&nbsp;&nbsp;color: "#00C",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Color of the Progress / Gauge Bar <br /> &nbsp;&nbsp;&nbsp;&nbsp;backgroundColor: "#FFF",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Background color of Progress / Gauge Bar<br /> &nbsp;&nbsp;&nbsp;&nbsp;width: "754px",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default width of Bar (Original Graphic Size of faceplate)<br /> &nbsp;&nbsp;&nbsp;&nbsp;height: "72px",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default height of Bar<br /> &nbsp;&nbsp;&nbsp;&nbsp;value: 0.01,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Value of Bar Gauge (Current Position)<br /> &nbsp;&nbsp;&nbsp;&nbsp;goal: 1.00,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Goal of Bar Gauge (Maximum Position)<br /> &nbsp;&nbsp;&nbsp;&nbsp;title: "BarGauge",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default Title of Bar Gauge<br /> &nbsp;&nbsp;&nbsp;&nbsp;showTitle: true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If True show title<br /> &nbsp;&nbsp;&nbsp;&nbsp;value_before: "",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default Value before text I.E. $1,000<br /> &nbsp;&nbsp;&nbsp;&nbsp;value_after: "",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default Value Text end text I.E 1,000 USD<br /> &nbsp;&nbsp;&nbsp;&nbsp;showValue: true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// If True Show the value field in the Gauge Bar<br /> &nbsp;&nbsp;&nbsp;&nbsp;valueColor: '#3cff00',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default Value Color <br /> &nbsp;&nbsp;&nbsp;&nbsp;faceplate: "url(css/BarGauge/bar_graph.png) no-repeat", // Default locaiton of faceplate graphic other options (bar_graph(colorScale).png and bar_graph(gradient).png)<br /> &nbsp;&nbsp;&nbsp;&nbsp;animSpeed: 400,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Animation Speed can be string &quot;slow&quot;,&quot;fast&quot;,etc... Or Integer<br /> &nbsp;&nbsp;&nbsp;&nbsp;animType: "swing",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Animation Type (jQuery Animation Methods)<br /> &nbsp;&nbsp;&nbsp;&nbsp;decPlaces: 2,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Default decimal places on the text field when showing value<br /> &nbsp;&nbsp;&nbsp;&nbsp;thouSeparator: ',',&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default Thousands seperator I.E. 1,000 or 1.000<br /> &nbsp;&nbsp;&nbsp;&nbsp;decSeparator: '.'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Default Decimal Separator I.E. 0.001 or 0,001<br /> }); <h3>HTML</h3> &lt;div id="demo1" <stong><font color="red">class="barGauge_container"</font></stong> &gt;&lt;/div&gt; </code> </body> </html>