A Super Light-Weight JavaScript Framework
ChopJS supports most major modern browsers, however, for Internet Explorer, only IE9+ is supported.
Put the following code at the bottom of body
tag:
<script src="chop.js" ch-main="js/main.js"></script>
- The
ch-main
attribute indicates the entry point/script of the web page.
See module page
Initializes data sources. E.g. ch-init="list = []; msg = {from: 'a', to: 'b'}"
Loads Chop.js modules. E.g.: ch-use="event; string; local/module"
Sets chop.js view.
ch-keypress, ch-keydown, ch-click, ch-dbclick, ch-change, ch-mouseover, ch-mouseenter, ch-mouseout, ch-mouseleave, ch-mousemove, ch-mouseup, ch-mousedown, ch-mousewheel, ch-drag, ch-dragstart, ch-dragend, ch-dragover, ch-dragenter, ch-drop
Adds event listener. Use $$event
for event parameter. To access "data source", use {{sourceName}}
. Filter can also be used in data-source expression, e.g. {{users | filter: superUserFilter}}
.
Defines/adds data sources.
To use inline data source, the DOM element then has to have an ID. E.g.:
<div id="inline-div" ch-source>This is a inline {{data}} source.</div>
Turns the enclosed HTML element into an inline chop.js template, and renders the template according the value chop.js expression.
Each ch-inline element has to have an id.
Returns an HTML element in the form of a chop.js element object. If no elements
found, returns undefined
.
context
could be an HTML element. E.g. $ch.find('#btn', $ch.find('#context').el)
.
Returns an chop.js element array that contains all the found elements. If no elements found, returns an emptry array.
context
could be an HTML element. E.g. $ch.findAll('.btn', $ch.find('#context').el)
.
Converts a DOM element into Chop.js element object, and returns the Chop.js element object.
DOMElement
can be either a DOM element or an element string.
Alias function to $ch.chopEl
.
If only source
provided, returns the value of source
. Otherwise, sets the value of source
to data
.
Creates and returns a chop.js view object. If no param
provided, returns false
.
param
should at least contains an html
property, which can be either
a value or a function with return value. The html
represents the HTML of
the chop.js view.
To manually render a view, call render()
.
Returns a processed string against the template
. If no data
provided, returns the content of template
.
Use type='text/template'
to define a template in script
elements. Use {{something}}
to indicate the place to be processed.
data
should be in the form of an object.
Performs an AJAX request.
url
: the target URL of the AJAX call.
The object param
contains:
method
: HTTP verb (get, post, put, delete)header
: HTTP request headers to be set in the form of an object (e.g. {'header1': 'value1', 'header2': 'value2'})async
: asynchronous, default:true
(true
orfalse
)responseType
: the response type of the AJAX requestdata
: data to be sent in the form of an objectdone
: the callback function for async AJAXcache
: indicates if the AJAX request should be cached. Defaultfalse
If async
is false
, returns the returned AJAX object.
Performs a JSONP request.
url
should be in the format of: http://example.com/data.json?jsonp={callback}
.
callback
is a function and takes a data parameter refers to the loaded JSON.
Defines a chop.js module.
name
: the name of the module. Has to be same with filename, but without extension name (i.e..js
)require
: [optional] the modules to be synchronously required.function
: the function of the module. The return value will be stored in$ch.module.module_name
.
Each customized module HAS TO BE packed in a module folder.
Returns the returned data of module
.
Uses/loads a chop.js module, and returns the returned value of module
.
module
: chop.js module name. If multiple modules, then in the form of an array. If a particular version is needed, Use@
to indicate. e.g.$ch.require(['ui@0.2', 'layout'])
.
For details on module versions, see jsDelivr and search for modules by adding chopjs-
before modules' names. E.g. to search event
, type chopjs-event
.
-
useLoader
: [Optional] eithertrue
orfalse
to define if to use Chop.js online module loader. Default:true
. -
callback
: ifcallback
presented, loadmodule
asynchronously and then firecallback
. The parameters tocallback
are the returned value of eachmodule
.
Reads and returns the content of local file src
. If callback
presented, read the file asynchronously and fire callback
after loading.
Iterates obj
call callback
. Parameters to callback
:
- for array:
currentItem
,index
,obj
- for object:
key
,value
,index
,obj
Filters and returns the array in obj
according to expression
.
expression
is a function which takes a parameter representing obj
and returns either true or false.
Returns an object deserialized from formStr
.
Sets CSS style. If no parameters, returns CSS text.
Sets inner HTML into html
. If no html
provided, returns inner HTML.
Sets text content to html
. If no html
presented, returns text content.
Appends html
.
Prepends html
.
Appends HTMLElement
as child.
Prepends HTMLElement
as child.
If no value
presented, set the element's scrollTop to value
. Otherwise, returns current scrollTop.
If no value
presented, set the element's scrollLeft to value
. Otherwise, returns current scrollLeft.
Returns the offset properties of the element in the form of:
{
left: offsetLeft,
top: offsetTop,
width: offsetWidth,
height: offsetHeight,
parent: offsetParent
}
Returns property
value of the element.
Sets property
of the element to value
.
Adds class
.
Removes class
.
Toggles class
.
Submits the form element, otherwise returns false
.
Performs animation style
(in the form of an object) according to options
.
options
can either be the form of {duration: duration, easing: easing}
, or just duration in ms.
If callback
presented, fire callback
when animation is finished.
Sets value to value
. If no value
provided, returns value.
Sets attribute key
to value
. If no parameters, returns all attributes.
Checks if the element has attribute key
.
Removes attribute key
.
Renders the inline-tempalte element with object data
.
Serializes a form element.
Shows the element.
Hides the element.
Registers callback
to event
.
Detaches the subscription of callback
on event
.
Adds callback
to all query
element on event
. Multiple query
can present.
E.g.:
aViewObject.delegate('click', triggerSomething, 'button', 'div.btn');
// all buttons and btn-class divs in 'aViewObject' will fire 'triggersomething'
on click.
Adds event listener on click. If no callback
, trigger click event.
Adds event listener on keypress.
Adds event listener on keydown.
Adds event listener on change.
$ch
/$$CHOP
-- chop.js main variable.$$CHOPEL
-- chop.js html element.$$CHOPVIEW
-- chop.js view.