Случайный альбом
Flash Point 2011
Некультурный отдых - Flash Point 2011
Изображений: 77
Косово поле-2011
Некультурный отдых - Косово поле-2011
Изображений: 214
Меточки:
Нацарапано:  28.10.2009
Категория: Работа
Метки новости:
Скрипт для фреймворка Jquery - аналог статус-бара (status-bar), который можно легко прикрутить к своему сайту.

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

Демонстрация работы скрипта

Файлик скрипта

По материалам сайта www.kamaikinproject.ru

Ниже описалово:


Описание плагина jquery.StatusbarПодключениеПлагин для библиотеки Jquery представляет собой строку аналог "статус бара", которую можно легко разместить на любом сайте.Для этого необходимо выполнить следующие действия. Скачать архив с плагином и загрузить содержимое архива на сайт, затем подключить плагин (файл jquery.statusbar.js) на страницу, на которой вы планируете использовать статусбар.##САНИРОВАННЫЙ## src='/cms/js/jquery.statusbar.js' type='text/javascript'>##САНИРОВАННЫЙ##>Следующим шагом необходимо создать необходимые для работы плагина стили. Пример стилей использованных на этом сайте находится в архиве с примером.
Квак!
    .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;
    }


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


Квак!
<div id="statusbar"></div>


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

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


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

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

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

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

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

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

Квак!
  $("#statusbar").statusbar("open");


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

Квак!
  $("#statusbar").statusbar("open", 1000);


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

Квак!
  $("#statusbar").statusbar("close");


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

Квак!
  $("#statusbar").statusbar("close", 1000);


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

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


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

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

Квак!
  $("#statusbar").statusbar("reset");


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


Звиздец рекомендует поделиться ссылкой с камрадами и откомментить эту заметку:
для печатиПечатай!  
 
ZviZdeZ.ru
Придет серенький Фенрир и укусит нас за мир

2009-2011©