Ma Sélection RSS
jDigiClock is a beautiful jQuery inspired by the HTC Hero Widget.
It displays local time and weather.
Simple to integrate, I’ll include it in the new theme of web2ajax 
Article : http://www.radoslavdimov.com/2010/03/08/jdigiclock%E2%80%93ver-2-1/#content
Demo : http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/#Examples
Features :
- Auto orientation of expand
- Highly Customizable
- Easily draggable with jQueryUI
- Browser support ( IE > 5.5??, FireFox, Safari, Opera )
DEMO : click here to view a demo and how to use the plugin
Suite à l’article vu sur ajaxian, je tenez à vous en faire profiter si vous ne suivez pas ebcore ce blog
Il s’agit en fait d’un js qui, utilisé sans aucune dépendance, permet d’insérer des indicateurs de chargemenr n’importe où et n’importe quand dans votre site !
Jettez un oeil à la démo et voyez par vous même en changeant les paramètres, c’est vraiment génial !!
Vous pouvez l’associer à jQuery par exemple en utilisant ce code :
setTimeout(
function() {
ctrl.remove();
}, 2000);
Pour télécharger la librairie et peut-être en faire un plugin jQuery , cliquez-ici : busy.js
Alors voici enfin ce que je cherchai depuis un moment.
VS
?
Habitué à utiliser Really easy field Validation (REFV pour nous ) avec prototype et scriptaculous, je m’attachai à ce plugin pour rester sur scriptaculous.
En effet, il est très simple à utiliser et facilement adaptable, paramétrable, couplé avec juste Prototype et Effects.js de Scriptaculous pour les tests et les effets d’apparition des messages d’erreur.
Facilement adaptable, vous pouvez consulté un exemple ici en anglais sur la demo de l’auteur (telechargement)
ou en francais sur un site client récent (pas de spam s’il vous plait)
Ses Avantages…
Mais alors allez vous me dire, comment ca marche ?
C’est simple, tout d’abord pour chacun de vos champs vous fixez une class css correspondante au type de test requis.
<input type="text" name="fax" class="none validate-telephone"/>
Ensuite vous donnez un identifiant au formulaire ( par expérience toujours le faire dans tous les cas 
!)
et enfin, à la suite du formulaire
<script type="text/javascript">
function formCallback(result, form) {
}
var valid = new Validation('id_form', {immediate : true, onFormValidate : formCallback});
</script>
Qu’est ce que je découvre aujourd’hui ? un plugin similaire (néanmoins plus puissant) existe aussi avec Jquery Jquery Validation Plugin !
Brièvement ? Ben c’est pratiquement le même principe, les mêmes options de bases, + ?
Eh bien ses avantages :
je vais enfin pouvoir tester JQuery, sachant que la communauté est beaucoup plus dynamique et que le nombre de plugins disponibles est… faramineux !
La démo et téléchargement sur le site de l’auteur
 |
Je vous présente ici module permettant de mettre en place un moteur de recherche style "FaceBook" avec autocomplétion.
Ce module s’appuie sur les librairies de jQuery, ainsi que sur le module d’autocomplétion ‘Bsn Autosuggest".
Côté customisation, on peut s’appuyer sur des plugins de recherche qui permettent de catégoriser les résultats de recherche.
=> Exemple : http://web2ajax.fr/examples/facebook_searchengine/
Have Fun !
Je ne sais pas si j’ai beaucoup de lecteurs… (Si je sais, j’en ai pas beaucoup ), mais en tout cas ça faisait un pti moment que j’avais pas posté !
Mais j’ai une bonne excuse : www.lavf.com. On a fait ça à 3,5 pendant 6 semaines et c’était un très bon challenge qui me semble en tout cas très réussit.
Et vous savez quoi ? J’ai beaucoup appris depuis et plus particuliérement sur l’optimisation des différents plugins utilisables avec jQuery. C’est pour ça : je vais pouvoir vous donner plein de bons pti conseils sur l’utilisation
Donc le premier GROS conseil du jour pour optimiser l’utilisation de jQuery, et bien je l’ai découvert aujourd’hui. Notre HomePage bloqué pendant 3-4 secondes sous IE6, c’est embêtant quand que c’est encore 33% des navigateurs (sur lavf.com en tout cas)…
Alors on s’est pris la tête toute l’après-midi, parce que c’est quand même rédibitoire ce genre "d’accueil" pour un nouvel utilisateur !! Et en fait on a découvert qu’en faisant toutes nos déclarations js avec des $(document).ready(…) et bien on bloquait le navigateur car tout se faisait en même temps (la CPU grimpe comme il faut).
SOLUTION : lisser le chargement des modules sur tout le chargement de page, et c’est possible de la manière suivante :$(‘#div_id’).ready(…)
De cette manière, dès que le div est présent et "construit" dans les éléments DOM, on applique les différents js dessus. De cette manière, le gros temps de blocage que l’on avait au début s’est trouvé "gommé" et quasi invisible lors du chargement de la page.
Dans les jours à venir, je vous mets le code pour le module de graph en haut à droite, que j’ai également optimisé à son maximum.
Ciao.
Tout est bon pour gagner de précieuses minutes pour un webdesigner, et ce plugin est vraiment très pratique.
Comment on fait pour créer une boite avec des coins arrondis en temps normal ? On prend photoshop, on dessine un rectangle avec coins arrondis, on découpe l’image en 8, on la stocke sur le serveur et on met tout ça dans un tableau 3×3 ou dans des div imbriqués…
Vous m’avez compris, celà prend du temps et peut devenir fastidieux si on veut changer la couleur, faire des boites de style différents…
Et bien c’est terminé tout ça ! Une ligne de commande suffit à donner le plus bel effet à un simple rectangle de couleur. Pour plus d’informations, lisez ce post : http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery
Avant toute chose : cet outil est magique !!
Le site que je suis en train de faire est un framework maison qui me permet entre autre de faire un site multilingue. Et c’est en ces moments que le EditInPlace prend tout sons sens : plutot que de passer par une interface d’admin pour traduire et déclarer une variable de langue une à une, je peux faire ça en live sur le site !
Pour ce qui est du plugin, tout se trouve sur le site : http://davehauenstein.com/blog/archives/28
Quand à sa mise en place, c’est on ne peut plus facile :
1/ Tout ce qui est éditable est entouré de :
echo "<span class=’editInPlace_i18n’ id=’lang__$var’>$var</span>";
2/ On applique le EditInPlace sur tous les éléments que l’on souhaite pouvoir éditer :
$(document).ready(function(){
$(".editInPlace_i18n").editInPlace({
url: "index.php?module=core_admin&action=update_i18n",
bg_over: "transparent",
value_required: true,
params: "ajax=yes"
});
});
3/ Mon action update_i18n récupère les données en POST et fait un update en base :
#@ Update lang var in DB
// Default lang
$def_lang = ‘fr’ ;
// Get var to update
$var_update = str_replace(‘lang__’, », $_POST['element_id']) ;
// Do update & write new text
if ( set_lang($var_update, $def_lang, $_POST['update_value']) ) {
echo $_POST['update_value'] ;
} else {
echo $_POST['original_html'] ;
}
4/ Pour éditer les liens tranquillement, il faut également ‘unbinder’ tous les liens ‘<a…>’, pour ça, il suffit d’ajouter :
$("a").unbind() ;
$("a").bind("click", function() { return false;} ) ;
Je me sers d’une variable de session et d’un champ caché accessible par Javascript pour mettre à ‘On’ ou ‘Off’ le mode d’édition.
Bien sur, ce sera à adapter à votre environnement, mais tout est très bien expliqué sur le lien plus haut.
Vous savez tout maintenant, alors bon EditInPlace à tous !!
.png) |
Je cherchais depuis hier soir un plugin jQuery qui puisse me permettre de raffraichir le code html d’une DIV a intervalle régulier pour un module de news et Ô, désespoir : celui-ci n’existait pas !
Donc Bibi, comme il en avait besoin et qu’il aime bien l’esprit communautaire, bah il a commencé à créer ce plugin pour sa bibine, et aussi et surtout à partager ce plugin à toute la communauté
Pour le plugin jQuery "jQuery.refreshDiv.js" :
/*
* jquery.refreshDiv 1.0 – 2007-09-26
*
* Uses code and techniques from following forum:
* 1. http://forum.alsacreations.com/topic-24-29380-1-Resolu-jQuery-Raffraichir-un-div-periodiquement-.html
*
* All the new stuff written by Guillaume DE LA RUE (www.web2ajax.fr)
* Feel free to do whatever you want with this file
*
*/
(function($) {
$.refreshDiv = function(source, url, interval_ms) {
return setInterval(
function() {
return $(source).load(url) ;
}, interval_ms );
}
$.fn.refreshDiv = function(url, interval_ms) {
if (!url)
return;
this.each(function() {
new $.refreshDiv(this, url, interval_ms);
});
return this;
};
})(jQuery);
Et pour raffraichir un DIv :
jQuery(document).ready(function() {
// Refresh news div every 3000 sec
$(‘#news_panel’).refreshDiv(‘/Actualites/module.html’, 3*60*1000) ;
});
Testez le et dites moi si c’est bon pour vous que je le mette directement sur le site officiel de jQuery !
Je pense que je vais ajouter une ptite customi
Il va de soit qu’un bon développeur, geeker de surcroit ne peut plus développer un projet sans faire appel à la magie d’Ajax ! Je sais et j’en connais, il y’aura toujours les fans du bon <TABLE> et notepad pour développer, le fait d’utiliser AJAX change vraiment la vie et ouvre la porte à des fonctionnalités vraiment étonnantes.
J’ai commencé par le fameux ’scriptaculous’ (http://script.aculo.us/), mais pour être honnête les mises à jour et nouveaux plugins ne sont pas fréquents.
=> Je l’ai tout de même utilisé sur la V2 du site de www.lavieimmobiliere.com, qui sera en ligne lundi 10 sept et c’est vrai que ça m’a déjà bien aidé pour coder le moteur de recherche, ainsi que les transitions entres les pages, le menu accordéon… Mais toujours avec un pti gout de pas assez…
Alors suivant ajaxrain quotidiennement (à mettre d’urgence dans votre RSS reader), les frameworks à la mode en ce moment sont jQuery et Mootools.
C’est donc curieux comme un loup affamé que j’ai testé jQuery sur un petit site web que je suis en train de faire (www.keystone.fr – Pas encore en ligne ! ) et c’est vraiment sidérant à quel point c’est simple et complet. La manipulation des objets DOM est impeccable, celle des CSS également, rapide… Que du bon en boite !
Alors ayant un nouveau projet sur le feu (un site de bourse plutot bien chiadé), avec plein de courbes dynamiques, beaucoup de contenu et finalement peu de place, quel framework choisir ?
- Côté perf : jQuery dont la réputation était très mauvaise au début à améliorer par 8 sa vitesse de traitement, ce qui en fait un des framework le plus rapide => C’est plutot un bon point ça
- Au moins un plugin différent sort par jour, plus fonctionnel les uns que les autres => C’est pas mal non plus ça
- Doc bien fournie
- Communauté très active donc.
Et puis en tapant sur une fourmilière, apparait ExtJS… (Tiens je l’avais pas encore vu celui-là !) Mais c’est exactement ce qu’il me faut ! D’ailleurs, pour me comprendre un peu mieux et avant de lire la suite, allez jetter un coup d’oeil aux démos disponibles sur le site :
Possibilité de l’utilsier en standalone, ou avec jQuery, YahooUI…
Nombreux effets et des choses comme les datagrid à partir d’un XML m’interessent plus particulièrement, possibilité de télecharger un packake ‘Light’ et de choisir les modules que l’on veut ajouter…
Donc à moins que je ne trouve mieux, mon choix va donc se porter sur ExtJS, que je trouve extrêmement bien fouttu et qui évolue super rapidement.
Allé, y’a plus qu’à maintenant !
Si vous voulez partager votre expérience, surtout n’hésitez pas car je vous avoue que le ‘benchmarking’ n’a pas été facile et je lorgne encore pas mal sur le YahooUI ou le google Toolkit…
Download It !