Tabs

You can add tabs to your site.

Example :

<ul class="tabs">
	<li class="active"><a href="#tab1">Dog 1</a></li>
	<li><a href="#tab2">Dog 2</a></li>
	<li><a href="#tab3">Dog 3</a></li>
</ul>
<div class="tabs-content">
	<div id="tab1">
		<img src="img/1.jpg"/>
	</div>
	<div id="tab2">
		<img src="img/2.jpg"/>
	</div>
	<div id="tab3">
		<img src="img/3.jpg"/>
	</div>
</div>
You can add breadcrumb to your site using an ul with the class .breadcrumb.

Example :
or
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Animals</a></li>
	<li><a href="#">Dogs</a></li>
	<li><a href="#">Mops</a></li>
</ul>
or
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Animals</a></li>
	<li><a href="#">Dogs</a></li>
	<li class="active">Mops</li>
</ul>

Pagination

You can add pagination to your website using a list ul inside a div having the class .pagination.

Example :
<div class="pagination">
	<ul>
		<li class="disabled">&laquo;</li>
		<li class="active">1</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">&raquo;</a></li>
	</ul>
</div>
<div class="pagination">
	<ul>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li class="disabled">...</li>
		<li><a href="#">17</a></li>
		<li class="active">18</li>
		<li><a href="#">19</a></li>
	</ul>
</div>

Message boxes & others

You can add styles for info, warning and error elements, by adding the classes .info, .warning and .error on them.

Example :
Divs:
I'm an info
I'm a warning
I'm an error
I'm a success
Forms:
The dropdown is a small jQuery plugin helping you to create menus when clicking an element.
If you want to create a dropdown link, add data-dropdown with the reference to your dropdown list.
It can also used on select elements in order to improve their usablility, you just have to add the class .dropdown.

Settings :
Parameter Information Default value
columns Number of columns. You can define it by setting "data-columns". 1 (3 for select elements)
scroll Allow scrolling on the items. If false, the dropdown will show all the items. You can define it by setting "data-scroll". false (true for select elements)
width Width of the dropdown. You can define it by setting "data-width" (px|'auto'|'parent'). auto (parent for select elements)
Simple dropdown
<a href="#" data-dropdown="#dropdown1">Simple dropdown</a>
<ul class="dropdown" id="dropdown1">
	<li><a href="http://www.google.fr" rel="nofollow">Google</a></li>
	<li><a href="http://www.facebook.com" rel="nofollow">Facebook</a></li>
	<li><a href="http://twitter.com" rel="nofollow">Twitter</a></li>
	<li><a href="#" class="remove_btn" onclick="alert('deleted');">Delete</a></li>
</ul>
2 columns dropdown
<a href="#" data-dropdown="#dropdown2" data-columns="2">2 columns dropdown</a>
<ul class="dropdown" id="dropdown2">
	<li><a href="http://www.google.fr" rel="nofollow">Google</a></li>
	<li><a href="http://www.facebook.com" rel="nofollow">Facebook</a></li>
	<li><a href="http://twitter.com" rel="nofollow">Twitter</a></li>
	<li><a href="#" class="remove_btn" onclick="alert('deleted');">Delete</a></li>
</ul>
Dropdown for a select element.
<select name="birthdate_month" class="dropdown">
	<option value="1">January</option>
	<option value="2">February</option>
	<option value="3">March</option>
	<option value="4">April</option>
	<option value="5">May</option>
	<option value="6">June</option>
	<option value="7">July</option>
	<option value="8">August</option>
	<option value="9">September</option>
	<option value="10">October</option>
	<option value="11">November</option>
	<option value="12">December</option>
</select>
You can easily create slideshows. Create a div.carousel containing one <ul> and a set of li.
You can add a carousel caption inside the li with a div.carousel-caption.

You can choose between slide and fade transition mode.

You can also use directly the jQuery plugin.

Settings :
Parameter Information Default value
mode Transition mode (slide or fade) slide
arrows Display arrows true
indicators Display indicators false
auto Automatically change slides true
delay Delay between automatic slide changes (in ms) 5000
stoponhover Stop auto transition if mouse is hover the carousel true

Modals

Modals allows to show dynamic dialogs on the page.
Simple modal
<a class="btn" href="#" data-modal="#modal_target1">Simple modal</a>
   <div class="modal span5" id="modal_target1">
      <div class="modal-title"><h5>My modal title</h5> <div class="close">&times;</div></div>
      <div class="modal-content">Test hello</div>
      <div class="modal-footer"><input type="button" class="btn" value="Cancel" onclick="javascript:$('#modal_target1').trigger('close');"/> <input type="button" class="btn blue" value="Submit" onclick="javascript:$('#modal_target1').trigger('close');"/></div>
   </div>
Ajax modal
<a class="btn" href="ajax.html" data-modal="ajax" data-title="Ajax Modal">Ajax modal</a>

Hints

Ministrap provides simple jQuery hints. It's very easy to use, you just have to add the class .hint to your element, and add an attribute data-hint with the content of the hint. You can customize your hint with data-hint-position, data-hint-presistent and data-hint-class.

Examples :

Hint Code
My link
<a href="#" data-hint="My normal hint">My link</a>
My link
<a href="#" data-hint-position="bottom" data-hint-permanent="true" data-hint-class="info" data-hint="My bottom info permanent hint">My link</a>
My link
<a href="#" data-hint-position="left" data-hint-class="error" data-hint="My error left hint">My link</a>
My link
<a href="#" data-hint-position="right" data-hint-permanent="true" data-hint="My right permanent hint">My link</a>
My link
<a href="#" class="btn" data-hint-position="top" data-hint-class="success" data-hint="My success hint">My link</a>

Back to top button

Just add <div class="to-top"></div> to your code.

Swipe plugin

The miniSwipe plugin offers a simple way to add swipe movements on any element of the Webpage. It works on any browser supporting the Touch Events (safari mobile, chrome mobile, etc.).

To add a swipe action on an element, apply the miniSwipe plugin on the element on which the touch action will be done, and provide the functions that must be called to their corresponding parameter: swipeUp, swipeDown, swipeLeft and/or swipeRight.

Example (works on tablets and touch-screen mobiles) :
Swipe me


<div id="swipe_demo" style="width:150px;height:150px;background:#ddd;border:1px solid #aaa;">Swipe me </div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#swipe_demo').miniSwipe({
      swipeUp: function(){ $(this).text($(this).text()+'UP ') },
      swipeDown: function(){ $(this).text($(this).text()+'DOWN ') },
      swipeLeft: function(){ $(this).text($(this).text()+'LEFT ') },
      swipeRight: function(){ $(this).text($(this).text()+'RIGHT ') }
    });
  });
</script>

Date picker

The miniDatePicker plugin adds to date, time or datetime inputs, a little picker displayed on a popup allowing an easier selecting. The plugin automatically handles the browser language.

Paramètres :
Parameter Information Default value
type Type of the input (date|time|datetime) date
language The display language for the date/time automatic


Date:
Date: <input type="text" class="date-picker"/>
Time in french:
Time in french: <input type="text" class="date-picker" data-type="time" data-language="fr"/>
Date and time in russian:
Date and time in russian: <input type="text" class="date-picker" data-type="datetime" data-language="ru"/>
Created by Nicolas Thomas, from MangoLight Web agency.