Mobiscroll — кастомный select для мобильных сайтов и не только


    К каждому, кто сталкивался с разработкой сайтов под iOS/Android/etc (или native-приложений через phonegap и иже с ним), рано или поздно наверняка приходило осознание того факта, что стандартные управляющие элементы форм не очень удобны для работы с touch-экранов.

    И если input'ы и textarea вполне можно отрисовать с помощью css, то с селекторами ситуация гораздо более грустная — и не улучшить особо, и выбирать, например, дату, последовательным выбором трех выпадающих списков — занятие не из приятных.
    Помогает в решении этой проблемы мультиплатформенный (обещают как минимум работу на iOS/Android, но с некоторыми помарками работает и на MeeGo — это из проверенного собственноручно) select-заменитель Mobiscroll, с некоторым трудом нагугленный мной пару недель назад.


    Что умеет


    • Выводить варианты списка на «барабанах», в виде плюс-поле-минус, или же в смешанной форме
    • Делать это как внутри страницы, так и в попапе
    • Брать варианты как из пресетов (например, для даты-времени), так и из select-полей или просто из javascript-массива
    • Использовать одну из предустановленных тем (ios, Android, Android ICS, ...) или собственную
    • Кастомизировать все надписи плагина



    Когда может понадобиться



    • При разработке мобильного сайта — как минимум для выбора дат, а то и для всех селекторов
    • При разработке под phonegap — обязательно для обхода некорректного поведения селектора (нерешенных на момент 1.7.0)
    • Да и мышкой крутить барабаны гораздо приятнее, чем выбирать выпадающие списки


    Попробовать


    Достаточно исчерпывающее демо имеется на официальном сайте плагина.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 13

      +2
      Интересная штука.
      Один баг сразу поймал: если скроллить мышью (именно скроллом), то в селекторе Date вместе с нужным барабаном крутится ещё и соседний, причём каким-то странным образом.
        +1
        В самом первом демо? Это фича — в версии 2.0 добавили список запрещенных дат в виде
            invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
        

        Так что при скролле столбца с месяцем во втором столбце (где день) периодически выпадает невалидный день недели и скроллер сам его перещелкивает.
          +3
          Ах вот как, неочевидно. =)
            +1
            Меня больше всего поразило, честно говоря, что плагин отличает високосный год от невисокосного и соответственно убирает-добавляет лишний день в «барабане» февраля. Остальное уже не было таким шоком :)
        +2
        по моему лучше все таки на мобильных пользоваться стандартыми скролами ну и html5 конечно
          0
          Phonegap не делает селектор стандартным скроллом — только стандартным браузерным. А он под андроидом глюкавит.
          0
          В опере мини у меня не завелось. А значит для продакшена, для мобильных сайтов не подходит. Только если в приложения встраивать.
            0
            Колесо мыши крутится вниз, а эта штука крутится в противоположном направлении — крайне неочевидно.

            Список запрещённых дат — бескрайне неочевидно: вообще не догадался бы, кабы позже не зашёл в комментарии.
              0
              Интересная штука, правда у меня жутко тормозит: Sensation+Opera, в хроме по лучше.
                0
                а в чем смысл этих барабанов, кроме как в гламуре? По мне так обычный попап со списком гораздо удобнее
                  0
                  Нету смысла в использовании продукта, проще использовать стандартный скроллинг, во многих последних моделях он весьма неплох.
                    0
                    Спасибо) Интересная штука)
                      0
                      Приятно, что есть есть, но на Galaxy Note в Chrome тормозит. Поэтому в продакшене стоит использовать только в крайнем случае

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

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