WebStylePosition

voici un plugin tout simple pour faire apparaitre un tooltip customizable basique

dans le head

<script type=”text/javascript” src=”lib/jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”plugin/jquery.tooltip.js”></script>
<link rel=”stylesheet” href=”css/jquery.tooltip.css” type=”text/css” />
<script type=”text/javascript”>
$(function(){
$(’#tooltip1′).tooltip();
});

</script>

dans le body

<div>
<span id=”tooltip1″>Essai sur toolTip</span>
</div>

le plugin est customizable, voici les différentes propriétés (avec leur valeur par défaut)

•  color: ‘#000′
• border: ‘1px solid #ddd’,
• backgroundColor: ‘#f7f7f7′,
• fontFamily: ‘verdana’,
• fontSize:’10px’,
• padding:’5px’

voici les sources et une démo

le css

le plugin

la démo

Share This

voici un plugin que j’ai créé vite fait pour la validation des formats d’email pour un input text

dans le head

<script type=”text/javascript” src=”plugin/jquery.validatorEmail.js”></script>
<link rel=”stylesheet” href=”css/jquery.validatorEmail.css” type=”text/css” />

<script type=”text/javascript”>
$(function(){
$(’#email’).validatorEmail();
});

</script>

et dans le body

<div>
<input type=”text” id=”email” name=”email”/>
</div>

voila

++

le plugin

le css

la démo

Share This

Bonjour a tous,

Je m’intéresse de plus en plus à jQuery et je l’utilise à mon travail ( projet 24/24 actu pour Orange )

Je commence à mettre en place des plugins et je vous en propose un, qui sera je pense, très utile pour les personnes voulant apprendre à créer un plugin sous jQuery et pour les personnes qui souhaiterait un menu à 1 niveau pour leur site.

Son utilisation en est très simple

( j’utilise la version 1.3.1 de jQuery )

dans le head

…
<script type=”text/javascript” src=”lib/jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”plugin/jquery.simpleMenu.js”></script>
…

ensuite dans le corps html, mettezun structure ul, li

<ul class=”simpleMenu”>
<li>Allemagne</li>
<li>Belgique</li>
<li>Espagne</li>
<li>France</li>
<li>Italie</li>
<li>Suisse</li>
</ul>

enfin dans le head à nouveau, après la déclaration de l’appel des script, insérez les lignes de codes suivantes

<script type=”text/javascript”>
$(function(){
$(’.simpleMenu’).simpleMenu();
});
</script>

Bien sur ce plugin a plusieurs propriétés

<script type=”text/javascript”>
$(function(){
$(’.simpleMenu’).simpleMenu({
position : ‘horizontal’,               // alignement vertical ou horizontal
padding : ‘5px 5px 5px 5px’,    // espacement dans l’élément
background : ‘#ddd’,                // couleur arriere plan
backgroundHover : ‘#000′,      // couleur arriere plan sur rollOver
color : ‘#000′,                          // couleur du texte
colorHover : ‘#fff’,                    // couleur du texte sur rollOver
bold : ‘normal’,                        // mise en gras ou nom
boldHover: ‘bold’,                    // mise en gras ou nom sur rollOver
textAlign : ‘center’,                 // alignement du texte
family : ‘verdana’,                   // type de police pour le texte
fontSize: ‘9px’                        // taille de la police
});
});
</script>

librairie jQuery utilisé

plugin simpleMenu

et voici un exemple

A vous de continuer en ajoutant les liens et tout ce qui vous sera utile pour en faire un menu!

++

Share This