jQuery-Plugin zur Implementierung des Suchverlaufs
|
Jeden Tag ein jQuery-Plugin – um einen Suchverlauf zu erstellen. Zu Ihrer Information: Der spezifische Inhalt lautet wie folgt Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Suchverlauf ausführen</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
*{
Rand: 0px;
Polsterung: 0px;
}
#Suchfeld{
/* Rand: 1px durchgehend hellgrau; */
Höhe: 40px;
Breite: 720px;
Position: relativ;
}
#Sucheingabe{
Rand: 1px durchgehend hellgrau;
Rahmenradius: 5px 0px 0px 5px;
Höhe: 28px;
Position: absolut;
rechts: 45px;
oben: 5px;
links: 5px;
Breite: 670px;
Gliederung: keine;
Texteinzug: 12px;
Schriftgröße: 12px;
Farbe: grau;
}
#Sucheingabe:Fokus{
Rahmenfarbe: RGB (252,25,68);
}
#Sucheingabe:Fokus~#morebox{
Anzeige: Flex;
}
#suchebtn{
Höhe: 30px;
Breite: 40px;
Rand: keiner;
Rahmenradius: 0px 5px 5px 0px;
Hintergrundfarbe: rgb(252,25,68);
Position: absolut;
rechts: 5px;
oben: 5px;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Cursor: Zeiger;
}
#searchbtn img{
Breite: 25px;
Höhe: 25px;
}
#mehrbox{
Rand: 1px durchgehend hellgrau;
Position: absolut;
oben: 40px;
links: 5px;
rechts: 5px;
Höhe: 370px;
Z-Index: 7;
Rahmenradius: 2px;
Anzeige: Flex;
Anzeige: keine;
}
#drücken{
biegen: 1;
/* Rand: 1px durchgehend hellgrau; */
Position: relativ;
}
#Geschichte{
/* Anzeige: keine; */
biegen: 1;
/* Rand: 1px durchgehend hellgrau; */
Position: relativ;
}
.Kopf{
Position: absolut;
oben: 0px;
Breite: 100 %;
Höhe: 30px;
Rahmen unten: 1px durchgehend hellgrau;
Schriftgröße: 12px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Texteinzug: 12px;
Farbe: rgb(252,85,49);
}
.hauptsächlich{
Position: absolut;
oben: 30px;
Breite: 100 %;
unten: 0px;
Überlauf-x: versteckt;
Überlauf-y: automatisch;
}
.Artikel{
Schriftgröße: 12px;
Höhe: 30px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Texteinzug: 12px;
Cursor: Zeiger;
}
.item:hover{
Hintergrundfarbe: hellgrau;
}
</Stil>
</Kopf>
<Text>
<div id="Suchfeld">
<input id="searchinput" placeholder="c" />
<button id="searchbtn"><img src="img/sc.png"></button>
<div id="mehrbox">
<div id="Geschichte">
<div class="head">Suchverlauf</div>
<div Klasse="main"></div>
</div>
<div id="drücken">
<div class="head">Heiße Empfehlungen</div>
<div Klasse="Haupt">
<div class="item">Microsoft hat endlich Maßnahmen gegen JDK ergriffen</div>
<div class="item">Xiaomi-Technologie zum kabellosen Laden</div>
<div class="item">Häufige Linux-Befehle</div>
<div class="item">A Fei arbeitet hart und kann gut schreiben</div>
<div class="item">Lernen Sie jeden Tag ein jQuery-Plugin und es gibt keine Plugins! Ist es der Verfall der Moral oder die Verzerrung der menschlichen Natur?
</div>
</div>
</div>
</div>
</body>
</html>
<Skript>
$(Dokument).bereit(Funktion(){
//Jedes Mal, wenn Sie auf die Suche klicken, wird sie im Cache gespeichert//
$(".item").klick(function(){
var str = $(dieser).text();
$("#Sucheingabe").val(str)
})
// localStorage["history"] = '[]'//Cache leeren;
Zeichenhistorie();
$("#searchbtn").klick(function(){
var str = $("#searchinput").val();
wenn(str&&str!=""){
var arr = getSession();
arr.push(str);
localStorage["Verlauf"] = JSON.stringify(arr);
Zeichenhistorie();
}
})
getSession();
//Finden Sie den Verlauf basierend auf dem Cache und generieren Sie dann die Suchverlaufsfunktion drawhistory(){
var arr = getSession();
$("#history .main .item").entfernen();
arr.fürJeden(item=>{
var $item = $("<div class='item'>"+item+"</div>");
$item.appendTo($("#history .main"));
})
}
//Cache abrufen Funktion getSession(){
var ses = localStorage["Verlauf"];
var arr = ses==undefined?[]:JSON.parse(ses);
Rückflug an;
}
})
</Skript>Erklärung der Ideen 1. Das Layout ist ein Fehler. Ich weiß nicht, ob mein Layout das geeignetste ist, aber es sieht gut aus. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist
>>: MySQL 5.6 Installationsschritte mit Bildern und Text
Artikel empfehlen
Tutorial zur Installation und Verwendung des Elasticsearch-Tools cerebro
Cerebro ist eine Weiterentwicklung des Elasticsea...
CSS realisiert den Sprechblaseneffekt mit scharfen Ecken im kleinen Chat-Dialogfeld mit scharfen Ecken
1. Verwenden Sie CSS, um ein kleines Chat-Dialogf...
Implementierung eines einfachen Karussells auf Basis von JavaScript
In diesem Artikel wird der spezifische JavaScript...
Überlegungen zur Kürzung von mehrzeiligem Text mit einer Schaltfläche „Mehr anzeigen“
Ich bin erst kürzlich zufällig auf diese kleine A...
Beispiele für allgemeine Operationen mit MySQL-Fremdschlüsseleinschränkungen [Anzeigen, Hinzufügen, Ändern, Löschen]
In diesem Artikel werden anhand von Beispielen al...
Detaillierte Erklärung der Gründe, warum MySQL-Verbindungen hängen bleiben
Inhaltsverzeichnis 1. Hintergrund Architektur Pro...
Erste Schritte mit CSS3-Animation in 10 Minuten
Einführung Mit Animation können Sie mithilfe von ...
Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers
Beim Konfigurieren unterschiedlicher Servlet-Pfad...
Einführung in die SSL- und WSS-Schritte für die Nginx-Konfiguration
Inhaltsverzeichnis Vorwort 1. Nginx-Installation ...
FTP-Remoteverbindung zu Linux über SSH
Installieren Sie zunächst SSH in Linux. Nehmen Si...
Grafisches Tutorial zur MySQL 5.7-Konfiguration ohne Installation
Mysql ist eine beliebte und einfach zu bedienende...
Tutorial und Praxis zu den virtuellen Speichereinstellungen unter Linux
Was ist virtueller Speicher? Zunächst werde ich e...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.21 winx64 unter Windows 10
Installations- und Konfigurationsmethode für MySQ...
Detailliertes Tutorial zur Installation von Nacos in Docker und zur Konfiguration der Datenbank
Umgebungsvorbereitung Docker-Umgebung MySQL 5.7 (...
Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign
Im Zuge des schrittweisen Übergangs von herkömmli...