Composants - Documentation

Onglets
Fil d'Ariane
Pagination
Boîtes de messages
Liste déroulante
Diaporama
Fenêtres modales
Infobulles
Bouton "revenir en haut"
Plugin Swipe
Sélecteur de date

Vous pouvez ajouter des onglets sur votre site.

Exemple :

Chien 1
Chien 2
Chien 3

<ul class="tabs">
	<li class="active"><a href="#tab1">Chien 1</a></li>
	<li><a href="#tab2">Chien 2</a></li>
	<li><a href="#tab3">Chien 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>

Vous pouvez ajouter un fil d'Ariane à votre site en utilisant une liste ul avec la classe .breadcrumb.

Exemple :
ou

<ul class="breadcrumb">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Animaux</a></li>
	<li><a href="#">Chiens</a></li>
	<li><a href="#">Carlins</a></li>
</ul>
ou
<ul class="breadcrumb">
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Animaux</a></li>
	<li><a href="#">Chiens</a></li>
	<li class="active">Carlins</li>
</ul>

Pagination

Vous pouvez ajouter une pagination à votre site à l'aide d'une liste ul contenue dans une div ayant la classe .pagination.

Exemple :

Demo 1
Demo 2

<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>

Boîte de messages

Vous pouvez ajouter des styles pour des éléments d'information, d'alertes et d'erreur en leur ajoutant les classes .info, .warning et .error.

Exemple :
Divs :

Je suis une info

Je suis une alerte

Je suis une erreur

Je suis un succès

Formulaires :

C'est un petit plugin jQuery permettant de créer des menus déroulants en cliquant sur un élément.
Si vous voulez créer un lien avec une liste déroulante, ajoutez un attribut data-dropdown avec la référence vers la liste déroulante.
Le plugin peut aussi être utilisé sur des éléments select pour améliorer leur usabilité, vous n'avez juste qu'à ajouter la class .dropdown.

Paramètres :

Paramètre	Information	Valeur par défaut
columns	Nombre de colonnes. Vous pouvez le définir en renseignant l'attribut "data-columns".	1 (3 pour les éléments select)
scroll	Permet le scrolling sur les éléments de liste. Si false, la liste va afficher tous les éléments. Vous pouvez le définir en renseignant l'attribut "data-scroll".	false (true pour les éléments select)
width	Largeur de la liste. Vous pouvez le définir en renseignant l'attribut "data-width" (px\|'auto'\|'parent').	auto (parent pour les éléments select)

Demo 1
Demo 2
Demo 3

Liste déroulante simple

<a href="#" data-dropdown="#dropdown1">Liste déroulante simple</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');">Supprimer</a></li>
</ul>

Liste déroulante avec 2 colonnes

<a href="#" data-dropdown="#dropdown2" data-columns="2">Liste déroulante avec 2 colonnes</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');">Supprimer</a></li>
</ul>

Liste déroulante pour un élément select.

<select name="birthdate_month" class="dropdown">
	<option value="1">Janvier</option>
	<option value="2">Février</option>
	<option value="3">Mars</option>
	<option value="4">Avril</option>
	<option value="5">Mai</option>
	<option value="6">Juin</option>
	<option value="7">Juillet</option>
	<option value="8">Août</option>
	<option value="9">Septembre</option>
	<option value="10">Octobre</option>
	<option value="11">Novembre</option>
	<option value="12">Décembre</option>
</select>

Vous pouvez créer simplement des diaporamas. Pour cela, créez une div.carousel contenant un <ul> et un ensemble de li.
Vous pouvez ajouter des légendes dans les li avec des div.carousel-caption.

Vous avez le choix entre un mode de transition par défilement ou par fondu.

Défilement
Fondu

Première légende

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Seconde légende

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Troisème légende

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="carousel" data-mode="slide" data-indicators="false" data-delay="3000" data-stoponhover="false">
   <ul>
      <li>
         <img src="img/slider1.jpg"/>
         <div class="carousel-caption">
            <h4>Première légende</h4>
            <p>Cras justo odio...</p>
         </div>
      </li>
      ...
   </ul>
</div>

Première légende

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Seconde légende

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Troisème légende

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="carousel" data-mode="fade" data-arrows="false" data-auto="false">
   <ul>
      <li>
         <img src="img/slider1.jpg"/>
         <div class="carousel-caption">
            <h4>Première légende</h4>
            <p>Cras justo odio...</p>
         </div>
      </li>
      ...
   </ul>
</div>

Vous pouvez aussi utiliser le plugin jQuery directement.

Paramètres :

Paramètre	Information	Valeur par défaut
mode	Mode de transition (slide ou fade)	slide
arrows	Afficher les flèches de contrôle	true
indicators	Afficher les indicateurs	false
auto	Changer automatiquement les diapos	true
delay	Delai entre chaque diapo (en ms)	5000
stoponhover	Arrêter le défilement automatique si la souris survole le diaporama	true

Les fenêtres modales permettent d'afficher des dialogues sous forme de pop-pup dans la page.

Demo 1
Demo 2

Fenêtre modale simple

<a class="btn" href="#" data-modal="#modal_target1">Fenêtre modale simple</a>
   <div class="modal span5" id="modal_target1">
      <div class="modal-title"><h5>Mon titre</h5> <div class="close">&times;</div></div>
      <div class="modal-content">Test bonjour</div>
      <div class="modal-footer"><input type="button" class="btn" value="Annuler" onclick="javascript:$('#modal_target1').trigger('close');"/> <input type="button" class="btn blue" value="Valider" onclick="javascript:$('#modal_target1').trigger('close');"/></div>
   </div>

Fenêtre modale avec ajax

<a class="btn" href="ajax.html" data-modal="ajax" data-title="Fenêtre modale avec ajax">Fenêtre modale avec ajax</a>

Ministrap propose des infobulles simples en jQuery. C'est très facile à mettre en place, vous avez juste à ajouter la classe .hint à votre élément, et ajouter un attribut data-hint avec le contenu de l'infobulle. Vous pouvez personnaliser votre infobulle avec les attributes data-hint-position, data-hint-presistent et data-hint-class.

Exemples :

Infobulle	Code
Mon lien	<a href="#" data-hint="Mon infobulle normale">Mon lien</a>
Mon lien	<a href="#" data-hint-position="bottom" data-hint-permanent="true" data-hint-class="info" data-hint="Mon infobulle d'info permanente en bas">Mon lien</a>
Mon lien	<a href="#" data-hint-position="left" data-hint-class="error" data-hint="Mon infobulle d'erreur à gauche">Mon lien</a>
Mon lien	<a href="#" data-hint-position="right" data-hint-permanent="true" data-hint="Mon infobulle permanente à droite">Mon lien</a>
Mon lien	<a href="#" class="btn" data-hint-position="top" data-hint-class="success" data-hint="Mon infobulle de succès">Mon lien</a>

Ajoutez simplement <div class="to-top"></div> à votre code. Le plugin miniSwipe offre un moyen simple d'ajouter des mouvement de swipe (balayage avec le doigt) sur un élément de la page Web. Il fonctionne sur tous les navigateurs implémentant les Touch Events (safari mobile, chrome mobile, etc.).

Pour ajouter une action de swipe à un élément, appliquez le plugin sur cet élément, et fournissez les fonctions qui doivent être appelées au paramètre leur correspondant : swipeUp, swipeDown, swipeLeft et/ou swipeRight.

Exemple (fonctionne sur tablettes et smartphones) :

Balayez-moi

<div id="swipe_demo" style="width:150px;height:150px;background:#ddd;border:1px solid #aaa;">Balayez-moi </div>
<script type="text/javascript">
  $(document).ready(function(){
    $('#swipe_demo').miniSwipe({
      swipeUp: function(){ $(this).text($(this).text()+'HAUT ') },
      swipeDown: function(){ $(this).text($(this).text()+'BAS ') },
      swipeLeft: function(){ $(this).text($(this).text()+'GAUCHE ') },
      swipeRight: function(){ $(this).text($(this).text()+'DROITE ') }
    });
  });
</script>

Le plugin miniDatePicker ajoute aux champs de texte contenant une date, une heure ou un ensemble date et heure, un petit sélécteur qui s'affiche en popup et qui permet une saisie plus facile. Le plugin gère automatiquement la langue définie par le navigateur.

Paramètres :

Paramètre	Information	Valeur par défaut
type	Le type de champ (date\|time\|datetime)	date
language	La langue d'affichage de la date/heure	automatique

Demo 1
Demo 2
Demo 3

Date :

Date : <input type="text" class="date-picker"/>

Heure en anglais :

Heure en anglais : <input type="text" class="date-picker" data-type="time" data-language="en"/>

Date et heure en russe :

Date et heure en russe : <input type="text" class="date-picker" data-type="datetime" data-language="ru"/>

Onglets

Fil d'Ariane

Pagination

Boîte de messages

Liste déroulante

Diaporama

Première légende

Seconde légende

Troisème légende

Première légende

Seconde légende

Troisème légende

Fenêtres modales

Mon titre

Infobulles

Bouton "revenir en haut"

Plugin Swipe

Sélecteur de date