Описание плагина jquery.Statusbar

Подключение

Плагин для библиотеки Jquery представляет собой строку аналог "статус бара", которую можно легко разместить на любом сайте.

Для этого необходимо выполнить следующие действия. Скачать архив с плагином и загрузить содержимое архива на сайт, затем подключить плагин (файл jquery.statusbar.js) на страницу, на которой вы планируете использовать статусбар.

1

<script src='/cms/js/jquery.statusbar.js' type='text/javascript'></script>

Следующим шагом необходимо создать необходимые для работы плагина стили. Пример стилей использованных на этом сайте находится в архиве с примером.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    .kva_statusbar{
      position: fixed;
      bottom: 5px;
      left: 0px;
      right: 0px;
      height: 20px;
      padding: 5px;
      background: black;
      color: white;
      border: solid 1px lightgray;
      opacity: .70;
      filter: alpha(opacity="70");
      z-index: 200;
      overflow: hidden;
      overflow-y: auto;
    }
    .kva_statusbar .normal{
      font-weight: none;
      color: #DDD;
    }
    .kva_statusbar .warning{
      font-weight: bold;
      color: #FFF;
    }
    .kva_statusbar .alert{
      font-weight: bold;
      background-color: khaki;
      color: #F00;
    }

Далее создаем див который в последующем станет нашим статусбаром.

1

<div id="statusbar"></div>

И активируем плагин:

1
2
3
4
5

  <script type="text/javascript">
    $(document).ready(function(){
      $("#statusbar").statusbar();
    });
  </script>

Если мы все сделали правильно, то в низу страницы, должна появится темная полоса, это и есть наш статус бар.

Результат вы можете посмотреть на странице примера.

Настройки.

Плагин принимает единственный параметр при инициализации:

autoOpen - Показывать статус бар на сайте сразу после вызова statusbar() (true|false по умолчанию true)

Остальные действия со статусбаром производятся с помощью передачи праметров.

Показать статусбар:

1

  $("#statusbar").statusbar("open");

Вторым параметром может быть передана скорость с которой статусбар будет открыт в милисикундах, или стандартной строкой.

1

  $("#statusbar").statusbar("open", 1000);

Скрыть статусбар:

1

  $("#statusbar").statusbar("close");

Вторым параметром может быть передана скорость с которой статусбар будет скрыт в милисикундах, или стандартной строкой.

1

  $("#statusbar").statusbar("close", 1000);

Записать в статус бар строку:

1

  $("#statusbar").statusbar("add", "Это проверка");

Третьим параметром может быть передан стиль отображения, в плагине предусмотрено три возможных стиля normal, warning и alert. По умолчанию будет установлен стиль normal. При использовании стиля alert вся остальная информация уже записанная в статусбар будет стерта. другие стили отображения добавят в статусбар новую строку.

И на последок метод "reset" как следует из названия он очищает статусбар стирая всю информацию в него записанную:

1

  $("#statusbar").statusbar("reset");

На этом можно закончить описание плагина.