А совсем недавно мне снова потребовался скроллер, но горизонтальный и управляемый пользователем (в отличии от предыдущего вертикального и автоскролируемого). Изобретать велосипед снова мне было лениво и я решил проверить, есть ли плагины для jQuery с нужным мне функционалом. Перепробовал я массу разных плагинов (упоминать о них смысла нет) пока не набрел на настоящую жемчужину! Идеальный для моей задачи плагин — Scrollable (страница в каталоге и домашняя страница).

Плагин совершенно замечательный — масса возможностей, прост в использовании, понятные примеры, приятный код.

Фичи:

• горизонтальный и вертикальный скролинг
• скролинг при помощи навигационных кнопок, вызовов API, курсорных клавиш на клавиатуре и колесом прокрутки на мыше
• настраиваемое количество элементов скролируемых за раз
• настраивание навигационных кнопок без единой строчки JavaScript
• постраничное скролирование
• действия, вызываемые программно: next, prev, nextPage, prevPage, seekTo, begin, end ...
• динамическое добавление и удаление элементов
• автоматически скролинг
• возможность настроить поведение скролинга с помощью листенеров onBeforeSeek и onSeek
• размер минимизированного файла около 6.0K

Применил я этот плагин для организации вывода постраничной навигации. На мой взгляд получилось достаточно удобно — легко можно добраться до любой страницы. Правда у этого способа тоже есть недостаток — если страниц уж очень много, то это становится неудобно для пользователя и тяжеловато для браузера. Мы решили ограничиться 100 страницами, а остальные просо отбрасываем.

Была у мне с этим плагином одна непонятка: не срабатывали вызовы API. Моя логика (основываясь на курении доки) подсказывала такой способ вызова:

var api = $("div.scrollable").scrollable();
api.click(10); // для перехода к десятому элементу

Но этот код работать не захотел. Пришлось извратиться так:

$("div.scrollable").scrollable();
$("div.scrollable").scrollable().click(10);

Если кто-нибудь подскажет более красивое решение или объяснит где я неправ в своих хотелках — буду очень признателен.

Еще статьи об этом плагине:

• Скроллер содержимого на jQuery
• Навигация с использованием jQuery

Похожие записи

• Пример создания SlideUp скроллера с помощью jQuery (8)
• Создание повторно используемых плагинов ресурсов Zend_Application (0)
• Как сделать ajax-запрос на другой домен? (13)
• Внешние зависимости (1)
• Включение условных запросов в приложениях на Zend Framework (0)

Погуглив и проведя ряд экспериментов у меня получилось вот что.

Итак, для отправки запросов я воспользуюсь библиотекой jQuery. С версии 1.2 эта библиотека поддерживает JSONP нативно. Вот, собственно сам код для выполнения запроса:

$.getJSON("http://server.ru/logger.php?callback=?", function(data){
    // тут обрабатываем полученные данные
});

Обратите внимание на параметр «callback=?» в адресе, на который отправляется запрос. Вместо вопроса jquery подставит название callback-функции. Эта callback-функция будет вызвана при получении ответа от сервера. Учтем это в серверной части.

<?php
    echo $_GET['callback']."({param1:'value',param2:0});";
?>

Т.е. выход скрипта должен генерировать не просто JSON, а вызов callback-функции и передачей ей параметров, которые нужно передать от сервера клиенту.

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

Похожие записи

• Пример создания SlideUp скроллера с помощью jQuery (8)
• Снова про скроллер и jQuery (0)
• Впечатления от первого дня РИТ-2008 (3)

Мне последнее время приходится достаточно плотно заниматься разработкой на отличном javascript-фреймворке ExtJS и, в частности, много работать с таблицами. Чтобы визуально приукрасить и сделать таблицы более юзабельными я сделал для них т.н. «зебру», т.е. чересстрочную раскраску. Далее я расскажу как это сделать.

Я не буду приводить полный код таблицы, только тот кусок, который отвечает за «зебру»:

Example.grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent:function() {
        Ext.apply(this, {
            store:....,
            columns:...,
            viewConfig: {forceFit: true}
        });
        Example.grid.superclass.initComponent.apply(this, arguments);
    },
    onRender:function() {
        Example.grid.superclass.onRender.apply(this, arguments);
        this.getView().getRowClass = function(record,index) {
            return (index%2)?'odd':'even';
        }
    }
});

За создание «зебры», собственно, отвечает код, расположенный в обработчике события «onRender». Этот код определяет функцию «getRowClass» объекта GridView нашей таблицы. Определяемая функция должна возвращать название css-класса, которое будет присвоено текущей строке. Эта функция будет вызвана для каждой строки, а на вход ей будет переданы текущая запись и номер строки. Для зебры достаточно знать номер строки и в зависимости от четности этого номера вернуть то или иное название класса. Не забудьте определить эти классы в своем файле стилей, иначе никаких визуальных изменений не увидите.

Похожие записи

• Нет похожих записей

Сразу понятно, что задачу без яваскрипта не решить. Ну а так как анимацию делать самостоятельно мне было лень, я решил воспользоваться своим любимым фреймворком — jQuery.

Начнем с заготовки html-страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ru">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>SlideUp Scroller example</title>
    <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Добавим список:

...
<body>
<div class="scroller">
  <ul id="frame">
    <li></li>
    <li>Test block #1</li>
    <li>Test block #2</li>
    <li>Test block #3</li>
    <li>Test block #4</li>
    <li>Test block #5</li>
    <li>Test block #6</li>
    <li>Test block #7</li>
    <li>Test block #8</li>
    <li>Test block #9</li>
  </ul>
</div>
</body>
...

В стиле зададим высоту видимой части списка и высоту каждого элемента:

.scroller {
    height: 150px;
    overflow: hidden;
  }
  #frame {
    margin-top: -30px;
  }
  li {
    height: 30px;
    line-height: 30px;
  }

У контейнера (DIV с классом «scroller») я задал высоту 150 пикселей и установил свойство overflow в hidden для того, чтобы скрыть лишние элементы списка. А у самого списка я сделал отрицательный отступ сверху равный высоте одного элемента (кстати, в самом списке первым присутствует пустой элемент — ниже я объясню зачем). Высота строки для элемента задана просто для красоты.

А теперь перейдем к самому яваскрипту:

    var topElementId = '0', t;

    $(document).ready(function(){
      var el =$('#frame').children();
      // проверяем количество элементов в списке: если элементов больше
      // чем вмещается в видимую область, то начинаем скролирование
      if (el.size() > 6) {
        // присваиваем каждому элементу списка свой ID
        el.each(function(i){
          $(this).attr('id','row'+i);
        });
        // запускаем таймер. число задает количество милисекунд между
        // загрузкой страницы и началом скролирования
        t = setTimeout('listSlideUp()', 3000);
      }
    });
    function listSlideUp() {
      // для самого верхнего элемента списка (не видимого на странице)
      // вызываем функцию плавного уменьшения высоты
      $('#row'+topElementId).slideUp(2000, function(){
        // тут определяем кол-бэк функцию, выполняющуюся после завершения
        // работы slideup
        
        // если текущий элемент не вспомогательный,
        // то переносим его в конец списка
        if (topElementId > 0) {
          // создаем копию верхнего элемента
          var topElement = jQuery('#row'+topElementId).clone().show();
          // убираем верхний элемент из списка
          $('#row'+topElementId).remove();
          // добавляем скопированный элемент в конец списка
          $('#frame').append(topElement);
        }
        topElementId++;
        // если номер верхнего элемента больше количества элементов,
        // то сбрасываем его в 1
        if (topElementId >= jQuery('#frame').children().size()) {
          topElementId = 1;
        }
      });
      // опять запускаем таймер
      t = setTimeout('listSlideUp()', 4000);
    }

Алгоритм работы скрипта очень прост. Через равные промежутки времени вызывается функция, которая плавно уменьшает высоту верхнего (невидимого) элемента до 0. После чего этот элемент переносится в конец списка и цикл повторяется снова.

У скрипта есть два недостатка: использование глобального пространства имен и необходимость фиксировать высоту элементов. Может у кого-нибудь возникнут идеи по устранению этих недостатков? Тогда велком в комментарии...

Для желающих посмотреть результат работы скрипта, я выложил архив со всем необходимым — код скрипта SlideUp-scroller (16кб)

Upd: У всем любимого (в плохом смысле слова...) ослика обнаружилась неприятная особенность — дерганье при слайдАп-эффекте на теге LI. Пришлось переделать на использование DIV-ов. Новый архив забираем тут: SlideUp-scroller (IE-bugfix)

PS: Прошу в комментариях отписаться о работе скрипта в различных браузерах.

Похожие записи

• Снова про скроллер и jQuery (0)
• Как сделать ajax-запрос на другой домен? (13)
• Пользовательские ресурсы для Zend_Application (0)
• Впечатления от первого дня РИТ-2008 (3)
• Внешние зависимости (1)

Мне прислали ссылку на довольно простой способ запуска некоторого действия не по клику на объекте, а набором на клавиатуре некоторых «команд». Вот, собственно, сама заметка «Горячие слова»

«Трактористы» могут придумать массу примеров, где этот скрипт можно использовать. Например, «скрытые» функции на сайте, запускаемые вводом «секретных команд», или «быстрый» переход по объектам административного интерфейса.

Предлагаю в комментариях высказать свое мнение о таком функционале и предложения по использованию.

Похожие записи

• Хитрости ZF1.8 (1)
• Советы по фиксациям в SVN (0)
• Пользовательские ресурсы для Zend_Application (0)