elRTE – L’éditeur de texte enrichi WYSIWYG nouvelle génération

Pourquoi nouvelle génération ? Euh…parce que…ben….c’est parce que j’ai envie de donner ce titre.

Trêve de plaisanterie, j’avais envie de bloguer sur ce nouvel éditeur de texte enrichi WysiWYG qui va bientôt se classer dans le rang des grands tels que tinymce, ckeditor, rtehtmlarea… Cet éditeur s’appelle elRTE.

Il s’agit d’un éditeur enrichi opensource créé avec jQuery et utilise jQuery UI pour les fonctionnalités avancées et supplémentaires.

Comme les grands RTE, en plus d’être rapide et facile à mettre en place, il est possible :

• d’Avoir une barre d’outils personnalisée.
• de Contrôler l’apparence de l’éditeur avec des CSS.
• de créer des extensions.
• de l’utiliser dans plusieurs langues.

L’autre grand atout par rapport aux autres éditeurs RTE est qu’il est accompagné nativement de elFinder, le gestionnaire de fichier opensource créé par l’éditeur même du RTE.  Il est à noter que ce gestionnaire peut être utilisé indépendamment de l’éditeur.

Je noterai quand même un point pour lequel je n’ai pas trop apprécié par rapport aux autres RTE.  Au lieu d’éxecuter ou de remplacer la valeur d’un champ de texte multiligne, cet éditeur remplace la valeur d’une DIV qu’on lui donne en paramètre lors du chargement.

Pour tester >>

Nivo Slider – Pareil que jQueryTransition mais en mieux…

Nivo Slider fait partie de ces plugins jQuery qui permet de faire des effets de transitions sympathiques. Récemment j’ai rédigé un billet sur jQueryTransition un autre plugin avec les mêmes fonctionnalités.

9 effets (8 pour jQTrans), possibilité d’ajouter une légende dans l’attribut title de l’image (attribut alt pour jQTrans), une barre permet d’aller directement à une image dans les 2 plugins, pèse 6Ko.

Pour rappel, c’est le fameux Smoothgallery (fait en mootools) qui a ouvert cette voie des sliders en javascripts. Depuis, plusieurs plugins ont été créés de part et d’autre sur Internet.

jqFancyTransitions – Transitions d’images en jQuery

jQFancyTransitions est un plugin qui permet de faire des transitions d’images avec 8 effets différents et magiques en jQuery.

La mise en place du plugin est très facile, basique pour un développeur connaissant déjà jQuery. Les images sont placés simultanément dans une balise de type block telle que <div> par exemple.

En plus des 8 effets, il est également possible de paramétrer la largeur et la hauteur du bloc de transition, le degré de transparence du titre, le délai entre chaque effet..

Ketchup Plugin jQuery – valider le formulaire à la volée.

keytchup est un plugin jQuery qui permet de valider un formulaire Html à la volée en Front.

Ce plugin est très flexible, peut être étendu facilement en ce qui concerne l’apparence et les fonctionnalités.

Pour qu’il puisse fonctionner, les javascript suivants doivent être ajoutés :

• jQuery
• Keytchup
• Keytchup.message
• keytchup.validation

Quicksand trie et arrange grâce à jQuery

Quicksand est un plugin jQuery qui a la particularité de faire un tri, filtre des données en ajoutant des effets de transitions shuffle lors de l’animation.

Il est possible de faire ces manipulations sur des données de type textes, images ou les 2 en même temps. L’apparence et les démonstrations visibles sur le site internet de l’éditeur ressemblent beaucoup aux Interfaces utilisateurs de MacOS.

jQuery peut faire des captures d’écran

Ils appellent ça un photoshoot. Le résultat est impréssionant, et ce qui m’épate le plus est que c’est jQuery qui est derrière tout celà.

Admirez le résultat :

Uniform – Rendre l’apparence des formulaires attractives

Uniform, fait partie de ces scripts javascript qui permet de skinner les champs de formulaires HTML.  Me direz vous que ceci est déjà le cas depuis quelques années depuis la possibilité offerte par les css.

Cette fois-ci j’aborde un sujet tout à fait différent, puisqu’il s’agit de modifier complettement l’apparence des formulaires avec des thèmes, qui se rapprochent le plus des interfaces riches. On entre vraiment dans l’ère des RIA.  Cette modification d’apparence se fait grâce à la puissance de jQuery.

Ce n’est pas la première fois qu’on découvre ce genre de script. D’autres scripts comme : jNice, jQtransform, Stylish select, jQuery checkbox, Custom se sont déjà lancés dans l’aventure.

Tableur avec jQuery.sheet

Nous l’avons revé il y a quelques années, Google l’a fait pour nous en concevant GDOCS une application bureautique complette qui relie à la fois traitement de texte, tableur, et présentation type powerpoint.

D’autres solutions du même type existent déjà. Ces outils sont plus ou moins propriétaires.

jQuery.Sheet est une librairie faite en jQuery, qui a donc l’avantage d’être OpenSource. Cette librairie permet de créer un tableur facilement. En plus de la mise à disposition des colonnes, il est possible de faire des calculs avec des formules, de naviguer entre les cellules avec les touches flèches du clavier comme si l’on était dans un vrai tableur.

Pour une démo, cliquer sur l’image.

Jquery 1.4 – les nouveautés …

Ce 14 Janvier 2010, Jquery nous offre un beau cadeau en sortant la version 1.4 de leur célèbre librairie.

Voici les nouveautés de cette version :

1. Attribuer plusieurs attributs à la volée.

Jusqu’à maintenant, la fonction attr() permettait de donner un attribut à une balise HTML quelconque. Pour changer un lien dynamiquement en http://rabehasy.madatsara.com et ajouter d’autres attributs  sur cette balise

on procède ainsi en Jquery :

Maintenant on procède comme ceci :

2. nextUntil(), prevUntil(), parentsUntil() : qui est la possibilité de sélectionner les éléments dans le DOM à partir d’un certain élement et d’arrêter à partir d’un élément. Ce code par exemple jQuery(‘ul li:contains(Apple)’).nextUntil(‘:contains(Pear)’);

prend les textes suivants // Selects Banana, Grape, Strawberry dans la liste suivante :

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>

<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

3. Attribuer plusieurs évènements à un sélecteur :

Ce code

jQuery(‘#foo).bind({
click: function() {
// do something
},
mouseover: function() {
// do something
},
mouseout: function() {
// do something
}
}) parle de lui-même.

4. Animation multiple avec easing

5. Nouveaux évènements avec la fonction live()

6. La fonction proxy() qui permet de créer une nouvelle fonction avec une fonction déjà existante.

7. Ajouter un délai dans une animation avec la fonction delay()

8. Détecter si un élement possède un autre élement avec la fonction jQuery.contains()

9. unwrap() est une fonction contraire de wrap()

10. La fonction detach() permet de supprimer temporairement un contenu sans pour autant le retirer du DOM

11. Récupérer l’index d’un élement recherché avec la fonction index()

12. Ajouter un callback aux fonctions classiques.

13. focusIn() et focusOut() permettent de savoir si un élement autre qu’un champ de formulaire possède ou non le focus.

14. closest() permet d’appliquer une même fonction à plusieurs types d’élements.

Jquery remplace le menu contextuel de votre navigateur

Jquery - ( la librairie puissante dérivée du javascript) impressionne tous les jours avec les extensions puissantes développées avec.

Jquery permet par exemple de créer des menus contextuels sur une page web. Ceci est très intéressant dans le cas d’une application web par exemple. Au lieu d’utiliser les menus contextuels classiques des navigateurs tels que ‘Actualiser’, ‘Afficher le code source’,  ‘Rechercher sur la page’… par exemple, on pourrait mettre en place des menus qui iraient directement à un lien dans une page interne, ou de mettre en forme dynamiquement un texte, bloquer l’enregistrement des images…

Voici d’autres plugins intéressants en jquery qui permettent de réaliser ce genre de fonctionnalités :

• Jeegoocontext
• ContextMenu
• Jquery Context Menu Plugin
• JJmenu