xavier_bs@murviel-info.com  
Lignes de conduite

plugin xbsLeader.js:

Ajoute des lignes de conduite (leaders en anglais) entre deux items. Une ligne de conduite en typographie est une ligne composée d'une série de points conducteurs ou d'un trait de conduite permettant de guider le regard du lecteur entre des éléments d'une ligne lorsque ceux-ci sont séparés par un grand vide. Les lignes de conduite sont utilisées, par exemple, dans les sommaires permettant de relier les titres de chapitre aux numéros de page.

  • Virtuose, Bruno Pochescip. 5
  • Le synchromachintruc, Luce Basseterrep. 20
  • DisPerSion, Ronald Sukenickp. 32
  • La reine jetée aux chiens (Jézabel), Daniel Waltherp. 54
  • Voyage sur les Bords du Monde, Meddy Lignerp. 86
  • Le Hollandais volant, Jean-Jacques Olivierp. 101
  • Les Escarpins, Christine Brignonp. 128

Appliquer sur un <p> ou <li> contenant deux <span>. La ligne de conduite séparera ces deux <span>, l'un à gauche et l'autre à droite. Si le contenu est trop long, celui-ci sera réparti sur plusieurs lignes.

<ul id="leaderEx">
	<li><span>Virtuose, <em>Bruno Pochesci</em></span><span>p. 5</span></li>
	<li><span>Le synchromachintruc, <em>Luce Basseterre</em></span><span>p. 20</span></li>
	<li><span>DisPerSion, <em>Ronald Sukenick</em></span><span>p. 32</span></li>
	<li><span>La reine jetée aux chiens (Jézabel), <em>Daniel Walther</em></span><span>p. 54</span></li>
	<li><span>Voyage sur les Bords du Monde, <em>Meddy Ligner</em></span><span>p. 86</span></li>
	<li><span>Le Hollandais volant, <em>Jean-Jacques Olivier</em></span><span>p. 101</span></li>
	<li><span>Les Escarpins, <em>Christine Brignon</em></span><span>p. 128</span></li>
</ul>

On applique le plugin sur chaque élément <li> contenant les deux items <span> à mettre en relation.

$( document ).ready( function() {
	$( '#leaderEx > li' ).xbsLeader();
});

Il se peut que les lignes de conduite ne se comportent pas comme attendu. Dans ce cas, il faut appliquer le plugin avec un léger retard:

$( document ).ready( function() {
	window.setTimeout( function() {
		$( '#bloc' ).xbsLeader();
	}, 400 );
});

Les options sont les suivantes:

  • margin: Marge entre la ligne de conduite et les items (défaut: 5px),
  • leaderImage: Image png représentant le point de conduite (défaut: point),

Le fichier png par défaut (représentant un point et un espace) est donné en base64:


leaderImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAACCAYAAACQahZdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA'
			+ 'IGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAmSURBVHjaYvz//z8D'
			+ 'DIiKirowMDAYszCgAhcGBgYXAAAAAP//AwCL9gRBLCyCOwAAAABJRU5ErkJggg==',

Exemple d'utilisation: Image png contenant un '+' et un espace.

$( '#bloc' ).xbsLeader({
   margin: '10px',
   leaderImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAHCAYAAAA8sqwkAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA'
		+ 'IGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAFnSURBVHgBAFcBqP4A'
		+ '////AP///wD///8ALCwsVSwsLBH///8A////AP///wD///8A////AP///wD///8AAgAAAAAAAAAA'
		+ 'AAAAAAAAAKoAAAAzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAA'
		+ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABLCwsVQAAAKoAAAAAAAAAAAAAAAAAAAAA'
		+ 'AAAAmtPT02cAAAAAAAAAAAAAAAAAAAAABAAAALwAAABFAAAAAAAAALsAAAB4AAAAzQAAAN4AAAAA'
		+ 'AAAAAAAAAAAAAAAAAAAAAAD///8A////AP///wAsLCz/LCwsRP///wD///8A////AP///wD///8A'
		+ '////AP///wACAAAAAAAAAAAAAAAAAAAAmgAAAN4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'
		+ 'AQAA//+MaEq67er0YwAAAABJRU5ErkJggg=='
});

Il existe de nombreux sites permettant de convertir une image png en base64, comme ici sur ce site: Convertiseur base64

Vous pouvez aussi indiquer le chemin vers une image png. Ex:

leaderImage: 'path/to/monImage.png'\
Navigation par onglets

plugin xbsTabs.js:

Un onglet (tab en anglais) est une étiquette permettant un accès rapide à un contenu. La navigation par onglet dans une page web permet d'inclure un volume important de données et/ou de textes tout en gardant une présentation claire, comme sur la page que vous visualisez en ce moment. Pour chaque plugin, il y a les onglets Présentation, Usage et Options.

Appliquer sur une div dont la structure est la suivante:


<div id="bloc">
<div class="xbsTabs_title">
	<span class="titre">Mon titre 1</span>
	<div class="xbsTabs">
		<a href="#">Lien 1</a>
		<a href="#">Lien 2</a>
		<a href="#">Lien 3</a>
	</div>
</div>
  
<div class="xbsTabs_content">
	<div class="xbsContent">
		--- Contenu 1 ---
	</div>
	<div class="xbsContent">
		--- Contenu 2 ---
	</div>
	<div class="xbsContent">
		--- Contenu 3 ---
	</div>
</div>
</div>

On applique simplement le plugin sur le bloc contenant cette structure

<script>
$(document).ready(function() {
	$("#bloc").xbsTabs();
});
</script>

Les options sont les suivantes:

  • colorBorder: Couleur de la bordure (défaut: gris),
  • colorBar: Couleur de la barre de titre (défaut: gradient bleu),
  • colorTitle: Couleur du titre de la barre (défaut: blanc),
  • fontBar: Police du titre (défaut: police des titres &lgt;h1>,
  • fontItem: Police des liens (défaut: police des paragraphes),
  • visibleTab: N° de l'onglet visible (défaut: 1),
  • colorTabActive: Couleur de fond de la fenêtre et de l'onglet actif (défaut: blanc),
  • colorItemActive: Couleur du lien de l'item actif (défaut: gris),
  • colorTab: Couleur de fond de l'onglet inactif (défaut: transparent),
  • colorItem: Couleur du lien de l'onglet inactif (défaut: blanc),
  • colorTabHover: Couleur de fond de l'onglet survolé (défaut: blanc),
  • colorItemHover: Couleur du lien de l'onglet survolé (défaut: #73880a).

Exemple d'utilisation:

<script>
$("#bloc").xbsTabs({
   colorBar: 'linear-gradient(to bottom, #fcf192 13%,#e5c50d 57%)',
   fontBar: 'Consolas, sans-serif',
   colorTabActive: '#342af8'
});
</script>
Tooltip (info-bulle)

plugin xbsTooltip.js:

Une info-bulle (tooltip en anglais) est un message qui apparaît lors du passage de la souris sur un élément pour donner des informations supplémentaires ou plus précises.

Une info-bulle tire son nom de sa ressemblance avec les bulles des bandes dessinées.

Les infobulles affichaient au départ du texte statique mais les versions les plus récentes des logiciels permettent l’affichage de texte animé ainsi que d’images.

Appliquer sur tout élément <span> suivi du tooltip. La structure est la suivante:

Pour créer un tooltip sur un mot ou une phrase, on encadre le mot avec un <span> à qui l'on donne une classe, par exemple "tooltip" et un data-id qui renvoit à l'id de l'élément à afficher.

Mon tooltip apparaît, c'est le message, il peut inclure un lien.

Ou bien même un formulaire



<p>Pour creer un <span class="tooltip" data-id="tooltip_1">tooltip</span> par l'exemple<p>
<div id="tooltip_1" class="displayTooltip">Mon html dans le tooltip</div>
			

On applique simplement le plugin sur le <span>, ou sur tout autre élément.

<script>
$(document).ready(function() {
	$(".tooltip").xbsTooltip();
});
</script>

On ajoute dans le CSS:

.displayTootip {
	display: none;
}

Ceci afin que le tooltip ne s'affiche pas dès le départ, non pas après que le plugin se soit chargé, mais ce n'est pas absolument nécessaire.

Les options sont les suivantes:

  • background: couleur du fond (défaut: 'rgba(255, 255, 255, 0.8)' -> blanc avec une opacité de 80%),
  • border: couleur de la bordure (défaut: gris '#BFBFBF'),
  • color: couleur du texte (défaut: 'inherit'),
  • fontFamily: police du tooltip (défaut: 'inherit'),
  • fontSize: taille de la police (défaut: '90%'),
  • padding: marges internes (défaut: '5px 10px'),
  • borderRadius: coins arrondis (défaut: 2px),
  • width: largeur du tootip (défaut: 'auto'),
  • maxWidth: largeur maximum (défaut: '150px'),
  • textAlign: alignement du texte (défaut: 'center'),
  • position: position du tooltip: 'top', 'bottom', 'auto' (défaut: 'auto'),

Exemple d'utilisation:

<script>
$("#bloc").xbsTootip({
   background: 'linear-gradient(to bottom, #fcf192 13%,#e5c50d 57%)',
   fontFamily: 'Verdana, sans-serif',
   fontSize: '80%'
});
</script>
Lightbox

plugin xbsLightbox.js:

Une lightbox est un effet qui permet de superposer des images ou tout autre structure HTML sur la page courante. La lightbox apparaît comme une fenêtre centrée et place un filtre sur la page. Je mets un header Je mets un footer avec un lien

Appliquer sur tout élément html. La structure est la suivante:

Pour créer une lightbox sur un mot ou une phrase, on encadre le mot avec un <span> à qui l'on donne une classe, par exemple "lightbox".


<p>
Pour creer une <span class="lightbox" data-id="maLightbox">lightbox</span> par l'exemple
<span class="xbsTitle">Le titre dans le header</span>
<span class="xbsFooter">Le texte dans le footer</span>
<p>
<div id="maLightbox" class="displayLightbox">Mon html dans la lightbox</div>
			

On applique simplement le plugin sur le <span>, ou sur tout autre élément.

<script>
$(document).ready(function() {
	$(".lightbox").xbsLightbox();
});
</script>
			

On ajoute dans le CSS:

.displayLightbox {
display: none;
}					
			

Ceci afin que la lightbox ne s'affiche pas dès le départ, non pas après que le plugin se soit chargé, mais ce n'est pas absolument nécessaire.

Les options sont les suivantes:

  • filterBg: couleur du filtre (défaut: rgba(0, 0, 0, 0.8) -> noir avec une opacité de 80%),
  • zIndexFilter: z-index du filtre (defaut: 10),
  • colorBorder: couleur de la bordure (défaut: #505050 -> gris),
  • colorBar: couleur des barres header et footer (défaut: linear-gradient(to bottom, #FFEEC9 0%, #C9B162 35%) -> gradient or),
  • colorTitle: couleur du texte du header et du footer (défaut: blanc #FFFFFF),
  • fontBar: police du header et du footer (défaut: inherit),
  • padding: marges internes si la lightbox ne contient pas une image unique (défaut: 5px 10px),
  • paddingImg: marges internes si la lightbox ne contient qu'une image unique (défaut: 0),
  • borderRadius: coins arrondis (défaut: 5px),
  • maxWidth: largeur maximum (défaut: 400px), utile si la lightbox n'est pas une image unique
  • scroll: Si à false, la lightbox ne reste pas fixe lors du scrolling de la fenêtre (défaut: 'true'),
  • effectIn: effet à l'ouverture (défaut: fade), (disponibles: blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide et random).
  • speedIn: durée de l'ouverture,
  • effect: à la fermeture,
  • speed: durée de la fermeture,
  • options: options des effets, voir ici,
  • draggable: true ou false, si la lightbox est déplaçable (défaut: true),
  • iframe:: true ou false, si la lightbox contient une iframe (défaut: false). Utile si la lightbox contient une iframe vidéo, afin de stopper la vidéo lors de la fermeture.
  • onLoad: fonction à exécuter à l'ouverture,
  • onClose: fonction à exécuter à la fermeture.

Exemple d'utilisation:

<script>
$("#bloc").xbsLightbox({
   borderRadius: '2px',
   fontBar: 'Verdana, sans-serif',
   effect: 'random'
});
</script>
			
Playlist (player mp3)

plugin xbsPlaylist.js:

Regroupe des fichiers mp3 à jouer dans une playlist, avec la balise HTML5: <audio>.

  • Amaury Vassili, Mike Brandt-Qui saura, ma Co.mp3
  • Christophe-Les paradis perdus.mp3
  • Marc Lavoine-Toi Co, mon amour.mp3
  • UmbertoTozzi-Ti amo Co.mp3

Créer une div contenant les fichiers mp3. La structure est la suivante:

			
<article id="playlist">
<ul>
	<li>Amaury Vassili, Mike Brandt-Qui saura, ma Co.mp3</li>
	<li>Christophe-Les paradis perdus.mp3</li>
	<li>Marc Lavoine-Toi Co, mon amour.mp3</li>
	<li>UmbertoTozzi-Ti amo Co.mp3</li>
</ul>
</article>
						

On applique simplement le plugin sur la <div>, ou ici un article.

<script>
$(document).ready(function() {
	$("#playlist").xbsPlaylist();
});
</script>
			
  • Amaury Vassili, Mike Brandt-Qui saura, ma Co.mp3
  • Christophe-Les paradis perdus.mp3
  • Marc Lavoine-Toi Co, mon amour.mp3
  • UmbertoTozzi-Ti amo Co.mp3

Par defaut, les fichiers sont contenus dans le sous-répertoire "music".

Les options sont les suivantes:

  • title: titre de la playlist (défaut: aucun),
  • fontSizeTitle: taille de la police du titre (defaut: '8px'),
  • fontWeightTitle: poids de la police du titre (défaut: 'inherit'),
  • titleAlign: alignement du titre (défaut: 'center'),
  • path: répertoire contenant les musiques (défaut: 'music/',
  • volume: volume du player (défaut: 0.5),
  • bgHover: couleur de fond au survol des titres de la playlist (défaut: 'rgba(162, 208, 255, 0.7)' -> bleu),
  • bgPlaying: couleur du fond d'un titre joué (défaut: 'rgba(162, 208, 255, 0.3) -> plus clair'),
  • width: largeur de la playlist (défaut: 300px),
  • height: hauteur du lecteur audio (défaut: 30px),
  • fontSize: taille de la police des morceaux de la playlist (défaut: '70%'),
  • number: N° apparents des titres dans la playlist (défaut: false),
  • border: bordure de la playlist (défaut: '1px solid #DFDFDF'),
  • borderRadius: coins arronfis (défaut: '5px', optimum pour Chrome),
  • cursor: forme de la souris au survol des titre (défaut: 'pointer'.

Exemple d'utilisation:

<script>
$("#bloc").xbsPlaylist({
   borderRadius: '2px',
   path: 'http://murviel-info.com/mes_musiques/musiques_sympas/',
   fontSizeTitle: '120%',
});
</script>
			
Loupe

plugin xbsLoupe.js:

Affiche une loupe sur une image pour en révéler les détails.

Vieux Port de Marseille

Créer une div contenant l'image à zoomer avec l'attribut taille qui contient la taille en pourcentage de l'image réduite. La structure est la suivante:

			
<article id="loupe" taille="25%">
<img src="images/VieuxPortMarseille.jpg" alt="Vieux Port de Marseille">
</article>
						

On applique simplement le plugin sur la <div>, ou ici un article.

<script>
$(document).ready(function() {
	$("#loupe").xbsLoupe();
});
</script>
			

Les options sont les suivantes:

  • display: comportement du bloc créé par la loupe (défaut: 'block'),
  • margin: permet de centrer l'image (défaut: 'auto'),
  • float: left ou right (défaut: 'none'),
  • loupeWidth: largeur de la loupe (défaut: '300px'),
  • loupeHeight: hauteur de la loupe (defaut: '300px'),
  • loupeRadius: rayon de la loupe (défaut: '100%'),
  • loupeShadow: ombre de la loupe, pour donner un effet de grossissement (défaut: '0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25)'),

Exemple d'utilisation:

<script>
$("#loupe").xbsPlaylist({
   loupeWidth: '200px',
   loupeHeight: '200px,
   loupeRadius: '50%',
});
</script>