A lightweight jQuery plugin for complex two-way
data binding in real time.
jQuery.my is a plugin for real time two-way data binding. It mutates object given as a data source, reflecting interactions between user and UI.
jQuery.my recognizes 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. There exist specialized in-browser IDE for $.my apps authoring. This IDE is a built-in component of cloudwall.me system.
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. On this particular page $.my manages ~300 running instances, type
$(".my-form") in console to see them all.
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 about 100 sloc long and contains 3 nested manifests – app, page and block. Undo is built-in feature of $.my. Draggable items are created using jQuery UI Sortable.
Data is requested 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.
Carta Marina is 500 years old map of North Europe. jQuery UI Draggable plugin applied to manage loupe drag. Movement lag is intentional.
Mobile platforms may fail to show 5x zoom – image is too large for mobile browsers, sorry.
All control points are draggable, jQuery UI Draggable plugin is applied to manage them.
This demo reflects state to localStorage. Reload page – curve shape remains the same.
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).
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, that is editable reflection of an element selected at left.
init of right list‘s manifest illustrates how to use $.formgen plugin syntax to draw a form. $.formgen is shipped with $.my.
The form contains nearly all supported controls. Ace and CLeditor are not shown, but supported as well.
The form also illustrates how
$obj.modal() works. Click control’s type to popup control’s init code.
Works perfect in all modern browsers and IE11+.
To run any demo as a standalone page just wrap manifest with this code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- General stylesheet -->
<link rel="stylesheet" type="text/css"
<!-- Contains Sugar, jQuery, jQuery.my -->
<!-- Contains different rich ui plugins -->
<div id="form" class="p50 w750">
<!-- Container for app -->
// Manifest goes here
/* Container for CSS code */
An entire set of libs is ~280 Kb gzipped, $.my takes 24Kb.
Plugin set plugins.js incorporates a lot of rich UI libs, not necessary needed in every single app. Minimal set of libs required to run $.my forms is <100Kb gzipped.
|jQuery 2.1.3||jQuery. Migrate toolkit also included. Required.|
|Sugar.js 1.4.1||A library that extends native js objects with helpful methods. Required.|
|jQuery.tags||A plugin to show tag lists.|
|jQuery UI 1.11.4||jQuery UI is a curated set of user interface interactions, effects, widgets, and themes.|
|jQuery TouchPunch||Translates touch events into clicks.|
|Redactor 8.25||WYSIWYG editor, slightly modified version (two minor bug fixes).|
|JCrop||Library providing image cropping functionality.|
|LoadImage||Image loader, respects EXIF|
|jQuery list||Plugin to manage 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|
jQuery.my is licensed under MIT.
© 2023 ermouth