jquerymy.js ^‹{}›

A lightweight jQuery plugin for reactive
two-way data binding.

Download API Github Scroll down for demos

How jquerymy works

jQuery.my is a plugin for reactive data binding. Plugin mutates object given as a data source to sync it with user interactions.

Data bindings, facade appearance and CSS styling of an app are all defined using single manifest which is standard javascript object. Manifests are JSONable.

$.my recognizes both standard HTML controls as well as complex composites created using rich ui plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, jQuery Mobile are all supported out of the box.

$.my provides comprehensive validation, conditional formatting, complex dependencies, runtime form structure manipulation. $.my forms can run nested, each jQuery.my instance can be a composite component of a parent app.

Syntax of $.my manifest is simple and lean. There exists specialized in-browser IDE for $.my apps authoring. That IDE is a built-in component of cloudwall.me system.

Demos

Use Code button to edit source code of examples. Use Run button to exec your edits. All code editors and sandboxes are $.my apps. On this particular page $.my manages ~300 running instances, type $('.my-form') in console to enumerate them all.

Page layout

Use handles to shuffle pages and blocks. The layout you build is continuously stored to localStorage under AdLayout key; you can reload page and get your last layout state.

Application itself (without HTML and CSS) is about 100 LOC and contains 3 nested manifests: app, page and block. Undo is built-in feature of $.my. Draggable items are created using jQuery UI Sortable plugin.

Interactive table

Data is requested during app start and then indexed locally for faster search. All texts in the table are clickable.

Stats source – www.av1611.org. Range control is built using jQuery UI Slider.

Map and loupe

Carta Marina is 500 years old map of Northern Europe. jQuery UI Draggable plugin is applied to manage loupe drag. Slight movement lag is intentional.

Mobile platforms may fail to show 5x zoom – image is too large for mobile browsers, sorry.

Bézier curve

All control points are draggable, they are managed using jQuery UI Draggable plugin.

This demo reflects state to localStorage, last shape is restored after reload.

TodoMVC demo

Below example was built under old 2015 specs of TodoMVC project to assess viability of the very early $.my version.

Prebuilt HTML and CSS used. They are excluded from the app manifest for their size.

Master-detail

This demo shows how to create inter-linked lists that produce master-detail UI pattern. Elements of left list are draggable; notice how item number changes on drag. Right list always consit of a single element to edit.

The property init of right list‘s manifest illustrates how to use $.formgen plugin syntax to draw a form. $.formgen is shipped with $.my.

All controls

The form contains nearly all supported types of controls, both native HTML and plugin assisted.

The form also shows how $obj.modal() works. Click plugin assisted control label to popup its init code.

Compatibility

Works perfect in all modern browsers, and even in IE11+. Earlier IE versions are also somewhat supported, but apps require thorough testing and optimization to avoid lags.

Try it yourself

To run any demo as a standalone page just wrap manifest with this code:

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="https://cdn.cloudwall.me/1.3/general.css" />    <!-- Contains Sugar, jQuery, jQuery.my -->    <script src="https://cdn.cloudwall.me/1.3/minimal.js"></script>    <!-- Contains different rich ui plugins -->    <script src="https://cdn.cloudwall.me/1.3/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>

Minimal set of libs required to run $.my is ~90Kb gzipped, $.my takes ~25Kb.

The plugins.js plugin set contains several rich UI libs not necessary needed in every single app. It adds about 190Kb more to load.

minimal.js:

jQuery 3.6.0	jQuery and Migrate toolkit, required
Sugar.js 1.4.1	A library that extends native js objects with helpful methods, required
jquerymy.js	Latest jQuery.my
jQuery.tags	A plugin to show tag lists

plugins.js:

jQuery UI 1.11.1	A curated set of user interface plugins
jQuery TouchPunch	Translates touch events into clicks
Redactor 8.25	WYSIWYG editor, slightly modified version (two minor bug fixes)
CodeMirror 5.9.1	Code editor, includes JS and HTML markup highlighting
JCrop 0.9	Library providing image cropping
LoadImage	Image loader, respects EXIF
jQuery list	jQuery plugin for managing long complex lists
niceScroll 3.6.6	Plugin that generates nice thin scrollbars
Select2 3.5.4	Plugin to render dropdowns and YouTube-style tag selectors
hotKeys 3.7.3	Assigns handlers to hotkeys