Как создать progressbar с помощью плагина для JQuery.
Всем привет. Сегодня я покажу небольшой плагин, позволяющий создать красивый ползунок прогресса, или progressbar.
Зайдите по ссылке: http://tinytools.codesells.com/ProgressBar и нажмите download, чтобы скачать нужные файлы. Теперь создайте html страничку, где все это подключите.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel=" stylesheet" type="text/css" href="tinytools.progressbar.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.j "></script>
<script src="tinytools.progressbar.min.js"></script>
</head>
<body>
<div id="progress"></div>
<script>
$(document).ready(function () {
$("#progress").progressBar({
width: 500,
height: 20,
percent: 17,
showPercent: true,
split: 1
});
});
</script>
</body>
</html>
У нас есть блок div с id=progress, который и является нашим прогресс баром. Дальше в теге script отбираем наш блок и вызываем у него метод progressBar, куда передаем объект с параметрами:
- width - ширина индикатора
- height - высота индикатора
- percent - сколько процентов
- showPercent - показывать проценты по середине или нет
- split - на сколько частей разбить индикатор
Как видите, все довольно просто, но красиво. А если вы не понимаете, как работают плагины или вообще библиотека JQuery, то советую курс JavaScript, JQuery и Ajax с Нуля до Гуру. Спасибо за внимание и увидимся в следующих статьях.
-
Создано 04.06.2014 20:15:49
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.