Informations
N'hésitez pas à nous rejoindre, plus on est de fous plus on jQuery !
Abonnement
Participer
Membres
Je reviens de nouveau avec jQuery, cette fois-ci avec un plugin nommé « Selected text searcher« . C’est un plugin qui va permettre de rajouter une sorte de tooltip lors de la sélection d’un texte que vous aurez préalablement déterminé.
En fait, vous allez pouvoir y mettre des liens dans la tooltip, des liens avec favicon du site si vous le souhaitez. Vous pourrez y mettre un titre, du contenu et des éléments de recherche ou d’envoi.
Par exemple pour ajouter des éléments de partage :
code js :
lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/sharer.php?t=%s&u=http://google.com,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
extraClass: 'dark',
title: 'Share this text ...',
borderColor: '#00ccff',
hoverColor: '#FFFFCC'
});
et le html :
On peut remarquer l’attribut favicon, pour ajouter automatiquement le favicon du site en question.
Pour effectuer des recherches sur un lieu, via googlemaps ou wikipédia par exemple :
code js :
lists:"Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
title: 'Search this text ...',
borderColor: '#009900',
hoverColor: '#FFFFCC'
});
code html :
Pour plus d’informations :
Le site du plugin
La démo
Articles qui peuvent vous intéresser :
- jQuery – Afficher une adresse mail sans être spammé
- Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant
- Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos
- Pajinate – Plugin jQuery – La pagination en javascript
- jQuery – 20 plugins jQuery à retenir
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Bienvenue dans ce second chapitre consacré aux attributs en JQUERY.
Je vous souhaite un bon visionnage 
Have Fun !
En me baladant sur le net, je suis tombé sur un petit article sur le blog de Victor Coulon, qui explique d’une manière simple une petite astuce en jQuery sur comment camoufler son adresse mail aux yeux des robots spammeurs, mais pas à ceux des internautes.
Voici donc l’astuce :
Le code jQuery nécessaire :
$(document).ready(function(){
$('.nospam').each(function(){
var email = $(this).html();
email = email.replace("[arobase]","@");
email = email.replace("[point]",".");
$(this).html("<a href=\"mailto:"+email+"\">"+email+"</a>");
});
});
</script>
Et l’affichage HTML :
Articles qui peuvent vous intéresser :
- Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant
- Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos
- Pajinate – Plugin jQuery – La pagination en javascript
- jQuery – 20 plugins jQuery à retenir
- jqIsoText – Plugin jQuery – Effet de texte isométrique
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
jQuery est un framework agréable et très apprécié des développeurs, notamment grâce à une fluidité et une maniabilité améliorée de coder en javascript. Et je suis tombé sur un tutoriel vraiment bluffant sur les possibilités données via jQuery et l’imagination de développeurs.
Avec Sponsor Flip Wall, vous allez pouvoir réaliser un mur de sponsors, ou autre, avec comme effet, qu’au clique la cellule d’image du sponsor sélectionné se retourne pour dévoiler des informations et un lien. Bien entendu tout ceci peut être adapté et l’effet, que l’on retrouve souvent dans des animations flash, est plutôt fluide et très agréable.
Avec un peu de code PHP, CSS et javascript on peut arriver à ce résultat.
Un fichier css style.css :
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}
.sponsorListHolder{
margin-bottom:30px;
}
.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background:url("img/background.jpg") no-repeat center center #f9f9f9;
}
.sponsorFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.sponsorFlip img{
/* Centering the logo image in the middle of the .sponsorFlip div */
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}
.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}
.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}
.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}
.clear{
/* This class clears the floats */
clear:both;
}
Un fichier php demo.php avec :
// Each sponsor is an element of the $sponsors array:
$sponsors = array(
array('facebook','The biggest social..','http://www.facebook.com/'),
array('adobe','The leading software de..','http://www.adobe.com/'),
array('microsoft','One of the top software c..','http://www.microsoft.com/'),
array('sony','A global multibillion electronics..','http://www.sony.com/'),
array('dell','One of the biggest computer develo..','http://www.dell.com/'),
array('ebay','The biggest online auction and..','http://www.ebay.com/'),
array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
array('google','The company that redefined w..','http://www.google.com/'),
array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
array('mysql','The most popular open source dat..','http://www.mysql.com/'),
array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
array('cisco','The biggest networking and co..','http://www.cisco.com/'),
array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);
// Randomizing the order of sponsors:
shuffle($sponsors);
// Looping through the array:
foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
</div>
<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
<a href="'.$company[2].'">'.$company[2].'</a>
</div>
</div>
</div>
';
}
?>
Et du javascript dans un fichier script.js :
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
Bien entendu tout le code ici n’est pas complet, pour télécharger le code complet, rendez vous ici.
Démonstration
Source et tutoriel
Articles qui peuvent vous intéresser :
- Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos
- Pajinate – Plugin jQuery – La pagination en javascript
- jQuery – 20 plugins jQuery à retenir
- jqIsoText – Plugin jQuery – Effet de texte isométrique
- YoxView – Plugin jQuery – Une lightbox améliorée
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Impressionnante cette carte cliquable de l’Europe !
Pas coté graphique bien sur mais jeter un coup d’oeil au code source pour y découvrir le css et les quelques lignes de javascript utilisé (avec jQuery bien sûr 
).
Y’a eu du boulot pour arriver à ce résultat.
Liens :
Nous allons voir ensemble dans ce tutoriel les sélecteurs en JQUERY.
