Вторник, 29 Мая 2012 14:44

Индикатор уровня на HTML/CSS

Written by 
Оцени эту запись
(1 Голос)

Учимся делать простой индикотор уровня при помощи HTML и CSS. 

 

 

Выглядеть наш индикатор будет так:

 

 

У каждого из индикаторов на картинке пишем примерно такой html-код:

 

 

<div class="dwld_album_photo_proc ind">
<div class="dwld_album_photo_proc_info"><span class="dwld_album_photo_proc_info_left">Общительность</span> <span class="dwld_album_photo_proc_info_right">38</span><div class="clear"></div></div>
<div class="dwld_album_photo_proc_ind">
<div class="dwld_album_photo_proc_ind_l" style="width: 38%"><div class="dwld_album_photo_proc_ind_inner"></div></div>
<div class="dwld_album_photo_proc_ind_r" style="width: 62%"><div class="dwld_album_photo_proc_ind_inner"></div></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
 
 
Здесь блок dwld_album_photo_proc является контейнером для всего блока индкатора. 
В блоке dwld_album_photo_proc_info располагается название и значение индикатора.
Блок dwld_album_photo_proc_ind - контейнер непосредственно индикатора. Ему задаем ширину, высоту. Внутри него задаем блоки dwld_album_photo_proc_ind_l и dwld_album_photo_proc_ind_r - левая и правая части индикатора. Левая часть указывает на заполненную часть, правая - на пустую. Как видно, левой и правой части ширина задается инлайновыми стилями. Это связано с тем, что значения индикатора могут меняться, причем динамически. Используя простой яваскрипт, вы сможете задавать ширину каждой части динамически. Также у левого и правого блока должно быть свойство overflow: hidden.
Блок dwld_album_photo_proc_ind_inner задает заливку одной из частей. У него ширина 100%, заданы высота. В зависимоти от того, в котором из блоков лежит эта внутренняя часть, у нее меняется внешний вид. В нашем случае это выражается в темноте серого.
 
Идея создания этого индикатора в том, что у нас внутри основного контейнера есть два блока - левый и правый. Левый стоит слева благодаря float:left, правый аналогично находится справа. Им задана ширина. Ширина может быть указана статически (в HTML) или подтягиваться динамически с помощью программирования или javascript. И этим блокам задано свойство hidden, которое скрывает все, что вылазит за указанную ширину. Внутри них блоки шириной во весь блок индикатора, но все лишнее скрывается из-за стилей родительского. 
 
Смотрим CSS:
 
.dwld_album_photo_proc_ind {border: 1px solid #ebebeb; padding: 1px; width: 100px; height: 5px; margin-top: 5px;}
.dwld_album_photo_proc_ind_l, .dwld_album_photo_proc_ind_r {overflow: hidden;}
.dwld_album_photo_proc_ind_l {float:left;}
.dwld_album_photo_proc_ind_r {float:right;}
.dwld_album_photo_proc_ind_inner {width: 100px; height: 5px;}
.dwld_album_photo_proc_ind_l .dwld_album_photo_proc_ind_inner {background: #999999;}
.dwld_album_photo_proc_ind_r .dwld_album_photo_proc_ind_inner {background: #ebebeb;}
.dwld_album_photo_proc_info, .dwld_album_photo_proc_ind {float: right; margin-right: 10px;}
 
 
Смотрим, что получилось:
 
 
Общительность 38
 
 
 
 
 
 
Видим, что индикатор уровня указывает на наши 38%.
Давайте теперь попробуем вывести значение уровня динамически:
 
Введите число от 0 до 100
 
  
 
 

Общительность 38

 
 
 
 
 
 
 
 
 
 
jQuery(document).ready(function(){
jQuery('form[name="val_for_ind"] input[type="button"]').click(function(){
var val_ind=0;
var val_ind=jQuery('form[name="val_for_ind"] input[type="text"]').attr('value');
jQuery('#my_id .dwld_album_photo_proc_ind_l').css('width', val_ind+'%');
jQuery('#my_id .dwld_album_photo_proc_ind_r').css('width', (100-val_ind)+'%');
jQuery('#my_id .dwld_album_photo_proc_info_right').text(val_ind+'%');
 
});
 
});
 
 
Я добавила форму с текстовым полем и кнопкой. Вводите в поле число от 0 до 100 (я не делала проверок. если введете что-то другое, ниче не выйдет). Я забираю это число при клике на кнопку "Ок"
 
 
jQuery('form[name="val_for_ind"] input[type="button"]').click(function(){}); - работа с кликом
 
var val_ind=jQuery('form[name="val_for_ind"] input[type="text"]').attr('value'); - получение числа
 
 
и передаю это значение в ширину левой части индикатора
 
 
jQuery('#my_id .dwld_album_photo_proc_ind_l').css('width', val_ind+'%');
 
 
Соответсвенно, у правой части ширина равна 100-val_ind.
 
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов