Главная->Уроки по js->Как создать progressbar с помощью плагина для JQuery
Как создать 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 с Нуля до Гуру. Спасибо за внимание и увидимся в следующих статьях.
