Data Events

Data event attributes are powerful helpers which allow to load content on certain event with minimum efforts. It has rich API to work with events. It is possible to set loading target, cache loaded content and show on certain screen size and other more.

Load target

data-load-target specifies the target where content will be loaded in.
Content will be loaded to the target element on click event. Attribute value is CSS selector.

<a href="content.html" data-load-target="#content-target">Load content</a>
<div id="content-target"></div>

Load event

data-load-event sets load event type for an element. Default is click event.
There are also available custom events:
scroll - Content will be loaded when it be in view port during window scroll.
dom - Content will be loaded when DOM be ready.

<a href="content.html" data-load-target="#content-target" data-load-event="dom">Load content on DOM loaded</a>
<div id="content-target"></div>

Example:
Double click me to load content
Load content on DOMContentLoaded event

Load URL

data-load-url sets url to load content from for element which doesn't support href attribute.

<span data-load-url="content.html" data-load-target="#content-target">Load content</span>
<div id="content-target"></div>
Example:
Load data via data-load-url attribute

Also href and data-load-url have an ability to get attribute value in url via {{attribute name}}.

<input data-load-url="https://maps.googleapis.com/maps/api/geocode/json?address={{value}}" data-load-target="#content-target" data-load-event="keyup" type="text">
<div id="content-target"></div>
Example:

Load on screen

data-load-screen determines what screen size content will be loaded automatically. Available to set several screen sizes.
If load screen size does not fit the current one, content will be loaded on click event.

<a href="content.html" data-load-screen="sm md" data-load-target="#content-target">Load on sm or md screen sizes</a>

Load module

data-load-module loads amd module after content from href or data-load-url is loaded.
In ths example first is loaded module view and them js and css styles.

<a href="map.html" data-load-target="#content-target" data-load-module="map">Show Google Map</a>
<script>
Moff.amd.register({
		id: 'map',
		depend: {
			js: [
				'http://maps.google.com/maps/api/js',
				'/bower_components/jquery/dist/jquery.min.js',
				'/bower_components/gomap/jquery.gomap-1.3.3.min.js'
			]
		},
		file: {
			js: ['/libs/modules/map/map.js'],
			css: ['/libs/modules/map/map.css']
		}
	});
</script>
<!-- map.html -->
<div class="js-map" id="map"></div>

Push URL

data-push-url pushes element href or data-load-url to address bar via HTML5 JavaScript History API.

<a href="content.html" data-push-url data-load-target="#content-target">Load content</a>
Example:
Load content

Page title

data-page-title sets page new title. Usually can be used with data-push-url attribute.

<a href="content.html" data-push-url data-page-title="New page title" data-load-target="#content-target">Load content</a>