Javascript & Webdesign » Sélecteur

microjs — 200 micro-frameworks Javascript

Bruno Bichet — Sun, 18 Mar 2012 15:59:03 +0000

Microjs.com présente près de 200 frameworks Javascript petits mais costauds. De combien de lignes de code avez-vous besoin pour votre projet de site web : 50K, 100K, 150K ? Ok, nous aimons tous nos bons vieux gros frameworks comme jQuery ou Mootools et nous en tirons souvent le meilleur. Mais combien de fois les avons-nous utilisés à mauvais escient ? Combien de fois avons-nous tenté d’écraser une mouche avec un tank, alors que des solutions bien plus adaptées étaient à notre portée ?

Les micro-frameworks sont le couteau suisse des bibliothèques Javascript. Pour souvent moins de 5 K, ils nous sortent le grand jeu dans leur domaine uniquement, mais il le font bien, sans excès.

Pour trouver le mini-framework dont vous avez besoin, il suffit de sélectionner une des 30 thématiques.

Vous avez besoin de :

Framework multi-fonctions,
Utilitaires DOM,
Templating,
Animations CSS,
Animations Javascript,
Moteur de sélecteur CSS,
Manipulation de données,
Gestion des classes Javascript,
Programmation fonctionnelle,
Chargeur de script,
JSON,
Ajax,
Faire des tests,
Créer des jeux,
Graphiques 2D/Canvas,
Conversion de couleur,
Faire des recherches et trier des listes,
Faire une application en une seule page,
Stockage persistant de données,
MVC côté client,
Détection de fonctionnalités et/ou de navigateurs,
Gestion des événements,
Bibliothèques Webkit,
Bibliothèques mobiles,
Webdesign «responsive»,
Polyfills,
Google Analytics,
Typographie (césures),
Développement asynchrone,
Créer votre framework Javascript,
Créer votre liste de micro-framework ?

→ Envie d’ajouter votre framework Javascript «petit mais costaud» dans cette liste ? Proposez votre projet sur GitHub !

Créez des sélecteurs personnalisés avec jQuery

Bruno Bichet — Mon, 15 Mar 2010 09:10:27 +0000

Custom jQuery Selectors aborde la création de sélecteurs personnalisés au cas où ceux proposés par jQuery ne suffiraient pas. Dans l’exemple donné, il s’agit de parcourir le DOM à la recherche des balises HTML possédant un attribut `rel` renseigné :

$.expr[':'].withRel = function(obj){
    var $this = $(obj);
    return ($this.attr('rel') != '');
};
// Usage:
$('a:withRel').css('background-color', 'yellow');

Lire également Custom jQuery selectors with parameters. Via Un Y@B sur la toile.

Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6

Bruno Bichet — Mon, 21 Dec 2009 15:40:46 +0000

Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément `li` pour émuler la pseudo-classe `:hover` pour Internet Explorer qui ne l’applique que sur les ancres `a`, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur `li:hover` avec la classe`li.sfHover`).

Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

`suckerfish(sfHover, « LI », « nav »);` pour appliquer `:hover` sur un élément `li` placé dans `#nav`.
`suckerfish(sfFocus, « INPUT »);` pour donner le `focus` aux éléments `input`.

Superfish — Menu déroulant avec des morceaux d’accessibilité (délais avant l’ouverture, navigation avec la touche `tab`). Vous pouvez voir ce menu déroulant en action sur css 4 design.

Sélectionner les éléments par leur classe avec getElementsByClassName

Bruno Bichet — Wed, 16 Dec 2009 09:02:10 +0000

Vous le savez sans doute, mais si le DOM propose une fonction pour sélectionner un élément par son id ou son nom, ce n’est pas (encore) le cas pour sélectionner les éléments qui partagent une ou plusieurs classes. C’est là qu’intervient The Ultimate GetElementsByClassName déjà évoqué dans Utillisez le DOM et Javascript comme un chef pour redéfinir le comportement des balises HTML.

Quelques exemples d’utilisation :

- getElementsByClassName("info-links"); — tous les éléments avec la classe info-links,
- getElementsByClassName("col", "div", document.getElementById("container")); — tous les éléments `div` contenus dans `#container` et possédant la classe col,
- getElementsByClassName("pince-me pince-moi"); — tous les éléments avec les classes pince-me et pince-moi.

cssQuery — accédez au DOM

Bruno Bichet — Wed, 09 Dec 2009 06:35:27 +0000

cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3. Alternative à jQuery et autres frameworks Javascript pour accéder aux éléments constitutifs du DOM quelque soit le navigateur pour environ 7 KB !

Quelques exemples d’utilisation :

var tags = cssQuery("body > div"); sélectionne toutes les balises div descendants directement de body,
var images = cssQuery("img", tags); donne la liste des balises img présentes dans la variable tags vue plus haut,
Devinez-donc ce que donne var argh = "p>a:first-child+input[type=text]~span";

DOMAssistant — une bibliothèque Javascript à découvrir

Bruno Bichet — Fri, 04 Dec 2009 04:09:31 +0000

DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse pour lancer des fonctions sur un ensemble d’éléments, par exemple. Supporte les sélecteurs CSS 1, CSS 2 et CSS 3.

Quelques exemples :

$("#container input[type=text]");
$("#navigation a").addEvent("click", myFunc);
$("#news-list").load("updated-news.php");

Cerise sur le gâteau, cette bibliothèque est modulaire et la documentation existe en français. Le poid ? Moins de 10 ko en version compressée.