jQuery version: Unlike core Bootstrap, Entegre uses the latest stable version of jQuery in the 2.x branch.

Working with Entegre is the same as any Bootstrap page, so you can start with the basic minimal document or add Entegre to an existing document.

Load Entegre

<script src="js/entegre-all.min.js"></script>

Simple elements

You can create simple element instances with the E.node helper function:

var a = E.node( 'a', { 'href': '#foo', 'class': 'btn' }, 'Foo' );

Calling a.build() would return:

<a href="#foo" class="btn">Foo</a>

Using widgets

Assuming your HTML includes a div like this:

<div id="my_test"></div>

Then this script will work:

$( function() {
	$E('p').child( 'Hello world!' ).append( '#my_test' );
} );

And your HTML will look like this:

<div id="my_test">
	<p>Hello world!</p>
</div>

Now, that alone isn't terribly helpful, but consider this:

$( function() {
	$E('accordion')
		.panel( 'Panel One', 'Hello world!' )
		.panel( 'Panel Two', 'Hello from another world.' )
		.append( '#my_test' );
} );

Produces this entire block:

<div class="e-accordion panel-group" role="tablist" aria-multiselectable="true" id="ejs2">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="ejs3-h">
			<h4 class="panel-title">
				<a class="e-accordion-toggle" role="button" data-toggle="collapse" data-parent="#ejs2" href="#ejs3" aria-expanded="false" aria-controls="">Panel One</a>
			</h4>
		</div>
		<div class="panel-collapse collapse" role="tabpanel" id="ejs3" aria-labelledby="ejs3-h">
			<div class="panel-body">
				Hello world!
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="ejs4-h">
			<h4 class="panel-title">
				<a class="e-accordion-toggle" role="button" data-toggle="collapse" data-parent="#ejs2" href="#ejs4" aria-expanded="false" aria-controls="">Panel Two</a>
			</h4>
		</div>
		<div class="panel-collapse collapse" role="tabpanel" id="ejs4" aria-labelledby="ejs4-h">
			<div class="panel-body">
				Hello from another world.
			</div>
		</div>
	</div>
</div>
Last modified: 2016-02-05