Plugin jQuery de paramétrage des champs de saisie de formulaire.

Comment ça marche?

DEMO

TELECHARGEMENT  

Masked Input Plugin

Dans le code:

First, include the jQuery and masked input javascript files.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Next, call the mask function for those items you wish to have masked.

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Optionally, if you are not satisfied with the underscore (‘_’) character as a placeholder, you may pass an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
});

You can now supply your own mask definitions.

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

You can have part of your mask be optional. Anything listed after ‘?’ within the mask is considered optional user input. The common example for this is phone number + optional extension.

jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
});

Scroller, un plugin jQuery qui fait des bulles!

 

Voici un plugin jquery qui permet des animations sympas au survol de la souris.

Source: jscraft

DEMO

Télécharger SCROLLER

JavaScript

  1. $(‘.scroller’).scroller({
  2. element: ‘a’, // (string) HTML element
  3. direction: ‘horizontal’, // (string) available options: horizontal, vertical
  4. container: {
  5. name: ‘inside’, // (string) class name for the container
  6. easing: ‘easeOutBack’, // (string) set the easing of the animation, required: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
  7. duration: 800 // (int) set the speed of the easing animation in milliseconds
  8. },
  9. options: {
  10. margin: -20, // (int) set the margin for each element
  11. zoom: 1.5, // (int) zoom multiplier
  12. easing: [‘easeOutBack’, ‘easeOutBounce’],
  13. duration: [300, 500]
  14. },
  15. onclick: function(a, img){},
  16. onmouseover: function(a, img){},
  17. onmouseout: function(a, img){}
  18. });

HTML

  1. <div class= »scroller »>
  2. <div class= »inside »>
  3. <a href= »# »><img src= »assets/img1.jpg » alt= » » /></a>
  4. <a href= »# »><img src= »assets/img2.jpg » alt= » » /></a>
  5. <a href= »# »><img src= »assets/img3.jpg » alt= » » /></a>
  6. <a href= »# »><img src= »assets/img4.jpg » alt= » » /></a>
  7. <!– etc. –>
  8. </div>
  9. </div>

Publier des flux rss dans votre site.

Publier des flux rss dans votre site, avec ce plugin jQuery c’est simple :

Etape 1

Copiez et coller le code suivant entre les balises <head> and </head> de la page où vous souhaitez afficher le flux rss.

<script type= »text/javascript » src= »https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js »></script&gt;
<script type= »text/javascript » src= »rssFeed/rssFeed.js »></script>
<link href= »rssFeed/rssFeed.css » rel= »stylesheet » type= »text/css »>

Etape 2

Insérez la <div> rssFeed là où vous souhaitez afficher le fil d’actualité.

<div id= »rssFeed »></div>

Etape 3

Ajoutez le code suivant entre les balises <head> and </head>.
Changez « Url_de_votre_flux » par l’adresse du flux rss.

<script type= »text/javascript »>
$(document).ready(function(){
jQuery.rssFeed(‘Url_de_votre_flux’);
});
</script>

Choisissez les Options

Lang :

defaut : en
permet d’afficher le lien vers l’article dans la langue souhaitée (Français ou anglais disponible)

nextInterval :

defaut : 4000
Paramètre le temps d’affichage de l’article

Dans cette exemple la langue est paramétrée en « fr ». jQuery rssFeed affichera ‘lire la suite’ comme lien de l’article et le temps d’affichage est de 5000 millisecondes

<script type= »text/javascript »>
$(document).ready(function(){
jQuery.rssFeed(‘Url_of_your_feed’,({lang: »fr »,nextInterval:5000}));
});
</script>

Fichier :  télécharger

Lien du site : http://www.noprobweb.com/rss_feed_flux_jquery.php