<commit_before>[![MIT License][license-image]][license-url] [![Gitter chat](https://badges.gitter.im/totaljs/framework.png)](https://gitter.im/totaljs/jComponent)

[![Support](https://www.totaljs.com/img/button-support.png?v=2)](https://www.totaljs.com/support/) 

# jQuery reusable component library

> __Download__: more than 70 jComponents for free for everyone. www.componentator.com

- [Gitter - Chat for GitHub](https://gitter.im/totaljs/jComponent)
- Current version: `v8.0.0` (BETA VERSION)
- `>= jQuery +1.7`
- `>= IE9`
- works with [Electron](electron.atom.io), [PhoneGap](http://phonegap.com/) or [NW.js](https://github.com/nwjs/nw.js/)
- works with [Bootstrap](http://getbootstrap.com/), [Foundation](http://foundation.zurb.com/), [Pure](http://purecss.io/), [Material Design](http://www.getmdl.io/) and others
- you can wrap thousands plugins of jQuery via jComponent
- best of use with [www.totaljs.com - web framework for Node.js](http://www.totaljs.com)
- [Download UI components](https://github.com/totaljs/components)

__YOU HAVE TO SEE:__

- [__jComponent full SPA example with the source-code__](https://example.jcomponent.org/)
- [Tangular - A template engine like Angular.js](https://github.com/totaljs/Tangular)
- [jRouting - HTML 5 routing via History API](https://github.com/totaljs/jRouting)
- [__Download the existing jComponents__](https://componentator.com)

***

- __Homepage:__ <https://www.jcomponent.org>
- __Full SPA example:__ <https://example.jcomponent.org>
- __Download existing components__ <https://www.componentator.com>

***

## Library

jComponent offers 3 libraries for development rich web applications:

- `jcomponent.min.js` contains only jComponent library
- `jcta.min.js` contains jComponent library and [Tangular template engine](https://github.com/totaljs/Tangular)
- `jctajr.min.js` contains jComponent library, [Tangular template engine](https://github.com/totaljs/Tangular) and [jRouting](https://github.com/totaljs/jRouting)

If you want to use jComponent on your presentation website - use `jcomponent.min.js` only. If you create a rich web application, then use `jcta.min.js` because it contains template engine and for __SPA__ use `jctajr.min.js` because it contains template engine and HTML 5 history API.

The components work is the browser `window.` scope. So each path in the form of `path.to.something` is automatically routed into `window.path.to.something`. The library automatically creates values according the binding path.

The library can be loaded with `async` attribute.

***

## HTML definition

The library searches all components according `data-component` attribute which must contain a component name and [the component must be defined in JavaScript](#component).

__IMPORTANT__: +v8.0.0 supports shorter names of attributes e.g. `data-jc=""` instead of `data-component=""` or `data-jc-path` instead of `data-component-path`.

__IMPORTANT__: +v8.0.0 supports declaring of multiple components like this `data-jc="component1,component2,component3`.

#### Simple declaration of the component

```html
<div data-component="textbox">Name</div>

<!-- OR -->
<b data-component="timer"></b>

<!-- OR -->
<span data-jc="email-decoder">your(AT)mail(DOT)com</span>

<!-- OR -->
<table>
    <tbody data-jc="pricelist"></tbody>
</table>
```

## Declaration with binding

Binding is represented as `data-component-path` attribute. jComponent has own buil-in mechanism for binding values to/from component (you can rewrite it).

```html
<div data-component="textbox" data-component-path="contactform.name">Name</div>

<!-- empty "data-component" can write only raw output according binding path -->
<div data-component="" data-component-path="contactform.name"></div>
```

The value `contactform.name` is linked to `window.contactform.name` (`window` is meant as a browser window instance). The library automatically creates value in __window scope__ if the value doesn't exist.

---

## HTML attributes

```html
<element data-component="" />
<!--
    Must contain a component name. If the value of this attribute is empty then jComponent
    writes only raw output according binding path attribute.
-->

<element data-component-path="" />
<!--
    It's not required. The attribute contains the binding path for binding values between
    the component and a model, e.g. `form.name` (is binded to `window.form.name`) or<commit_msg>Update readme.<commit_after>[![MIT License][license-image]][license-url] [![Gitter chat](https://badges.gitter.im/totaljs/framework.png)](https://gitter.im/totaljs/jComponent)

[![Support](https://www.totaljs.com/img/button-support.png?v=2)](https://www.totaljs.com/support/) 

# jQuery reusable component library

> __Download__: more than 70 jComponents for free for everyone. www.componentator.com

- [Gitter - Chat for GitHub](https://gitter.im/totaljs/jComponent)
- Current version: `v8.0.0` (BETA VERSION)
- `>= jQuery +1.7`
- `>= IE9`
- works with [Electron](electron.atom.io), [PhoneGap](http://phonegap.com/) or [NW.js](https://github.com/nwjs/nw.js/)
- works with [Bootstrap](http://getbootstrap.com/), [Foundation](http://foundation.zurb.com/), [Pure](http://purecss.io/), [Material Design](http://www.getmdl.io/) and others
- you can wrap thousands plugins of jQuery via jComponent
- best of use with [www.totaljs.com - web framework for Node.js](http://www.totaljs.com)
- [Download UI components](https://github.com/totaljs/components)

__YOU HAVE TO SEE:__

- [__jComponent full SPA example with the source-code__](https://example.jcomponent.org/)
- [Tangular - A template engine like Angular.js](https://github.com/totaljs/Tangular)
- [jRouting - HTML 5 routing via History API](https://github.com/totaljs/jRouting)
- [__Download the existing jComponents__](https://componentator.com)

***

- __Homepage:__ <https://www.jcomponent.org>
- __Full SPA example:__ <https://example.jcomponent.org>
- __Download existing components__ <https://www.componentator.com>

***

## Library

jComponent offers 3 libraries for development rich web applications:

- `jcomponent.min.js` contains only jComponent library
- `jcta.min.js` contains jComponent library and [Tangular template engine](https://github.com/totaljs/Tangular)
- `jctajr.min.js` contains jComponent library, [Tangular template engine](https://github.com/totaljs/Tangular) and [jRouting](https://github.com/totaljs/jRouting)

If you want to use jComponent on your presentation website - use `jcomponent.min.js` only. If you create a rich web application, then use `jcta.min.js` because it contains template engine and for __SPA__ use `jctajr.min.js` because it contains template engine and HTML 5 history API.

The components work is the browser `window.` scope. So each path in the form of `path.to.something` is automatically routed into `window.path.to.something`. The library automatically creates values according the binding path.

The library can be loaded with `async` attribute.

***

## HTML definition

The library searches all components according `data-component` attribute which must contain a component name and [the component must be defined in JavaScript](#component).

__IMPORTANT__: +v8.0.0 supports shorter names of attributes e.g. `data-jc=""` instead of `data-component=""` or `data-jc-path` instead of `data-component-path`.

__IMPORTANT__: +v8.0.0 supports declaring of multiple components like this `<div data-jc="component1,component2,component3" ...`.

#### Simple declaration of the component

```html
<div data-component="textbox">Name</div>

<!-- OR -->
<b data-component="timer"></b>

<!-- OR -->
<span data-jc="email-decoder">your(AT)mail(DOT)com</span>

<!-- OR -->
<table>
    <tbody data-jc="pricelist"></tbody>
</table>

<!-- OR multiple declaration of components +v8.0.0 -->
<div data-jc="binder,exec"></div>
```

## Declaration with binding

Binding is represented as `data-component-path` attribute. jComponent has own buil-in mechanism for binding values to/from component (you can rewrite it).

```html
<div data-component="textbox" data-component-path="contactform.name">Name</div>

<!-- empty "data-component" can write only raw output according binding path -->
<div data-component="" data-component-path="contactform.name"></div>
```

The value `contactform.name` is linked to `window.contactform.name` (`window` is meant as a browser window instance). The library automatically creates value in __window scope__ if the value doesn't exist.

---

## HTML attributes

```html
<element data-component="" />
<!--
    Must contain a component name. If the value of this attribute is empty then jComponent
    writes only raw output according binding path attribute.
-->

<element data-component-path="" />
<!--
    It's not required. The attribute contains the binding path for binding values between
    the component and a model, e.g. `form.name` (is binded to `window.form.name`) or
{'fraction_non_alphanumeric': 0.14110498480927197, 'fraction_numerical': 0.0050635760099021045, 'mean_word_length': 4.586423632935261, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 60, 'https://': 34, 'lorem ipsum': 0, 'www.': 16, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '38704', 'n_tokens_mistral': 2680, 'n_tokens_neox': 2608, 'n_words': 831}