blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Archives de la catégorie ‘jquery’

Jquery: lancer une action apres avoir appuyé sur la touche entrée

Voici comment faire pour détecter en javascript lorsque l’utilisateur appuie sur la touche entrée et lancé une fonction associée

function functionAppellee(event) {
   alert('vous avez appuyé sur entrée'+ event.data.id);
}



$('#autocomplete_nom_input_auto_'+count).keyup(function(e){
  if(e.keyCode == 13)
  {
    $(this).trigger("enterKey");
  }
  jQuery('#idDuChamps').bind("enterKey",{id: param1},functionAppellee);
});


Publicités

équivalent de jquery $(document).ready() en prototype

Voici comment exécuter du code javascript uniquement lorsque la page web est complètement chargée.

version jquery:

$(document).ready(function() {
  // Handler for .ready() called.
});

Version Prototype:

Event.observe(window, 'load', function() {

});

cela évite beaucoup de problème notamment quand il y a de l’ajax en place sur la page

Jquery – serialize() ou comment envoyer les valeurs d’un form de manière sérializé en jquery


cette méthode de jquery vous permet de récupérer l’ensemble des valeurs d’un formulaire et de les serializer comme dans une url:

exemple:


<div></div>
<div></div>
<div></div>
<div>    4</div>
<div>567</div>
<div>    </div>
<div>    </div>



on serialize avec le code suivant en javascript


$('form').submit(function() {
alert($(this).serialize());
return false;
});

on obtient alors une chaine comme suit:


a=1&b=2&c=3&d=4&e=5

que l’on pourra envoyer a un script en ajax à la suite de notre url du fichier de destination: par exemple

$.post('ajax/test.html?'+$(this).serialize(), function(data) {
$('.result').html(data);
});

Retrouvez cette technique et d’autres astuces dans ce très bon livre sur le JQuery:
livre-jquery-facile

uploader des images et photos via drag & drop sur votre site avec html5 uploader jquery

Pour ceux qui souhaitent pouvoir uploader des images sur leur site internet par simple cliquer/glisser (drag drop) voici une petite librairie qui pourra vous plaire.

Vous n’avez qu’a créer une drop zone et la librairie se charge du reste.

exemple:

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

<script type="text/javascript">
  $(function() { 
 $("#dropbox, #multiple").html5Uploader(
 { name: "foo", postUrl: "bar.aspx" }); 
 }); 
</script> 
<div id="dropbox"></div> <input id="multiple" type="file" multiple> 

vous pourrez alors envoyer de multiple images et photos sur votre site de manière asynchrone.

évidement pour que le code marche vous devez télécharger jquery et la librairie qui se trouve sur ce site: http://www.igloolab.com/jquery-html5-uploader/

notification par infos bulle en jquery

Pour faire apparaitre et disparaitre facilement des infos bulle pour prévenir ou informer un visiteur de votre site, je vous conseil :

Freeow!

il faut bien sur avant tout inclure la librairie jquery

Il vous faut d’abord le fichier freeow.js à inclure dans la page ou vous allez utiliser l’infobulle freeow.

il vous suffit de créer une div comme ceci:
<body>
...
<div id="freeow"></div>
</body>
puis d'ajouter le code jquery suivant:
// Simple
$("#freeow").freeow("My Title", "Here's a message");

// With options
$("#freeow").freeow("Another Title", "One more message", {
classes: ["gray", "error"],
autoHide: false
});

et voila le tour est joué

javascript afficher une demande de confirmation avant de lancer une action

si vous voulez prévenir l’utilisateur qu’il va déclencher uen action en javascript il existe la fonction confirm();

elle s’utilise comme suit:

if(confirm(« Etes vous bien sur d’être sur de vouloir faire cela? »))
{
// action à effectuer
}

voila c’est pas plus compliqué que ça

tinyMCE editeur de texte WYSIWYG, quelques methodes utiles

Voici quelques méthodes utiles pour tinymce dont je ne me souvient jamais mais qui maintenant seront accessible sur mon blog 🙂

voici la première méthode : ajouter / charger du texte dans l’éditeur Tinymce:

tinyMCE.activeEditor.setContent(‘mon texte ou mon code html’);

pour récupérer le contenu de l’éditeur:

tinyMCE.activeEditor.getContent();

cette article sera compléter au fil du temps.