Getting Started

1. Download and unzip, then move the dist/mediani.min.js file to your assets directory

2. Include the following lines of code before footer section of your HTML.

<script src="/path/to/your/mediani.min.js" type="text/javascript"></script>

3. Add modal for mediani (like bootstrap modal) : 

<div class="modal mediani-modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content mediani-modal-content clearfix"></div>
	</div>
</div>

Mediani will call .mediani-modal class, when triggered.

4. You done, checkout examples below. play and try to submit.





Download

Current Version 1.0



Basic

Minimal setup :

Html 
<div class="basic-result"></div>
<input type="text" name="mediani" class="form-control basic" />
Javascript 
$('.basic').mediani({
	apiUrl: '/mediani/assets/data/example.json', // put your api url at here
	resultNode: 'image_url', // take value from your api result fields
	setPreview: $('.basic-result') // target element to append an item
});


Customize

Let we fetch data from Json Placeholder, and customing template.

Html 
<div class="custom-result"> </div>
<input type="text" name="mediani" class="form-control custom" />
Javascript 
$('.custom').mediani({
	apiUrl: 'http://jsonplaceholder.typicode.com/posts',
	resultNode: 'title',
	setPreview: $('.custom-result'),
	setLoading: '<p class="text-center" style="padding: 20px;">Tunggu sebentar prend...</p>',
	setItemTemplate: 'custom_tmpl',
	setButton: '<a class="btn btn-info"><span class="glyphicon glyphicon-search"></span> My Custom button</a>',
});

// here you customize template per each item.
<script type="text/html" id="custom_tmpl">
	<a href="#" class="list-group-item mediani-item">
		<h4 class="list-group-item-heading"><%=title%></h4>
		<p class="list-group-item-text"><%=body%></p>
	</a>
</script>