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

    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 то есть?
        • +1
          Спасибо, дома вечерком поиграюсь
          • +1
            Сколько по времени заняло написание?
            • 0
              Написание самой первой версии — примерно три дня, плюс две недели ловил баги и отлаживал, плюс еще где-то две недели иногда попадались баги по мелочи. Этот — примерно за неделю со всем сделал.
            • 0
              > не умеет
              > Работать в IE ниже 8

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

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

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

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