15 extraits de code jQuery que vous pouvez utiliser directement_jquery

Un article que vous avez publié « 10 extraits de code PHP super utiles à collecter » ? Dans cet article, l'auteur continuera à vous fournir 15 extraits de code jQuery super utiles.

jQuery propose de nombreuses méthodes pour créer des sites Web interactifs. Lors du développement de projets Web, les développeurs doivent faire bon usage des codes jQuery. Ils peuvent non seulement apporter diverses animations et effets spéciaux au site Web, mais également améliorer l'expérience utilisateur du site Web.

Profitons ensemble du charme du code jQuery.

1. Précharger les images

(function($) {
 var cache = [];
 // Arguments are image paths relative to the current page.
 $.preLoadImages = function() {
  var args_len = arguments.length;
  for (var i = args_len; i--;) {
   var cacheImage = document.createElement('img');
   cacheImage.src = arguments[i];
   cache.push(cacheImage);
  }
 }
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

2. Rendre chaque élément de la page adapté à l'affichage sur les appareils mobiles

var scr = document.createElement('script');
scr.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js');
document.body.appendChild(scr);
scr.onload = function(){
  $('div').attr('class', '').attr('id', '').css({
    'margin' : 0,
    'padding' : 0,
    'width': '100%',
    'clear':'both'
  });
};

3. Mise à l'échelle de l'image

$(window).bind("load", function() {
  // IMAGE RESIZE
  $('#product_cat_list img').each(function() {
    var maxWidth = 120;
    var maxHeight = 120;
    var ratio = 0;
    var width = $(this).width();
    var height = $(this).height();
    if(width > maxWidth){
      ratio = maxWidth / width;
      $(this).css("width", maxWidth);
      $(this).css("height", height * ratio);
      height = height * ratio;
    }
    var width = $(this).width();
    var height = $(this).height();
    if(height > maxHeight){
      ratio = maxHeight / height;
      $(this).css("height", maxHeight);
      $(this).css("width", width * ratio);
      width = width * ratio;
    }
  });
  //$("#contentpage img").show();
  // IMAGE RESIZE
});

4. Revenir en haut de la page

// Back To Top
$(document).ready(function(){
 $('.top').click(function() {
   $(document).scrollTo(0,500);
 });
});
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

5. Utilisez jQuery pour créer un effet de pliage en accordéon

var accordion = {
   init: function(){
      var $container = $('#accordion');
      $container.find('li:not(:first) .details').hide();
      $container.find('li:first').addClass('active');
      $container.on('click','li a',function(e){
         e.preventDefault();
         var $this = $(this).parents('li');
         if($this.hasClass('active')){
             if($('.details').is(':visible')) {
                $this.find('.details').slideUp();
             } else {
                $this.find('.details').slideDown();
             }
         } else {
             $container.find('li.active .details').slideUp();
             $container.find('li').removeClass('active');
             $this.addClass('active');
             $this.find('.details').slideDown();
         }
      });
   }
};

6. Imitez la méthode d'affichage des images de Facebook en préchargeant les images précédentes et suivantes dans la galerie d'images

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

7. Utilisez jQuery et Ajax pour remplir automatiquement la zone de sélection

$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})

8. Remplacer automatiquement les photos perdues

// Safe Snippet
$("img").error(function () {
  $(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
  $(this).attr("src", "missing_image.gif");
});

9. Afficher les effets de fondu entrant/sortant au survol de la souris

$(document).ready(function(){
  $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
  $(".thumbs img").hover(function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
  },function(){
    $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
  });
});

10. Effacer les données du formulaire

function clearForm(form) {
 // iterate over all of the inputs for the form
 // element that was passed in
 $(':input', form).each(function() {
  var type = this.type;
  var tag = this.tagName.toLowerCase(); // normalize case
  // it's ok to reset the value attr of text inputs,
  // password inputs, and textareas
  if (type == 'text' || type == 'password' || tag == 'textarea')
   this.value = "";
  // checkboxes and radios need to have their checked state cleared
  // but should *not* have their 'value' changed
  else if (type == 'checkbox' || type == 'radio')
   this.checked = false;
  // select elements need to have their 'selectedIndex' property set to -1
  // (this works for both single and multiple select elements)
  else if (tag == 'select')
   this.selectedIndex = -1;
 });
};

11. Empêcher les soumissions multiples de formulaires

$(document).ready(function() {
 $('form').submit(function() {
  if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
   jQuery.data(this, "disabledOnSubmit", { submited: true });
   $('input[type=submit], input[type=button]', this).each(function() {
    $(this).attr("disabled", "disabled");
   });
   return true;
  }
  else
  {
   return false;
  }
 });
});

12. Ajouter dynamiquement des éléments de formulaire

//change event on password1 field to prompt new input
$('#password1').change(function() {
    //dynamically create new input and insert after password1
    $("#password1").append("");
});

13. Rendre l'intégralité de la Div cliquable

blah blah blah. link
The following lines of jQuery will make the entire div clickable: $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });

14. Hauteur d'équilibre ou élément Div

var maxHeight = 0;
$("div").each(function(){
  if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

15. Charger automatiquement le contenu lorsque la fenêtre défile

var loading = false;
$(window).scroll(function(){
  if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
    if(loading == false){
      loading = true;
      $('#loadingbar').css("display","block");
      $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
        $('body').append(loaded);
        $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
        $('#loadingbar').css("display","none");
        loading = false;
      });
    }
  }
});
$(document).ready(function() {
  $('#loaded_max').val(50);
});

Les 15 extraits de code jQuery très pratiques rassemblés dans cet article peuvent être copiés et collés directement dans le code, mais il est conseillé aux développeurs de comprendre le code avant de l'utiliser.