История одного интерфейса

    screenshot

    Жил да был один проект. И был у него интерфейс для выбора неких сущностей, живущих в древовидной структуре.

    Изначально он выглядел как обычные выпадающие менюшки со скроллингом. Однако через некоторое время сущностей стало много и работа с ними преобрела характер пытки. Пользователи попросили сделать хотя бы саджест.

    Просто саджест делать было скучно, поэтому я сделал вот такую штуковину, которая немного напоминает по внешнему виду маковский Файндер в мультиколоночном режиме. Отсюда и название — b-finder.

    Изначально, «Файндер» был заточен только под один проект. Но народу эта штука понравилась и меня неоднократно спрашивали, можно ли его использовать где-нибудь еще. Посему я решил «отвязать» его от проекта и сделать jQuery-плагином для пущей совместимости.

    Что умеет:

    — Выводить древовидные структуры произвольной вложенности;
    — Бродить по структуре с помощью стрелок на клавиатуре;
    — Выбирать с помощью клавиши Enter;
    — Искать по слову и отображать выделенные сущности (зеленая кнопочка);
    — Принимать пользовательские параметры и коллбэки;
    — Работать асинхронно.

    Чего не умеет:

    — Работать в IE ниже 8;
    — Варить кофе.

    Требования:

    — Включенный JavaScript;
    — jQuery 1.6+.

    Ссылки:

    исходники и документация;
    b-finder в действии.

    Похожие контролы:

    DeviantArt (выбор категории при добавлении работы);
    Из рук в ноги (выбор региона).

    На новизну идеи и исполнения по понятным причинам не претендую. Буду рад, если кому-нибудь пригодится.
    Поделиться публикацией
    Комментарии 20
      +1
      Пригодится мне, спасибо. В каком формате кушает данные?
      +2
      Такой контрол часто используется на deviantart.com.
        0
        Ага, при добавлении работы с помощью такой штуки выбираются категории.
          +1
          Еще в мобильной версии для навигации нечто подобное.
            0
            Там скорее уже нечто, похожее на интерфейсы iOS. Кстати, из этого Файндера с помощью небольшой допилки CSS можно сделать мобильный. Всего-то ширину подровнять, да включить одноколоночное отображение.
        +1
        Без поллитры в нем не разберешься. Почему он результаты поиска выводит слева (причем в развернутом виде), и в результатах раскрыть уже ничего нельзя?
          0
          Чтобы можно было выбирать сущности прямо из результатов поиска. Это, кстати, не развернутый вид. Он при поиске показывает своего родителя (чтобы визуально отличать одноименные вложенные сущности).
            0
            > Он при поиске показывает своего родителя

            Это дезориентирует. Нужно чтобы был виден весь путь.
              0
              Кстати да, если в первом столбце допустим 50 пунктов, а мы находим что-то из третьего, мы видим второй+третий, однако где это в списке находится понять нереально
          +1
          Может есть смысл разворачивать всё, что показывается по умолчанию? Содержимое Furry то есть?
            0
            Поправил, спасибо.
            +1
            Спасибо, дома вечерком поиграюсь
              +1
              Сколько по времени заняло написание?
                0
                Написание самой первой версии — примерно три дня, плюс две недели ловил баги и отлаживал, плюс еще где-то две недели иногда попадались баги по мелочи. Этот — примерно за неделю со всем сделал.
                0
                > не умеет
                > Работать в IE ниже 8

                Тогда я не понимаю, зачем вам jQuery. Он состоит на 80% из костылей для старых браузеров, а блоьшая часть его функционала в современных браузерах встроена: от querySelector() до classList и CSS transition.
                  0
                  Например, нормализованный объект event в обработчиках событий, или .inArray() заместо неработающего в восьмом ИЕ .indexOf(), или удобная работа с пузырьками.

                  На самом деле, за исключением возможных внешних косяков, Файндер, скорее всего, в ИЕ ниже восьмерки работать будет. Он даже сверстан с расчетом на эти браузеры. Я просто не проверял.
                  0
                  Видел подобный интерфейс на сайте «из рук в ноги» irr.ru, при добавлении объявления.
                    0
                    Добавил, спасибо.
                    +1
                    приятненько так

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое