jquerymy.js ‹{}›

A lightweight jQuery plugin for complex two-way
data binding in real time.

+
+
=
RU

How it works 

jQuery.my is a plugin for real time two-way data binding. It mutates object given as data source, reflecting interactions between user and UI.

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

jQuery.my recognize both standard HTML controls and complex composites created using rich ui plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile are supported out of the box.

jQuery.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 control for parent form.

Syntax of $.my manifest is very simple, lean and unobtrusive.

Demos

Use Code button to edit source code of examples. Use Run button to exec your edits. To mention, code editors and sandboxes are also $.my apps. 

Interactive table

Data is loaded when app starts, 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 North Europe. jQuery UI Draggable plugin applied to manage loupe drag.

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

Bézier curve

All control points are draggable, jQuery UI Draggable plugin is applied to manage them.

This demo reflects data to localStorage. Reload page – curve shape remains the same. 

Page layout

Use handles  to drag pages and blocks around. Layout you build is continuously stashed under AdLayout key into localStorage, so you can reload page and take your layout back.

Application itself (without HTML and CSS) is ~100 sloc long and contains 3 nested manifests – app, page and block. Draggable items are built with jQuery UI Sortable.

TodoMVC demo

This example is built using specs of TodoMVC project. Below code is the shortest implementation. Standalone version – jQuerymy.com/todomvc.

Prebuilt HTML and CSS used. They are excluded from manifest for their size (450 sloc). 

All controls

The form contains nearly all supported controls. Ace and CLeditor are not shown, but supported as well.

The form also illustrates how $.my.modal() works. Click control’s type to popup control’s init code. 

Try it yourself

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

<!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://s3-eu-west-1.amazonaws.com/cloudwall.me/0.9/cw.general.css" />
 
    <!-- Specific tune ups -->
    <link rel="stylesheet" type="text/css" href="http://cloudwall.me/cw.css" />
 
    <!-- Contains Sugar, jQuery, jQuery.my -->
    <script src="http://s3-eu-west-1.amazonaws.com/cloudwall.me/0.9/cw.minimal.js"></script>
 
    <!-- Contains different rich ui plugins -->
    <script src="http://s3-eu-west-1.amazonaws.com/cloudwall.me/0.9/cw.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>
 
// Place your javascript here
 
 
/* Container for CSS code */
 
 

An entire set of libs is ~330 Kb gzipped, $.my takes 25Kb.

Plugin set cw.plugins.js incorporates a lot of ui libs, not necessary needed in every single app. Minimal set of libs required to run $.my forms is <90Kb gzipped.

cw.minimal.js contents

jQuery 1.11.0jQuery. Migrate toolkit also included. Required.
Sugar.js 1.4.1A library that extends native js objects with helpful methods. Required.
jquerymy 1.0.0
jQuery.tagsA plugin to show tag lists.

cw.plugins.js contents

jQuery UI 1.10jQuery UI is a curated set of user interface interactions, effects, widgets, and themes.
jQuery TouchPunchTranslates touch events into clicks.
Redactor 8.25WYSIWYG editor, slightly modified version (two minor bug fixes).
CodeMirror 3.21CodeMirror is a versatile code editor. Javascript prettifier included.
JCropA library providing image cropping functionality.
jQuery listA plugin to manage long complex lists.
d3A library for manipulating graphics based on data.
jQuery tmplTemplate engine.

 


© 2014 ermouth, licensed under GPL v3