--
--
<!DOCTYPE HTML> | |
<html lang="en-US"> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> | |
<style> | |
.ui-batt { width:44px; height:17px; border: 5px solid #fff; position: relative; } | |
.ui-batt-point { display: block; background: #fff; width:4px; height:13px; position: absolute; left:49px; top: 2px; } | |
.ui-batt-text { | |
content: attr(data-level) "%"; color: #00f; position: absolute; left: 60px; width:20px; | |
font-family: Impact; font-size: 22px; top: -4px; | |
} | |
.ui-batt-level { position: absolute; top: 2px; left: 2px; background: #f00; width:40px; height:12px; } | |
.ui-batt.ui-batt-level-a { border-color: #000; } | |
.ui-batt.ui-batt-level-b { border-color: #888; } | |
.ui-batt.ui-batt-level-c { border-color: #ccc; } | |
.ui-batt.ui-batt-level-d { border-color: #fff; } | |
.ui-batt.ui-batt-level-a .ui-batt-point { background: #000; } | |
.ui-batt.ui-batt-level-b .ui-batt-point { background: #888; } | |
.ui-batt.ui-batt-level-c .ui-batt-point { background: #ccc; } | |
.ui-batt.ui-batt-level-d .ui-batt-point { background: #fff; } | |
.ui-batt.ui-batt-level-a .ui-batt-level { background: #f00; } | |
.ui-batt.ui-batt-level-b .ui-batt-level { background: #003; } | |
.ui-batt.ui-batt-level-c .ui-batt-level { background: #007; } | |
.ui-batt.ui-batt-level-d .ui-batt-level { background: #00f; } | |
.ui-batt-level-a.ui-batt .ui-batt-text { color: #000; } | |
.ui-batt-level-b.ui-batt .ui-batt-text { color: #888; } | |
.ui-batt-level-c.ui-batt .ui-batt-text { color: #ccc; } | |
.ui-batt-level-d.ui-batt .ui-batt-text { color: #fff; } | |
.ui-batt *, .ui-batt | |
{ | |
-webkit-transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
-moz-transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
-o-transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
transition: border-color 1s ease-in-out, background-color 1s ease-in-out, color 1s ease-in-out; | |
} | |
body { background: #666; } | |
</style> | |
</head> | |
<body> | |
<div class="batt"></div> | |
<script> | |
(function ($){ | |
// expects number from 0 -- 100 | |
function get_batt_width(level) | |
{ | |
// 40 == .ui-batt-level max width | |
return 40 * (level / 100); | |
} | |
function update_level_classes (that,level) | |
{ | |
$(that).removeClass('ui-batt-level-a ui-batt-level-b ui-batt-level-c ui-batt-level-d'); | |
if (level < 20) $(that).addClass('ui-batt-level-a'); | |
else if (level < 45) $(that).addClass('ui-batt-level-b'); | |
else if (level < 70) $(that).addClass('ui-batt-level-c'); | |
else if (level <= 100) $(that).addClass('ui-batt-level-d'); | |
} | |
$.fn.battery = function (options_or_action, options) | |
{ | |
var defaults = {level: 100} | |
var method = ""; | |
if (typeof options_or_action == "string") { | |
var method = options_or_action; | |
// pass options through; | |
options_or_action = options; | |
} | |
var options = $.extend(defaults, options_or_action); | |
if (method == "") | |
{ | |
return this.each(function (){ | |
if ($(this).hasClass('ui-batt')) return; // ignore already loaded; | |
$(this).hide() | |
.addClass('ui-batt') | |
.html($("<div class='ui-batt-level'></div>").width(get_batt_width(options.level))) | |
.append("<div class='ui-batt-text'></div><div class='ui-batt-point'></div>") | |
.attr("data-level",options.level); | |
update_level_classes(this,options.level); | |
$(this).show(); | |
}); | |
}else if (method=="update") | |
{ | |
return this.each(function (){ | |
var l = $(this).attr('data-level'); | |
var w = get_batt_width(l); | |
$(this).find(".ui-batt-level").width(w); | |
$(this).find('.ui-batt-text').html(l + "%"); | |
}); | |
}else if (method == "set") | |
{ | |
// set the data-level value of batt and update the hud | |
return this.each(function (){ | |
if (options.level < 0) options.level = 0; | |
if (options.level >100) options.level = 100; | |
update_level_classes(this,options.level); | |
$(this).attr('data-level', options.level); | |
$(this).battery('update'); | |
}); | |
} | |
}; | |
})(jQuery); | |
</script> | |
<script> | |
$(function (){ | |
$('.batt').battery(); | |
}); | |
var tmp = 100; | |
setInterval(function (){$('.batt').battery('set',{level:tmp--})}, 100); | |
</script> | |
</body> | |
</html> There is a startup bug waiting for animations but its pretty much there.... Phil |