Formamotion, un site de tutoriels vidéos en français, propose un tuto vidéo de 12 minutes expliquant l’utilisation du plugin JQuery Uploadify permettant l’upload multiple de fichiers.

Ce tutoriel explique l’utilisation du plugin et (le plus important) sa mise en place et sa configuration. Les 3 premières minutes où le plugin est présenté ne sont pas franchement très utiles contrairement aux explications qui arrivent après.

(j’ai rencontré des problèmes pour l’insertion de la vidéo en utilisant le code proposé par formamotion, chez moi elle ne fonctionne pas sous Firefox – Linux, tu peux toujours la lire sur le site)

Enfin, tu peux également les 4 autres tutoriels vidéos disponibles sur le site en y faisant une recherche sur le mot JQuery !

Pas encore de billet sur le même sujet !

Chose promis, chose due, voici un tutorial pour faire un formulaire de recherche en Ajax avec JQuery et PHP. Idéal si vous avez envie de copier Google Instant, ce type de formulaire permet de faire gagner du temps à vos internautes. Et comme on commence à en voir un peu partout (Google, Youtube, Itunes…), il risque de devenir un standard.

Donc, comme d’habitude, j’ai préparé une démo du tutorial :
Demo

Et c’est parti pour le code. On attaque donc par le code HTML de la page. On prépare le formulaire simplement, j’ai opté pour que l’on n’affiche pas le bouton soumission du formulaire. Et on ajoute un bloc vide, celui-ci contiendra les résultats éventuels.

<!--debut du formulaire-->
<form class="ajax" action="search.php" method="get">
	<p>
		<label for="q">Rechercher un article</label>
		<input type="text" name="q" id="q" />
	</p>
</form>
<!--fin du formulaire-->
 
<!--preparation de l'affichage des resultats-->
<div id="results"></div>

Ensuite le gros du code, le code JavaScript utilisant JQuery :

$(document).ready( function() {
  // détection de la saisie dans le champ de recherche
  $('#q').keyup( function(){
    $field = $(this);
    $('#results').html(''); // on vide les resultats
    $('#ajax-loader').remove(); // on retire le loader
 
    // on commence à traiter à partir du 2ème caractère saisie
    if( $field.val().length > 1 )
    {
      // on envoie la valeur recherché en GET au fichier de traitement
      $.ajax({
  	type : 'GET', // envoi des données en GET ou POST
	url : 'ajax-search.php' , // url du fichier de traitement
	data : 'q='+$(this).val() , // données à envoyer en  GET ou POST
	beforeSend : function() { // traitements JS à faire AVANT l'envoi
		$field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
	},
	success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
		$('#ajax-loader').remove(); // on enleve le loader
		$('#results').html(data); // affichage des résultats dans le bloc
	}
      });
    }		
  });
});

Et enfin le code du fichier « ajax-search.php » effectuant la recherche et le renvoi des éléments :

<?php
//connexion à la base de données 
define('DB_NAME', 'nom_de_la_base');
define('DB_USER', 'nom_utilisateur');
define('DB_PASSWORD', 'mot_de_passe');
define('DB_HOST', 'localhost');
 
$link   =   mysql_connect( DB_HOST , DB_USER , DB_PASSWORD );
mysql_select_db( DB_NAME , $link );
 
//recherche des résultats dans la base de données
$result =   mysql_query( 'SELECT post_title , post_date , guid
                          FROM wp_posts
                          WHERE post_status = \'publish\'
                          AND post_title LIKE \'' . safe( $_GET['q'] ) . '%\'
                          LIMIT 0,20' );
 
// affichage d'un message "pas de résultats"
if( mysql_num_rows( $result ) == 0 )
{
?>
    <h3 style="text-align:center; margin:10px 0;">Pas de r&eacute;sultats pour cette recherche</h3>
<?php
}
else
{
    // parcours et affichage des résultats
    while( $post = mysql_fetch_object( $result ))
    {
    ?>
        <div class="article-result">
            <h3><a href="<?php echo $post->guid; ?>">< ?php echo utf8_encode( $post->post_title ); ?></a></h3>
            <p class="date"><?php echo $post->post_date; ?></p>
            <p class="url"><?php echo $post->guid; ?></p>
        </div>
    <?php
    }
}
 
/*****
fonctions
*****/
function safe($var)
{
	$var = mysql_real_escape_string($var);
	$var = addcslashes($var, '%_');
	$var = trim($var);
	$var = htmlspecialchars($var);
	return $var;
}
?>

Voilà, c’est tout pour ce tutoriel. Après il peut encore être optimisé en ajoutant des suggestions (toujours à la Google ). Mais on verra ça une autre fois !

Pas encore de billet sur le même sujet !

Marcofolio propose sur son blog un tutorial JQuery pour créer un « theatrical movie trailer » (que j’ai librement traduit en « bande-annonce de film »). Le résultat final est assez bluffant, on croirait une vraei animation flash ! Avec des fondus enchainés, avec du texte qui bouge…

Je pense juste que le poids total de l’anim est plus lourd que si elle avait été fait en flash, mais elle disponible même sans le flash (sur l’Iphone par exemple).

Une démo est disponible sur le blog ainsi que le tutorial (tout le code est également dispo en téléchargement).

Pas encore de billet sur le même sujet !

Le plugin JQuery Tweetable permet d’afficher le flux de tweets d’un membre de Twitter ultra-facilement ! En effet pour cela il suffit simplement de créer un <div> vide en lui donnant un id (ici l’id est égal à « tweetable ») :

1

<div id="tweetable"></div>

Il faut ensuite importer le framework JQuery ainsi que le plugin dans la page HTML souhaité :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tweetable.js"></script>

Et enfin, il faut initialiser le plugin en sélectionnant le div voulu et en passant en option le nom d’utilisateur :

1
2
3
4
5
6
7

$(document).ready( function () {
		$('#tweetable').tweetable({ // on applique le plugin tweetable le bloc ayant pour id "tweetable"
                           username: 'arnaudk', // le nom d'utilisateur du flux Twitter à afficher
                           time: true,  // pour afficher ou non la date des tweets (date en anglais)
                           limit: 20 // nombre de tweets à afficher
                });
});

En bonus on peut ajouter quelques styles au code généré par le plugin JQuery :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#tweetable li {
	font-size:13px;
	background:url(images/twitter.png) no-repeat left ;
	padding-left:20px;
	margin-left:10px;
	margin-top:8px;
	list-style-type:none;
	border-bottom:1px dotted #333;
}
 
#tweetable .hash { 
        color:#0066CC; 
} 
 
#tweetable .reply { 
        color:#0066CC; 
}

Comme d’hab, j’ai préparé une petite démo avec le flux de mon Twitter (arnaudk). A noter que le plugin a été fait par theodin et est dispo en téléchargement sur son blog !
voir la demo de tweetable

Pas encore de billet sur le même sujet !

Sur le blog aaronweyenberg.com, Aaron propose un bon tutorial pour personnaliser les cases à cocher (de type checkbox) en utilisant JQuery et le CSS. Le résultat obtenu est bien pensé et très graphique.

Il y a tous le code nécessaire dans le tutoriel : HTML, CSS et JQuery. Le JQuery est bien commenté donc pas de problèmes pour comprendre le code ou pour une éventuelle adaptation. Of course, le tutoriel est en anglais et il une démo est disponible.

Voir la démo

Pas encore de billet sur le même sujet !

Tutorial JQuery trouvé sur le blog devirtuoso : créer un nuage de tag en (pseudo) 3d. Le tutorial (en anglais) est bien expliqué et donne tout le code HTML, CSS et JQuery. Il est très simple de reproduire (ou de repartir) du code donné, le code étant propre.

L’effet ainsi réalisé peut être une très bonn alternative au plugin pour flash (wp-cumulus pour WordPress) qui affiche aussi un nuage de tags en 3d. Mais cela reste du flash avec les désagréments que l’on connaît (la SEO notamment). Mais wp-cumulus reste au final plus joli et plus ergonomique.

A noter que l’on trouve aussi sur le blog une variante avec un effet de « vagues » (sympa mais pas très ergonomique !)

Pas encore de billet sur le même sujet !

Le plugin JQuery Slideshow permet de créer un diaporama très simplement. Il n’y a qu’un seul effet de transition : le fondu enchainé (fadeIn/fadeOut) et un seul à paramètre à régler : le temps de défilement des images.

Pour le code HTML, c’est tout ce qu’il y a de plus simple, on prend un bloc (auquel on donne un id pour le sélectionner avec JQuery) dans lequel on ajoute des images (avec la balise… <img /> !) :

1
2
3
4
5
6
7
8
9

<div id="slideshow">
	<img src="image1.jpg" alt="image 1" />
	<img src="image2.jpg" alt="image 2" />
	<img src="image3.jpg" alt="image 3" />
	<img src="image4.jpg" alt="image 4" />
	<img src="image5.jpg" alt="image 5" />
	<img src="image6.jpg" alt="image 6" />
	<img src="image7.jpg" alt="image 7" />
</div>

Et pour le JQuery, c’est aussi simple car il n’y a qu’un seul paramètre. Le plugin Slideshow s’occupe de tout le reste :

1
2
3
4
5

$(document).ready(function() {
	$('#slideshow').slideshow({ // on applique le diaporama sur le bloc ayant pour id 'slideshow'
		timeout: 1500 // chaque image restera affiché 1 500 millisecondes (soit 1.5 seconde)
	});
});

Un plugin tout simple mais diablement efficace !

Pas encore de billet sur le même sujet !