Let's begin with a new project; as usual we need to create an index.html
file. This time the markup involved is so small and compact that we can add it right now:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Go Go Gauges</title> <link rel="stylesheet" type="text/css" href="css/application.css"> </head> <body> <div data-gauge data-min="0" data-max="100" data-percent="50"> <div data-arrow></div> </div> </body> </html>
The gauge widget is identified by the
data-gauge
attribute and defined with three other custom data attributes; namely, data-min
, data-max
, and data-percent
, which indicate the respective minimum and maximum value of the range and the current arrow position expressed in percentage value.
Within the element marked with the
data-gauge
attribute, we have defined a
div
tag that...