Bu dersimizde meter tagını işleyecez.Bu can barı gibi ilerleme çubuğu.Daha önce jquery ui nin pluginin de buna benzer anlatmıştım onu kullanmak için dosya çağırıyoduk sayfamıza ama html5 kolaylık getirip hiç bir şey yapmadan tek tagla koya biliyoruz.
Kodlara geçelim.
<meter min="0" max="100" value="66" ></meter>
kullanımı bu şekil de.Paremetreler alıyo onları inceleyelim.
min = minimum değeri
max = maxsimum değeri
value = o an atamış olan değer
low = alt sınır
high = üst sınır
low ve high te renk değişir.
video :
Genel örnek :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function art(){
var deger=$("meter").val()+5;
$("meter").val(deger);
setTimeout("art()",250);
}
art();
</script>
<style type="text/css">
meter{width:400px; height:30px;}
</style>
</head>
<body>
<meter min="0" max="100" value="0" low="25" high="75"></meter>
</body>
</html>
indir : http://ustaderslik.com/dosya/HTML-5-Ders-3(meter).rar
Örneği jquery ile dinamik hala getirdim.
UstaDerslik
