10 JQuery-Snippets, die jeder Designer kennen sollte
jQuery wird auf Tausenden von Webseiten verwendet. Es ist eine der gebräuchlichsten Bibliotheken, die in Seiten eingefügt werden können, und macht DOM-Manipulation zu einem Kinderspiel.
Natürlich ist ein Teil von jQuerys Popularität seine Einfachheit. Es scheint, dass wir mit dieser mächtigen Bibliothek fast alles machen können, was wir wollen.
Für alle Möglichkeiten, die uns offen stehen, gibt es einige Ausschnitte, zu denen wir immer wieder zurückkehren. Heute möchte ich dir 10 Schnipsel geben, die jeder, Anfänger an Gurus, immer und immer wieder benutzen wird.
1) Zurück zum oberen Knopf
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tagBack to top
Wie Sie mit den Funktionen animate und scrollTop in jQuery sehen können, benötigen wir kein Plugin, um eine einfache Scroll-to-Top-Animation zu erstellen.
Durch Ändern des scrollTop- Wertes können wir ändern, wo die Scrollleiste landen soll. In meinem Fall habe ich den Wert 0 verwendet, weil ich möchte, dass er ganz oben auf unserer Seite angezeigt wird tippe 100px in die Funktion ein.
Alles, was wir tun, ist also, den Körper unseres Dokuments im Verlauf von 800ms zu animieren, bis es den ganzen Weg bis zum oberen Rand des Dokuments scrollt.
2) Überprüfen, ob Bilder geladen sind
$(‘img’).load(function() {
console.log(‘image load successful’);
});
Manchmal müssen Sie überprüfen, ob Ihre Bilder vollständig geladen sind, um mit Ihren Skripten fortfahren zu können. Dieses dreizeilige jQuery-Snippet kann das leicht für Sie erledigen.
Sie können auch prüfen, ob ein bestimmtes Bild geladen wurde, indem Sie das img-Tag durch eine ID oder eine Klasse ersetzen.
3) Reparieren Sie defekte Bilder automatisch
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
Gelegentlich haben wir Zeiten, in denen wir Image-Links auf unserer Website unterbrochen haben und sie einzeln zu ersetzen, ist nicht einfach. Wenn Sie also dieses einfache Stück Code hinzufügen, können Sie viele Kopfschmerzen ersparen.
Auch wenn Sie keine kaputten Links haben, fügt das Hinzufügen keinen Schaden zu.
4) Toggle Klasse bei Hover
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
Normalerweise möchten wir das Aussehen eines klickbaren Elements auf unserer Seite ändern, wenn der Benutzer den Mauszeiger darüber bewegt, und dieses jQuery-Snippet macht genau das. Er fügt Ihrem Element eine Klasse hinzu, wenn der Benutzer den Mauszeiger hält und wenn der Benutzer die Klasse entfernt Sie müssen lediglich die erforderlichen Stile in Ihre CSS-Datei einfügen.
5) Eingabefelder deaktivieren
$('input[type="submit"]').attr("disabled", true);
Gelegentlich möchten Sie möglicherweise, dass der Übergabeknopf eines Formulars oder sogar eine seiner Texteingaben deaktiviert wird, bis der Benutzer eine bestimmte Aktion ausgeführt hat (z. B. das Kontrollkästchen "Ich habe die Begriffe gelesen") und diese Codezeile ausführt Das; Es fügt Ihrer Eingabe das deaktivierte Attribut hinzu, damit Sie es bei Bedarf aktivieren können.
Um das zu tun, müssen Sie nur die removeAttr-Funktion für die Eingabe mit deaktiviert als Parameter ausführen:
$('input[type="submit"]').removeAttr("disabled”);
6) Stoppen Sie das Laden von Links
$(‘a.no-link').click(function(e){
e.preventDefault();
});
Manchmal möchten wir nicht, dass Links zu einer bestimmten Seite gehen oder sie sogar neu laden, wir möchten, dass sie etwas anderes tun, als ein anderes Skript auszulösen, und in diesem Fall wird der Code die Standardaktion verhindern.
7) Fade / Folie umschalten
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
Slides und Fades sind etwas, das wir in unseren Animationen mit jQuery verwenden. Manchmal möchten wir nur ein Element zeigen, wenn wir auf etwas klicken. Dafür sind die Methoden fadeIn und slideDown perfekt, aber wenn das Element beim ersten Klick angezeigt werden soll dann verschwinden auf der zweiten dieses Stück Code wird gut funktionieren.
8) Einfaches Akkordeon
// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});
Wenn Sie dieses Skript hinzufügen, brauchen Sie auf Ihrer Seite nur das notwendige HTML, um das zu erreichen.
Wie Sie in diesem Snippet sehen können, habe ich zunächst alle Panels in unserem Akkordeon geschlossen und dann auf dem Click-Event den Inhalt, der mit diesem Header-Slide verbunden ist, umgestellt und alle anderen rutschen nach oben. Es ist eine einfache Methode für ein schnelles Akkordeon.
9) Machen Sie zwei Divs die gleiche Höhe
$(‘.div').css('min-height', $(‘.main-div').height());
Manchmal möchten Sie, dass zwei Divs die gleiche Höhe haben, egal, welchen Inhalt sie in ihnen haben. Dieses kleine Snippet ermöglicht genau das; In diesem Fall wird die Min-Höhe eingestellt, was bedeutet, dass sie größer als das Haupt-Div ist, aber niemals kleiner. Dies ist großartig für Mauerwerk wie Websites.
10) Zebra entfernt ungeordnete Liste
$('li:odd').css('background', '#E8E8E8’);
Mit diesem kleinen Snippet können Sie leicht zebra-gestreifte ungeordnete Listen erstellen. Dadurch wird der Hintergrund, den Sie definieren, auf jedes ungerade Listenelement gesetzt, sodass Sie den Standard für die geraden in Ihre CSS-Datei einfügen können. Sie können dieses Snippet zu jeder Art von Markup hinzufügen, von Tabellen bis zu einfachen divs, alles, was zebra-entfernt werden soll.
Fazit
Dies sind die Teile von jQuery Code, die ich immer wieder in meinen Projekten benutze. Ich hoffe, du bookmarken diese Seite und kommst zurück, wenn du einen dieser Schnipsel brauchst.
Auf welche jQuery-Snippets verlassen Sie sich? Haben Sie einen besseren Code für diese Szenarien? Lassen Sie es uns in den Kommentaren wissen.
Vorgestelltes Bild / Thumbnail, nützliches Bild über Shutterstock.