On a tous tendance à dégainer la bibliothèque Javascript jQuery dès que l’occasion se présente. Or, il faut garder à l’esprit que les fonctions intégrées à Javascript en ont sous le pied ! Des exemples ? L’article Native equivalents of jQuery functions fait un tour rapide quelques fonctions jQuery les plus utilisés avec leur équivalent Javascript « natif » bien plus rapide : sélecteurs, manipulation du DOM, classes CSS, modification des propriétés CSS.
Select2 est un plugin jQuery qui améliore le look & feel et l’ergonomie de vos menus select (recherche, données distantes et scrolling infini parmi les résultats) — dans le même esprit que Chosen. (Merci Emilien).
Select2 est disponible sur GitHub.
Chosen est un plugin Javascript qui rend les longues et indigestes listes select bien plus présentables. Au lieu d’obliger vos utilisateurs à faire défiler toutes les options de vos listes, Chosen leur permet de commencer à saisir le début d’un terme pour n’afficher que les résultats pertinents, à valider d’un clic de souris ou via la touche Enter.
→ Chosen est disponible sur GitHub.
DIYSlider est un script jQuery léger et personnalisable dont le but est de servir de fondations à vos développements de… sliders ! Quelques exemples d’utilisation ici ou là. Le principe est de transformer une série de div en diaporama avec une foultitude d’options, de méthodes et d’évènements, pour une modique taille de 3,56 kb ou 1,14 kb gzippé !
→ DIYSlider est disponible sur Github.
Simple HTML DOM est un script PHP qui permet de parcourir une page web pour y rechercher n’importe quel élément, aussi simplement qu’avec jQuery. Une ligne suffit pour extraire le contenu qui vous intéresse !
Avec Simple HTML DOM, il est possible de :
Ainsi, pour rechercher tous les articles présents sur une page, il suffit de quelques lignes, comme par exemple :
// Create DOM from URL
$html = file_get_html('http://slashdot.org/');
// Find all article blocks
foreach($html->find('div.article') as $article) {
$item['title'] = $article->find('div.title', 0) ->plaintext;
$item['intro'] = $article->find('div.intro', 0) ->plaintext;
$item['details'] = $article->find('div.details', 0)->plaintext;
$articles[] = $item;
}
print_r($articles);
Le site propose de nombreux exemples d’utilisation. Toutefois, vous trouverez chez David Walsh un exemple complet pour vérifier si des pages web on été modifiées et vous envoyer un mail le cas échéant.
→ Simple HTML DOM est sur Sourgeforge.
Voir aussi phpQuery pour sélectionner les éléments du DOM côté serveur (via @c2c)
Shapeshift — très largement inspiré par jQuery Masonry — est un plugin jQuery qui permet de réarranger dynamiquement une collection d’éléments dans une grille au sein d’un container parent. Un exemple de ce comportement existe sur le célèbre Pinterest. Possibilité de faire du Drag & Drop avec les éléments si jQuery UI Draggable / Droppable sont installés. Nécessite également jQuery Touch Punch pour fonctionner sur les périphériques Touch.
→ Rendez-vous sur la démo de Shapeshift.
jsPDF est une bibliothèque créée par @MrRio qui nous propose de nombreuses fonctions permettant de générer du PDF. Écrite en Javascript, cette librairie ne sollicite pas le serveur : tout se passe côté client. jsPDF semble idéal pour générer des PDF pour les rapports, les certificats, les tickets et tout ce que vous pourrez imaginer.
Comment ça marche ? Il suffit d’inclure le script entre les balises <head> de votre page web. Fonctionne avec IE6+, Firefox 3+, Chrome, Safari 3+, Opera. Pour les versions inférieures à IE9 le script utilise un objet Flash pour permettre le téléchargement des fichiers PDF.
→ jsPDF est disponible sur Github.
Liquid Slider est un Slider jQuery (avec des morceaux de HTML5 dedans) conçu avec les contraintes des périphériques mobile à l’esprit pour assurer à vos contenus un affichage optimum quelque soit la taille ou la résolution de l’écran de vos visiteurs.
Parmi les fonctionnalités, nous trouvons :
→ Liquid Slider est disponible sur Github.
AngularJS est un framework Javascript créé par Google qui ambitionne de faciliter le développement d’applications HTML, mieux que ne le font les frameworks Javascript existants. En effet, aucun d’entre eux n’a totalement résolu le problème du HTML qui n’a pas été prévu pour être dynamique. Mieux que jQuery ? Oui, avec AngularJS, il n’y a plus de manipulations de DOM. Le code est limité au strict minimum.
Voyez plutôt :
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
→ AngularJS est disponible sur Github.
jQuery++ est un ensemble de fonctions de bas niveau qui étend les fonctions de jQuery. jQuery++ propose deux grandes familles de fonctions : manipulation du DOM et gestion des évènements. Chaque fonctionnalité est disponible à l’unité pour éviter d’alourdir la facture !
jQuery++ est disponible sur Github
Via Arnaud-k