jQuery UI Bootstrap Theme

    На проектах использую Twitter Bootstrap и jQuery UI для прототипирования интерфейсов различных элементов страниц в т.ч. форм.

    На днях понадобилось дополнить форму одним полем. Был выбран наиболее подходящий формат, в виде набора переключателей (элемент input, тип radio).

    В Twitter Bootstrap, набор переключателей представлен в виде набора кнопок и не работает напрямую с элементом input, что предполагает написание дополнительного кода для обработки событий. Библиотека jQuery UI, имеет решение подобной задачи, и вся обработка событий уже реализована.

    Остановился на библиотеке jQuery UI. Осталось решить вопрос с внешним видом. Прототип прототипом, но не хотелось ломать стройный внешний вид, различный у Twitter Bootstrap и jQuery UI.

    На помощь пришел проект jQuery UI Bootstrap, суть которого в том, чтобы перенести визуальное исполнение виджетов Twitter Bootstrap на виджеты jQuery UI. По большей части, проект представляет из себя jQuery UI-совместимую тему.

    Материалы по теме:

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 14

      +7
      Посмотрел на jQuery UI Bootstrap. Не захотелось на него c Bootstrap переходить, потому что всё как-то неряшливо работает: accordion — подергиваются поссле переключения; при нажатии на кнопки — задержки в срабатывании; Wijmo Menu — форма поиска при убирании фокуса подергивается. Бррр… (((
        0
        Речь не идет об уходе с Twitter Bootstrap, скорее о совместном использовании с jQuery UI Bootstrap, для соблюдения единого визуального оформления.
          +7
          Accordion и в стандартной теме дергается. По мне так jQuery UI — сплошная неряшливость во всем (в дизайне, в функциональности). Нет никакого желания использовать их компоненты на серьезных проектах.
          Взять даже Autocomplete:
          jqueryui.com/demos/autocomplete/#remote-jsonp
          Input меняет внешний вид при поиске (появляется рамка), ненужные цветные рамочки при выборе результата с оступами, круглыми углами и бликом.
            0
            К сожалению, нет особой альтернативы jQuery UI в плане компонента DatePicker. Если вдруг найдёте компонент настолько же функциональный и отлаженный — поделитесь пожалуйста.
              0
              Есть пару альтернатив www.eyecon.ro/bootstrap-datepicker
                +1
                сорри, отправил не дописав.

                www.eyecon.ro/bootstrap-datepicker/
                dl.dropbox.com/u/143355/datepicker/datepicker.html

                в общем они тоже не фонтан, но на безрыбье…
                  +1
                  И чем www.eyecon.ro/bootstrap-datepicker — не фонтан?
                    0
                    Например — чтобы локализовать его — нужно лезть в код и изменять названия дней недели прямо там. Кроме того — по сравнению с jQuery UI'шным, всё-таки маловато настроек. Хотя, я согласен, для 95% случаев его вполне хватает.
                      0
                      У меня были проблемы с динамическим обновлением даты. К сожалению, всех ньюансов сейчас не вспомню, давновато было. Так же не понравилось, что нельзя задавать дату опционально, если оставить поле пустым, всегда вставляется 02-01-1970. Да и чтобы узнать, чем не фонтан, достаточно просто заглянуть внутрь js файла.

                      Есть продвинутая версия этого датапикера — github.com/eternicode/bootstrap-datepicker, но там тоже как-то не ахти, добавили немного фич, пофиксили некоторые баги. Зато размер файла вырос в два раза без видимых на то причин.

                      Девелоперы бутсрапа вроде обещали выпустить свой датапикер, но пока тишина.
            • UFO just landed and posted this here
              +3
              Зашел в тему — все ссылки фиолетовые. Кто-то идет по моему пути :)

              Очень часто в бутстрапе не хватает элементов из jQuery UI.
                0
                <button class="ui-button-success ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Success</span></button>

                Да охренеть сколько классов нужно написать что-бы создать обычную кнопку success
                Для сравнения код из оригинального bootstrap
                <button class="btn btn-success" href="#">Success</button>
                  0
                  Эти классы не нужно писать, они генерируется jQuery UI автоматически при инициализации кнопок

                Only users with full accounts can post comments. Log in, please.