jQuery Mobile - вопросы для интервью

Это структура пользовательского интерфейса, построенная на ядре jQuery и используемая для разработки адаптивных веб-сайтов или приложений, доступных на мобильных, планшетных и настольных устройствах.

  • Он создает веб-приложения таким образом, чтобы они работали одинаково на мобильных, планшетных и настольных устройствах.

  • Он совместим с другими фреймворками, такими как PhoneGap, Whitelight и т. Д.

  • Он предоставляет набор удобных для сенсорного ввода форм и виджетов пользовательского интерфейса.

  • Он обеспечивает функциональность для всех мобильных, планшетных и настольных платформ, а также обеспечивает эффективную загрузку страниц и более широкую поддержку устройств.

  • Он построен на jQuery Core и UI-фреймворке "меньше пиши, делай больше".

  • Это открытый исходный код, кроссплатформенный и кросс-браузерный.

  • Он написан на JavaScript и использует функции как jQuery, так и jQueryUI для создания мобильных сайтов для друзей.

  • Он объединяет HTML5, CCS3, jQuery и jQueryUI в одну структуру для создания страниц с минимальным написанием сценариев.

  • Он включает в себя систему навигации Ajax, которая использует анимированные переходы между страницами.

  • Легко изучать и разрабатывать приложения, если вы знакомы с функциями HTML5, CSS3.

  • Он кросс-платформенный и кросс-браузерный, поэтому вам не нужно беспокоиться о написании разного кода для каждого разрешения устройства.

  • Он использует HTML5 вместе с JavaScript для легкой разработки веб-приложений.

  • Он построен таким образом, что позволяет автоматически масштабировать один и тот же код с экрана мобильного устройства на экран рабочего стола.

  • Существуют ограниченные возможности для тем CSS, поэтому сайты, созданные с помощью этих тем, могут выглядеть одинаково.

  • Приложения, разработанные с использованием jQuery Mobile, на мобильных устройствах работают медленнее.

  • Когда вы комбинируете jQuery Mobile с другими мобильными платформами, это отнимает больше времени.

  • Сложно предоставить полностью индивидуализированный визуальный дизайн.

  • Custom Download : Чтобы загрузить настроенную версию библиотеки.

  • Latest Stable: Чтобы получить стабильную и последнюю версию библиотеки jQuery Mobile.

Вы можете использовать следующие файлы CDN -

  • <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

  • <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script>

  • <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>

<div data-role = "page" id = "pageone">
    <div data-role = "header">
      <h1>Header</h1>
    </div>

    <div data-role = "main" class = "ui-content">
      //content goes here
    </div>

    <div data-role = "footer">
      <h1>Footer</h1>
    </div>
</div>

Он создает заголовок вверху страницы.

Он используется для определения содержимого страницы.

Он создает нижний колонтитул внизу страницы.

Он включает отступы и поля внутри содержимого страницы.

В один мобильный документ jQuery можно включить несколько страниц, которые загружаются вместе путем добавления нескольких блоков div с атрибутом data-role = "page".

Используйте атрибут data-dialog = "true" на любой странице для отображения диалогового окна.

Атрибут data-transition используется для применения различных переходов в диалоговом окне, таких как скольжение вниз, отражение и т. Д.

Кнопка может быть закрыта с помощью атрибута data-close-btn.

Атрибут data-rel = "back" используется для перехода к предыдущему диалоговому окну.

Тема может быть включена в диалог, добавив атрибут data-theme к любым контейнерам, таким как верхний колонтитул, нижний колонтитул или контент.

ui-уголок-все

Вы можете установить значок в кнопке, используя класс ui-icon и класс ui-btn-icon-pos_name для указания положения значка.

Вы можете добавить тень значка на кнопку с помощью класса ui-shadow-icon.

Вы можете удалить серый кружок вокруг значка с помощью класса ui-nodisc-icon.

Используйте класс ui-grid-solo в теге div, чтобы создать сетку из одного столбца.

Добавьте класс ui-grid-a в тег div и включите два дочерних контейнера с классами ui-block-a и ui-block-b, чтобы создать макет из двух столбцов.

Используйте класс ui-grid-b в теге div, чтобы создать сетку из трех столбцов.

Используйте класс ui-grid-c в теге div, чтобы создать сетку из четырех столбцов.

Используйте класс ui-grid-d в теге div, чтобы создать сетку из пяти столбцов.

Создайте простую базовую кнопку на странице с помощью класса ui-btn.

Создайте группу кнопок по вертикали и горизонтали на странице с помощью атрибута data-role = "controlgroup".

Вы можете создать кнопку меньшего размера на странице с помощью класса ui-mini и отображать положение значков на кнопке с помощью класса ui-btn-icon-ico_pos.

Используйте атрибут data-role = "date" в поле ввода для отображения в формате дд / мм / гг.

Сворачиваемый объект можно создать с помощью атрибута data-role = "collapsible" контейнера.

Вы можете отобразить контрольную группу с помощью атрибута data-role = "controlgroup".

Используя атрибут data-filter = "true", вы можете фильтровать дочерние элементы любого элемента.

Flip Switch позволяет вам выключить / включить или включить / выключить переключатель, щелкнув по нему для ввода логического стиля.

Listview используется для отображения списка элементов. Атрибут data-role = "listview" включен в контейнер для отображения списка в вертикальном прокручиваемом списке.

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

Событие будет реагировать на взаимодействие с пользователем, когда пользователь нажимает на определенную страницу или наводит курсор мыши на элемент и т. Д.

Он срабатывает, когда пользователь нажимает на элемент, используя идентификатор страницы для указания события, а метод on () присоединяет обработчики событий.

Он срабатывает, когда пользователь горизонтально перетаскивает элемент более чем на 30 пикселей, используя идентификатор страницы для указания события, а метод on () присоединяет обработчики событий.

Событие начала прокрутки запускается, когда пользователь начинает прокрутку страницы, а событие остановки прокрутки возникает, когда пользователь прекращает прокрутку страницы, используя идентификатор страницы для указания события, а метод on () присоединяет обработчики событий.

Вы можете инициировать событие ориентации, когда пользователь поворачивает устройство по вертикали или горизонтали, используя событие изменения ориентации . Он использует свойство window.orientation, чтобы указать, установлена ​​ли вертикальная или горизонтальная ориентация окна или устройства.

Вы можете отобразить значение ползунка в виде всплывающей подсказки, используя атрибут data-popup-enabled = "true".

Переключатель столбца помещает столбцы в укрытие и позволяет пользователю выбирать столбцы по своему выбору с помощью атрибута data-mode = "columntoggle".

Он представляет данные в горизонтальном формате путем свертывания таблицы в составное представление с использованием атрибута data-mode = "reflow".

Вы можете отображать наборы данных в формате полос и штрихов, используя классы table-stripe и table-stroke.

Вы можете повысить качество и функциональность ввода текста, установив атрибут data-Enhanced = "true" в поле ввода.

Вы можете изменить цвет значка на черный с помощью класса ui-alt-icon. По умолчанию все значки белые.

Он был разработан командой проекта jQuery в 2010 году и написан на JavaScript.

Он указывает, должны ли страницы загружаться через ajax или нет.