Шкала на JQuery

Всегда есть возможность применить свои знания, главное была бы подходящая тема, и материал шкала на JQuery, далеко не исключение. Хочу обратить Ваше внимание в сторону анимации данного скрипта и его предназначения. Суть очень проста, график шкалы должен увеличиваться, в зависимости от выбранных пунктов. Данный скрипт, может полноценно представить свои возможности в зависимости от выбора языка веб программирования. Давным давно я уже создавал нечто подобное, но то было намного проще, так как с оригинального сайта был взят скрипт прогресс бара на JQuery.

 

Честно говоря, ребят, мне нравится писать подобные тематики про анимацию, и в будущем буду делать больше обзоров и их применение в различных тематиках.

Сразу хочу отметить, что данный скрипт, идеально прошел кроссбразерность, так что можете смело встраивать его к себе на сайт.

 

 

В общем, все как обычно по стандарту. Подключаем стиль CSS и библиотеку JS, плюс у нас еще будет один скрипт, который будет отвечать как раз за шкалу анимаций. Скрипт scale.js, будет звеном, который работает в данном примере.

 

<link type="text/css" rel="stylesheet" href="css/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/scale.js"></script>

 

Давайте, сразу смотреть дальше. А за всем этим у нас имеется HTML код, который выводит шкалу на JQuery, а также пункты, которые можно выбрать. В нашем стандартном контейнере мы создаем следующее:

 

<div class="scale">
	<div class="scaleTop"></div>
</div>

 

Где класс scale, будет играть роль самого графика, а scaleTop выводить нужную нам позицию при выборе. Ребят, опять же, все очень просто, - создали каркас шкалы, внутри которой отмечаем каждый пункт при выборе.

 

Далее, мы просто выводим список пунктов через input checkbox, и при выборе каждого, задаем анимацию, через скрипт scale.js. 

 

<div class="chek">
	<label><input type="checkbox" name=""> PHP</label>
	<label><input type="checkbox" name=""> JavaScript</label>
	<label><input type="checkbox" name=""> ASP.net</label>
	<label><input type="checkbox" name=""> Python</label>
	<label><input type="checkbox" name=""> XML</label>
</div>

 

Для статистики, не плохо было бы, вывести сколько было выбрано пунктов пользователем. Для этого мы просто поставим класс number, в который получаем количество и выдаем результат.

 

<span class="num-text">Выбрано <span class="number"></span> из 5</span>

 

 

Подошли к той части, ради которой работает сам скрипт. Сразу хочу отметить, что анимация строится по всей высоте шкалы и делится за счет этого на промежутки, - проценты. Поэтому сам скрипт, при каждом нажатии на checkbox работает в процентах, в зависимости от суммы всей высоты.

Сразу установим переменную rate равную 100, чтобы была заполнена по всей высоте шкалы.

 

Далее создаем переменную scale, в которую записываем весь функциональный механизм. Создаем переменную numberCol, в которую записываем все пункты, выбранных checkbox. Причем их нужно, от количества выбранных пунктов, делить на сумму, чтобы получить проценты.

 

Создавая функцию animate, мы задаем ей также скорость равную 500. Как уже выше было сказано, классу number присваиваем  значение, которое будет выводить количество выбранных пунктов. Далее просто запускаем свою функцию и радуемся результату)

 

$(document).ready(function(){
var lenghtCheck = $('.chek input[type=checkbox]').length, 
	rate = 100;
	var scale = function(){
		var numberCol = $( "input:checked" ).length,
		summ = (rate/lenghtCheck)*numberCol + '%';
		$('.scaleTop').animate({height:summ},500);
		$('.number').text(numberCol);
	}	
	$(".chek input[type=checkbox]").on("click",scale);	
	scale();
});

 

 

 

Пожалуй самая незначительная часть скрипта, со своими стилями и свойствами. 

 

.scale{
		width:25px;
		height: 230px;
		border:1px solid #ccc;
		position: relative;
		float:left;
}
.scaleTop{
		background: #FF2F00;
		width: 100%;
		height: 0;
		position: absolute;
		bottom: 0;
}
.content-left{
	padding-left:10px;
	text-align:center;
}
.content-left span {
	font-weight:bold;
}
.chek{
	text-align:left;
	margin:35px 0 0 35px;
}
.chek label{
	display:block;
}

.color{
	color:#FF2F00;
	display:inline-block;
	margin-top:10px;
}
.num-text{
	display:block;
	margin-top:5px;
}

 

Знаете, давным давно я писал подобный урок, правда он сделан был иначе, назывался прогресс бар JQuery, может Вам тоже пригодится. Большое спасибо за внимание, удачи!)