jquerymy.js ‹{}›

Плагин для связывания HTML-контролов и данных.
В реальном времени. В обе стороны.

+
+
=
EN

Описание

jQuery.my – плагин для динамического двунаправленного связывания
HTML-контролов с javascript-объектом, содержащим данные. 

jQuery.my автоматически распознаёт как стандартные HTML-контролы, так и композитные элементы управления, созданные с помощью rich ui плагинов. Поддерживаются контролы, созданные с помощью jQuery UI и Select2, редакторы CodeMirror, Ace, Redactor, CLeditor, интерфейсы jQuery Mobile.

Поддерживается сложная валидация, условное форматирование, (взаимо)зависимые поля, изменение структуры формы после инициализации. Формы могут быть вложены – каждый экземпляр формы jQuery.my может служить контролом для другой формы $.my.

Каждая форма полностью определяется одним единственным javascript объектом – манифестом, который может быть не только включен инлайном в код страницы, но и загружен как json-объект.

Для разработки $.my-приложений существует браузерный IDE, он встроен как компонент в cloudwall.me.

Примеры

Все примеры редактируемы – кнопки Code открывают редактор с исходным кодом манифеста примера. Редактор содержит «песочницу» исполнения – отредактированный (или полностью заменённый) манифест можно запустить кнопкой Run

Сами редакторы манифестов с песочницей – тоже формы $.my.

Интерактивная таблица

Данные загружаются при инициализации и по загрузке индексируются для быстрого поиска. Все тексты в таблице кликабельны.

Источник статистики www.av1611.org. Для создания контрола диапазона используется плагин jQuery UI Slider.

Карта с лупой

Изображениe – Carta Marina. Использован плагин jQuery UI Draggable.

Может некорректно работать на старых айпадах – картинка карты в полном разрешении слишком велика для старых версий iSafari.

Кривая Безье

Демонстрация кривой Безье третьего порядка, все опорные точки можно перемещать мышкой. Использован плагин jQuery UI Draggable.

Сохраняет данные в localStorage, при повторном открытии форма кривой будет восстановлена. 

Раскладка газеты

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

Содержательная часть приложения (без HTML и CSS) – 3 вложенных манифеста общим объёмом 100 строк. Перемещаемые элементы инициализированы плагином jQuery UI Sortable.

Реализация TodoMVC

Полностью соответствует спецификации проекта TodoMVC, самый короткий код из всех примеров. Standalone-версия – jQuerymy.com/todomvc.

Используются типовые HTML и CSS, из кода манифеста они исключены по причине громоздкости (450 строк). 

Master-detail

Пример иллюстрирует связывание двух списков для реализации интерфейсного шаблона Master-detail. Элементы левого списка перетаскиваемые. Правый список всегда состоит из одного элемента и используется для отображения детальной информации.

Свойство init для правого списка иллюстрирует инициализацию с помощью генератора форм – плагина $.formgen, входящего в jQuery.my.

Все контролы

Пример демо-формы, содержащей большинство поддерживаемых $.my контролов. 

Пример также иллюстрирует работу функции $obj.modal() – клик на название типа контрола откроет всплывающий диалог с кодом init-функции контрола.

Код для запуска примеров

Чтобы запустить примеры в standalone-версии, нужно создать минимальное HTML-окружение вокруг манифеста:

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- General stylesheet -->
    <link rel="stylesheet" type="text/css" 
          href="http://cdn.cloudwall.me/1.2/general.css" />
    <!-- Contains Sugar, jQuery, jQuery.my -->
    <script src="http://cdn.cloudwall.me/1.2/minimal.js"></script>
    <!-- Contains different rich ui plugins -->
    <script src="http://cdn.cloudwall.me/1.2/plugins.js"></script>
  </head>
  <body>
    <div id="cw-body">
      <div id="form" class="p50 w750">
        <!-- Container for app -->
      </div>
    </div>
  </body>
  <script>
    $(function(){
      // onload
      $("#form").my(
        //###################
        // Manifest goes here
        //###################
      )
    });
  </script>
</html>
xxxxxxxxxx
 
// Place your javascript here
xxxxxxxxxx
 
/* Container for CSS code */

Общий объём загружаемого кода всех библиотек и плагинов (gzip) – 280Кб. Из них непосредственно jQuery.my занимает 23Кб.

Далеко не все плагины, включенные в plugins.js, бывают нужны одновременно – минимально необходимый объём для старта формы только со стандартными контролами – чуть меньше 100 Кб сжатого трафика.

minimal.js 

jQuery 2.1.3jQuery и migrate toolkit.
Sugar.js 1.4.1Библиотека javascript-расширений, полная версия со всеми локализацими.
jquerymy 1.2.3jQuery.my
jQuery.tags 0.5Плагин для отображения наборов тегов, повсеместно используется.

plugins.js 

jQuery UI 1.11.1Создание композитных контролов, хорошо документированная 
библиотека. Все основные плагины плюс кириллическая локализация для дат.
jQuery TouchPunchПроброс событий касания в клики для планшетов.
Redactor 8.25WYSIWYG-редактор, незначительно изменённая версия.
CodeMirror 5.91Редактор кода. Включены парсеры js, css, html, xml.
JCropБиблиотека для интерактивной обрезки изображений.
jQuery listВывод списков.
niceScroll 3.6.6Плагин для создания scrollable-контейнеров.
Select2 3.5.4Плагин для создания списков тегов в стиле YouTube и выпадающих списков

Лицензия

jQuery.my лицензируется под лицензией MIT.



© 2016 ermouth