jqComponents brings GUI components, responsive layout
and structure to jQuery powered web apps.

Introduction

jqComponents is a web application framework that brings reusable GUI components, responsive layout and structure to jQuery powered web apps.

The code of webapps powered by jQuery can easily get messy as the application code base grows in size. DOM manipulation and application logic easily gets mixed and scattered throughout the webapp code. Additionally, jQuery plugins which are often used to create GUI components, are actually not that well suited for this task.

jqComponents addresses these problems by using JavaScript objects instead of jQuery plugins. GUI logic is kept in components, and application logic in modules - both of which are JavaScript objects.



jqComponents comes with set of ready-to-use visual and non-visual components. In case you cannot find the component you need, it is easy to implement your own component and plug it in.

jqComponents does not use the {{ }} HTML templating style seen in other web frameworks (AngularJS, Handlebars, Knockout etc.). This templating style can get messy for more complex GUI components, and it is not particularly well suited for GUI components rendered with HTML5 canvas or WebGL.

Instead, jqComponents creates JavaScript components and connect them to their corresponding HTML elements. These JavaScript components are responsible for rendering the GUI component, either by generating HTML or by calling JavaScript methods on a HTML5 Canvas, in WebGL, D3 etc.

Documentation

The documentation is an ongoing process. Here is what is documented so far.

Documentation Status

The documentation has been updated to match the 1.6.0 release. Lots of pages have been corrected, and many of them expanded to include the newer features and recommended use patterns.

The documentation includes 25 live demos. Check out the demos page.

Downloads

Build Wizard GitHub Repo

Download the jqc-all.zip in the version you need. Unzip the file into a directory in your web app, and start using the files in your HTML pages. If you do not need the whole framework, you can create a custom build with just the parts you need using the Build Wizard.

VersionDescription
jqc-all-1.7.0.zip Contains a small update adding a little bit of dependency injection to module factory functions, and module boot phase functions. The dependency injection is optional, is backwards compatible, and if used, make your code a little bit shorter.
jqc-all-1.6.0.zip Contains a bug fix of the jqcDataService, a minor behavioural fix of of two other functions, separation of private and public functions of components and with this separation comes better minification of the full JavaScript file.
jqc-all-1.5.0.zip Contains the new jqcAccordion. No other changes.
jqc-all-1.4.0.zip Declarative configuration options (via HTML attributes) added to jqcResponsiveLayoutManager, jqcTable, jqcTreeList, jqcButton, jqcDataService and jqcForm. Additionally, it is now possible to add custom component factories via the jqc-factory HTML attribute.

Modules no longer need an explicit id attribute. If no id attribute is set, the module's factory function name is also used as its id.

Bugs in removeData() of jqcViewModel and jqcDataModel have been fixed. Minor performance increases too. Other small changes, like global pageController object moved into global jqc object. jqcPageController has a new lookupFunction() function, and two global variables have been made local (they were global by mistake).
jqc-all-1.3.0.zip A major overhaul of the jqcResponsiveLayoutManager. The basics remain the same, but several new features were added, including support for nested rows and reordering of cells.
jqc-all-1.2.0.zip Adds jqcTreeList component which can be used to build expandable / collapsable tree list with ul and li elements.
jqc-all-1.1.0.zip Updates to jqcForm (listener functions added) and to jqcLabel (ok(), info(), warning() and error() functions added). Code cleaned up (global variables removed, a $() --> jQuery() etc).
jqc-all-1.0.0.zip Updates to jqcTable, jqcForm and jqcDataService - not backwards compatible. jqcComponents is now more coherent.


Status

Version 1.7.0 is released. V. 1.7.0 contains a small update adding a little bit of dependency injection to module factory functions, and module boot phase functions. The dependency injection is optional, is backwards compatible, and if used, make your code a little bit shorter.

Version 1.6.0 is released. This version contains no new features. It contains a bug fix of the jqcDataService, a minor behavioural fix of of two other functions, separation of private and public functions of components and with this separation comes better minification of the full JavaScript file (jqc-all.js got 5kb smaller after minification).

Version 1.5.0 is released. The planned navigation bar implementation was canceled since I found out it is much easier to make a responsive page header incl. navigation bar and button + menu using the jqcResponsiveLayoutManager and CSS + CSS media queries. Keeps the framework smaller too.

Instead of the planned navigation bar, v. 1.5 contains a jqcAccordion which is an often used GUI component in mobile applications.

Version 1.4.0 is out. The focus of this release is declarative event listener configuration, so event listeners of e.g. a button or data service can be declared inside the HTML element that declares the component (button or data service).

License

jqComponents is released under the Apache License 2.0 which means you can use jqComponents for free for commercial and non-commercial use.