Интеграция в приложение Framework7

Dom7 — это лёгкая и быстрая библиотека для работы с DOM, созданная специально для Framework7. Она предоставляет удобный синтаксис, аналогичный jQuery, но с меньшим весом и оптимизацией под мобильные приложения. Встроена в Framework7 по умолчанию, что позволяет использовать её методы без дополнительного подключения.

Для получения ссылки на объект Dom7 используется функция $:

var $$ = Dom7;

Переменная $$ является общепринятой в Framework7 и позволяет манипулировать элементами страницы.

Выбор элементов и работа с ними

Выбор по селекторам реализуется аналогично jQuery:

$$('.button')        // все элементы с классом button
$$('#app')           // элемент с id app
$$('div[data-role]') // все div с атрибутом data-role

Особенности:

  • Возвращается объект Dom7, который поддерживает методы цепочки.
  • Даже при выборе одного элемента результат — коллекция.

Примеры манипуляций:

$$('.button').addClass('active');
$$('.button').removeClass('disabled');
$$('.list-item').css('color', 'red');

Метод .css() позволяет задать один или несколько CSS-свойств сразу:

$$('.list-item').css({
  'background-color': 'yellow',
  'font-weight': 'bold'
});

Работа с событиями

Dom7 предоставляет удобный API для обработки событий:

$$('.button').on('click', function (e) {
  console.log('Кнопка нажата', e.target);
});

Методы событий:

  • .on(eventName, handler) — добавление обработчика
  • .off(eventName, handler) — удаление обработчика
  • .once(eventName, handler) — однократный вызов обработчика

Можно использовать делегирование событий:

$$('body').on('click', '.dynamic-button', function () {
  console.log('Динамическая кнопка нажата');
});

Манипуляции с DOM

Добавление и удаление элементов:

$$('.list').append('
  • Новый элемент
    • ');
$$('.list').prepend('
  • Первый элемент
    • ');
$$('.list-item:last-child').remove();

    Изменение атрибутов и данных:

    $$('.link').attr('href', 'https://example.com');
var href = $$('.link').attr('href');

$$('.item').data('id', 123);
var id = $$('.item').data('id');

    Методы .attr() и .data() позволяют как получать, так и задавать значения.

    Манипуляции с текстом и HTML:

    $$('.content').text('Новый текст');
$$('.content').html('Жирный текст');

    Анимации и эффекты

    Dom7 интегрируется с CSS-анимациями через методы .transition() и .transform():

    $$('.box').transition(500).transform('translateX(100px)');

    Методы позволяют задавать время анимации и трансформации, что удобно для динамических интерфейсов Framework7.

    Traversing: навигация по DOM

    Dom7 поддерживает методы для перемещения по дереву элементов:

    • .parent() — родительский элемент
    • .parents(selector) — ближайшие родительские элементы по селектору
    • .children(selector) — дочерние элементы
    • .siblings(selector) — соседние элементы
    • .find(selector) — поиск внутри выбранных элементов

    Пример:

    $$('.active').parent().addClass('highlight');
$$('.item').find('.label').css('color', 'blue');

    Работа с формами

    Dom7 предоставляет удобные методы для работы с формами и их элементами:

    var value = $$('#my-input').val(); // получение значения
$$('#my-input').val('Новое значение'); // установка значения

    Для чекбоксов и радиокнопок:

    $$('input[type=checkbox]').prop('checked', true);
var checked = $$('input[type=checkbox]').prop('checked');

    Метод .prop() управляет свойствами элементов, .val() — их значениями.

    Интеграция с компонентами Framework7

    Dom7 тесно связана с компонентами Framework7. Например, для обновления списка после динамического добавления элементов:

    var app = new Framework7({/* параметры */});

$$('.add-item').on('click', function () {
  $$('.list').append('
  • Новый элемент
    • ');
  app.virtualList.refresh(); // обновление виртуального списка
});

    С Dom7 можно легко управлять модальными окнами, панелями и вкладками Framework7:

    $$('.open-popup').on('click', function () {
  app.popup.open('.my-popup');
});

    Использование Dom7 обеспечивает короткий и читаемый код, без необходимости писать сложные нативные селекторы или циклы.

    Работа с анимацией свайпов и жестов

    Framework7 предоставляет события жестов, которые удобно обрабатывать через Dom7:

    $$('.swipe-area').on('swipeleft', function () {
  console.log('Свайп влево выполнен');
});
$$('.swipe-area').on('swiperight', function () {
  console.log('Свайп вправо выполнен');
});

    Это упрощает создание интерактивных интерфейсов на мобильных устройствах.

    Асинхронные операции и Dom7

    Хотя Dom7 ориентирована на DOM, её методы легко использовать с асинхронными данными:

    fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    data.forEach(item => {
      $$('.list').append('
  • ' + item.name + '
    • ');
    });
  });

    Dom7 отлично сочетается с динамическим наполнением контента и обновлением интерфейса.

    Оптимизация и производительность

    • Dom7 легковесна и не перегружает мобильные приложения.
    • Методы цепочки позволяют избегать повторного поиска элементов.
    • Рекомендуется хранить ссылки на часто используемые элементы:
    var $button = $$('.button');
$button.addClass('active');
$button.on('click', doSomething);

    Это снижает нагрузку на DOM и улучшает отзывчивость интерфейса.

    Расширение функционала

    Dom7 поддерживает расширение прототипа для создания собственных методов:

    Dom7.prototype.highlight = function () {
  this.css('background-color', 'yellow');
  return this;
};

$$('.item').highlight().css('color', 'red');

    Это позволяет создавать кастомные функции, сохраняя цепочку методов.

    Оглавление