Natives JS zur Implementierung der Dropdown-Box-Auswahlkomponente
|
In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung der Dropdown-Feldauswahlkomponente zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Funktionale Anforderungen: 1. Nach dem Klicken auf div zeigt div den Fokusstatus an und gleichzeitig wird der Inhalt der Dropdown-Box angezeigt. Anzeigestatus, wenn das Dropdown-Feld nicht funktioniert:
Wenn die Dropdown-Box bedienbar ist:
Nach Auswahl der Kinderanzahl werden unten automatisch die entsprechenden Auswahlfelder für die Kinderanzahl und das Alter angezeigt:
Nach dem Klicken auf den Bestätigungsbutton wird das Ergebnis im obigen Div angezeigt:
Die ursprüngliche Idee bestand darin, Ereignisse für die Auswahl, die UL-Dropdown-Liste und die BTN-Schaltfläche zu überwachen. Darüber hinaus wird die UL-Dropdown-Liste ausgeblendet, wenn auf andere Positionen in der Dropdown-Box geklickt wird, und wenn auf den Text geklickt wird, wird der gesamte Inhalt der Dropdown-Box ausgeblendet. Es gibt zu viele Überwachungsereignisse und das Aufsteigen von Ereignissen wirkt sich auch auf die Ausführung von Ereignissen aus, was dazu führt, dass einige Ereignisse mehrmals ausgeführt werden. Das Auswahlfeld für das Alter der Kinder wird auf Grundlage der Anzahl der Kinder generiert. Es gibt so viele Altersauswahlfelder wie Kinder. In diesem Fall muss das Altersauswahlfeld dynamisch erstellt werden, und es ist nicht möglich, auf Ereignisse für die Altersauswahl zu hören. Es kann nur die Ereignisdelegierung verwendet werden. Daher werden die Klickereignisse der Auswahl, der UL-Dropdown-Liste, der BTN-Schaltfläche und wenn auf andere Positionen im Container geklickt wird, die UL-Dropdown-Liste ausgeblendet. Alles an das DropDownContainer-Element delegiert. Fügen Sie den Code unten an HTML-Strukturcode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>auswählen</title>
</Kopf>
<Text>
<Skripttyp="Modul">
importiere Main aus „./js/Main.js“;
//Wenn der Parameter „false“ ist, kann das Auswahlfeld nicht angeklickt werden, wenn er „true“ ist, kann das Auswahlfeld verwendet werden. let main=new Main(true);
main.appendTo("body");
</Skript>
</body>
</html>Main.js-Datei:
importiere Utils aus „./Utils.js“;
exportiere Standardklasse Main{
statische Stile=false;
ListeVorbereitung;
Konstruktor(Zustand){
//Status steuert, ob das Dropdown-Feld anklickbar ist. this.state=state;
dies.elem=dies.createE();
}
erstellenE(){
wenn(dieses.elem) dieses.elem zurückgeben;
let div = Utils.createE("div");
div.className="GästeAnzahl";
div.innerHTML=`<span>Anzahl der Personen ist unbestimmt</span><i></i>
<div Klasse="dropDownContainer none" id="dropDownContainer">
<div Klasse = "dropDownItem Clearfix">
<span>Jeder</span>
<div Klasse="dropDownSelect">
<div class="dropDownCont"><span id="adultNum">2 Erwachsene</span><i></i></div>
<ul class="dropDownList" tag="Erwachsene">${this.setDropDownList("Erwachsene")}</ul>
</div>
<div Klasse="dropDownSelect">
<div class="dropDownCont"><span id="childrenNum">0 Kinder</span><i></i></div>
<ul Klasse = "dropDownList" Tag = "Kinder"><li>0</li>${this.setDropDownList("Kinder")}</ul>
</div>
</div>
<div Klasse = "dropDownItem Clearfix keine" id = "ItemAge"></div>
<div Klasse="dropDownBottom clearfix">
${this.state?'':'<em class="dropDownTips">Bitte wählen Sie zuerst das Datum aus, damit Sie den Echtzeitpreis prüfen können. </em>'}
${this.state?'<a class="dropDownBtn" id="dropDownBtn" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >Bestätigen</a>':'<a class="dropDownBtn disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >Bestätigen</a>'}
</div>
</div>`;
//Stil festlegen. Da der Stil nur einmal festgelegt und nicht instanziiert werden muss, wird die statische Methode Main.setStyles() verwendet;
//Element abrufen Utils.getIdElem(div,this);
//Auf das Klickereignis des Divs warten div.addEventListener("click",(e)=>this.guestsNumClickHandler(e));
//Wenn der Status wahr ist, wartet das Dropdown-Feld auf Klickereignisse, wenn (this.state) this.dropDownContainer.addEventListener("click",e=>this.dropDownContainerClick(e));
//Dokument wartet auf Klickereignisse und blendet das Dropdown-Feld ausdocument.addEventListener("click",e=>this.documentClick(e));
div zurückgeben;
}
anhängenAn(übergeordnet){
Utils.appendTo(dieses.Element,übergeordnet);
}
GästeNumClickHandler(e){
//Wenn das Dropdown-Feld im Anzeigezustand ist, direkt herausspringen, um wiederholte Vorgänge zu vermeiden if(!Utils.hasClass(this.dropDownContainer,"none")) return;
//Wenn „guestsNum“ nicht angeklickt wird, direkt herausspringen, um ein Aufsteigen des Ereignisses zu vermeiden, if(e.target.nodeName!=="SPAN"&&e.target.nodeName!=="I"&&!Utils.hasClass(e.target,"guestsNum")) return;
//Fokusstil zu div hinzufügen Utils.addClass(this.elem,"focus");
//Den DropDownContainer anzeigen Utils.removeClass(this.dropDownContainer,"none");
}
dropDownContainerKlick(e){
wenn(e.target.nodeName==="LI"){
//Klicken Sie auf ul, um die Liste auszuwählen this.dropDownListClick(e);
}
sonst wenn(e.target.id==="dropDownBtn"){
//Klicken Sie auf die Schaltfläche „Bestätigen“. this.dropDownBtnClick();
}
sonst wenn(e.target.nodeName==="SPAN" || e.target.nodeName==="I") {
//Wenn Sie auf den Span- oder i-Tag klicken, nehmen Sie deren übergeordnetes Element div als Parameter this.dropDownSelectClick(e.target.parentElement);
}
sonst wenn(Utils.hasClass(e.target,"dropDownCont")){
//Wenn Sie auf das Div-Auswahlfeld klicken, verwenden Sie div als Parameter this.dropDownSelectClick(e.target);
}
anders {
//Wenn Sie auf andere Positionen im Dropdown-Feld klicken, verbergen Sie die aktuelle UL-Liste if(this.listPrep) this.listPrep.style.display="none";
}
}
dropDownSelectClick(div){
//Zuletzt angezeigte UL-Liste ausblenden if(this.listPrep) this.listPrep.style.display="none";
//Die aktuell angeklickte UL-Liste wird this.listPrep zugewiesen.
diese.listPrep=div.nächstesElementGeschwister;
//Zeige die aktuell angeklickte UL-Liste this.listPrep.style.display="block";
}
dropDownListClick(e){
//Den Tag-Attributwert des aktuell angeklickten UL abrufen let tag=this.listPrep.getAttribute("tag");
lass Einheit="";
Schalter (Tag) {
Fall "Erwachsener": Einheit="Erwachsener";Pause;
Fall "Kinder":
Einheit="Kinder";
let txt=Zahl(e.target.innerText);
//Erstellen Sie entsprechend dem Wert von li automatisch das Altersauswahlfeld darunter.setDropDownItemAge(txt);
brechen;
Fall "Alter": Einheit="Jahre alt";break;
}
//Zeige den Wert des ausgewählten li this.listPrep.previousElementSibling.firstElementChild.textContent=e.target.innerText+" "+unit;
//Nachdem die Anzeige abgeschlossen ist, verstecke die aktuell angezeigte ul this.listPrep.style.display="none";
}
setDropDownItemAge(txt){
let str="<span>Alter des Kindes</span>";
wenn(txt===0){
//Wenn der Wert 0 ist, wird das Altersauswahlfeld nicht angezeigt. this.ItemAge.style.display="none";
}anders{
dies.ItemAge.style.display="block";
//Durchlaufe die ausgewählten Werte und erstelle ein Altersauswahlfeld for(let i=0;i<txt;i++){
str+=`<div Klasse="dropDownSelect">
<div class="dropDownCont"><span><1 Jahr alt</span><i></i></div>
<ul class="dropDownList" tag="Alter"><li><1</li>${this.setDropDownList("Alter")}</ul>
</div>`;
}
dies.ItemAge.innerHTML=str;
}
}
dropDownBtnClick(){
//Den ausgewählten Inhalt im Auswahlfeld oben anzeigen let resultStr=this.adultNum.innerText.replace(/\s/g,"")+" "+this.childrenNum.innerText.replace(/\s/g,"");
this.elem.firstElementChild.textContent=resultStr;
//DropDownContainer ausblenden
dies.dropDownContainerHide();
}
DokumentKlick(e){
//Ereignisaufwallungen vermeidenif(e.target!==document.documentElement && e.target!==document.body) return;
//DropDownContainer ausblenden
dies.dropDownContainerHide();
}
dropDownContainerHide(){
//div entfernt den Aggregatzustand Utils.removeClass(this.elem,"focus");
//dropDownContainer verbirgt Utils.addClass(this.dropDownContainer,"none");
//Die aktuell angezeigte UL-Liste ausblenden if(this.listPrep) this.listPrep.style.display="none";
}
setDropDownList(Typ){
//Inhalt der UL-Dropdown-Liste erstellen let li="";
sei max=0;
Schalter (Typ) {
Fall „Erwachsener“: max=8;Pause;
Fall „Kinder“: max=5;break;
Fall "Alter": max=18;Pause;
}
für (lass i = 1; i < max; i ++) {
li+="<li>"+i+"</li>";
}
Rückkehr li;
}
statische setStyles(){
wenn(Main.styles) return;
Hauptstil=true;
Utils.insertCss(".guestsNum",{
Breite: "108px",
Höhe: "34px",
Polsterung: "0px 12px",
Rahmen: „1px durchgezogen #ccc“,
Rahmenradius: "3px",
Position: „relativ“,
Schriftgröße: "14px",
Farbe:"#666",
Benutzerauswahl: „keine“,
})
Utils.insertCss(".guestsNum.focus",{
Rahmenfarbe: "#ffa800",
boxShadow:"0 0 4px #ffa800"
})
Utils.insertCss(".guestsNum>span",{
Zeilenhöhe: "34px"
})
Utils.insertCss(".guestsNum>i",{
Anzeige: „Inline-Block“,
Breite: "16px",
Höhe: "16px",
Hintergrundbild:"url(./image/user.jpg)",
float:"rechts",
Rand: „8px 0px 0px 10px“
})
Utils.insertCss(".dropDownContainer",{
Rahmen: "1px durchgezogen #ffa800",
Rahmenradius: "4px",
boxShadow: "0 0 4px #ffa800",
Hintergrundfarbe: "#fff",
Polsterung: "20px 15px",
Breite: "480px",
Schriftgröße: "12px",
Position: „absolut“,
links:"0px",
oben: "35px",
})
Utils.insertCss(".dropDownItem",{
Rand unten: "12px"
})
Utils.insertCss(".dropDownItem>span",{
Anzeige: „Block“,
Breite: "60px",
Zeilenhöhe: "28px",
float:"links",
})
Utils.insertCss(".dropDownSelect",{
Breite: "90px",
Höhe: "30px",
marginRight:"10px",
float:"links",
Position: „relativ“
})
Utils.insertCss(".dropDownCont",{
Rahmen: „1px durchgezogen #ccc“,
Rahmenradius: "3px",
Höhe: "12px",
Polsterung: "6px 8px 10px",
})
Utils.insertCss(".dropDownCont>span",{
Anzeige: „Inline-Block“,
Breite: "53px",
Höhe: "14px",
Zeilenhöhe: "14px",
RahmenRechts: „1px durchgezogen #ccc“
})
Utils.insertCss(".dropDownCont>i",{
Anzeige: „Inline-Block“,
Breite: "0px",
Höhe: "0px",
Rahmen: „5px durchgezogen #c6c6c6“,
Rahmenfarbe:"#c6c6c6 transparent transparent",
Rand: "6px 0px 0px 4px",
float: "rechts"
})
Utils.insertCss(".dropDownList",{
Listenstil: „keine“,
Polsterung: "0px",
Rand: "0px",
Breite: "88px",
maxHöhe:"200px",
Überlauf: „auto“,
Cursor: "Zeiger",
Rahmen: „1px durchgezogen #ccc“,
Hintergrundfarbe: "#fff",
Rahmenradius: "4px",
Position: „absolut“,
links:"0px",
oben: "30px",
zIndex:"2",
boxShadow: "1px 1px 3px rgba(0,0,0,.1)",
Anzeige: „keine“
})
Utils.insertCss(".dropDownList>li",{
Zeilenhöhe: "28px",
paddingLeft:"8px",
})
Utils.insertCss(".dropDownList>li:hover",{
Hintergrund:"#f4f4f4"
})
Utils.insertCss(".dropDownBottom",{
Rahmen oben: „1px durchgehend #ccc“,
Rand oben: "20px",
Polsterung oben: „20px“
})
Utils.insertCss(".dropDownTips",{
Schriftstil: „normal“,
Schriftgröße: "12px",
Farbe: "#ef523d",
Zeilenhöhe: "28px"
})
Utils.insertCss(".dropDownBtn",{
Textdekoration: „keine“,
float: "rechts",
Anzeige: "Inline-Block",
Polsterung: "2px 22px",
Hintergrundfarbe: "#ffb200",
Rahmenradius: "4px",
Schriftgröße: "14px",
Zeilenhöhe: "24px",
Farbe: "#fff",
})
Utils.insertCss(".dropDownBtn.disabled",{
Hintergrundfarbe: "#efefef",
Farbe: "#999"
})
Utils.insertCss(".clearfix:after",{
Inhalt:"\".\"",
Anzeige: „Block“,
Überlauf: „versteckt“,
Sichtbarkeit: „versteckt“,
klar:"beide",
Höhe: "0px"
})
Utils.insertCss(".none",{
Anzeige: „keine“
})
}
}Utils.js-Datei:
exportiere Standardklasse Utils{
statisch erstellenE(Element,Stil,Vorbereitung){
elem = Dokument.Element erstellen(elem);
wenn (Stil) für (let prop in Stil) elem.style[prop]=style[prop];
wenn (Vorbereitung) für (let prop in prep) elem[prop]=prep[prop];
Rücklaufelement;
}
statisches Anhängen an (Element, übergeordnetes Element) {
wenn (übergeordneter.Konstruktor === String) übergeordnetes Element = document.querySelector(übergeordnetes Element);
übergeordnetes Element.AnhängenKind(Element);
}
statische Zufallszahl(min,max){
gibt Math.floor(Math.random*(max-min)+min) zurück;
}
statische Zufallsfarbe (Alpha) {
alpha=alpha||Math.random().toFixed(1);
wenn(isNaN(alpha)) alpha=1;
wenn (Alpha>1) Alpha = 1;
wenn (alpha<0) alpha=0;
Lassen Sie col="rgba(";
für (lass i = 0; i < 3; i++) {
col+=Utils.randomNum(0,256)+",";
}
col+=alpha+")";
Rückspalte;
}
statisches insertCss(Auswählen,Stile){
wenn(document.styleSheets.length===0){
let styleS = Utils.createE("Stil");
Utils.appendTo(styleS,document.head);
}
let styleSheet = Dokument.styleSheets[Dokument.styleSheets.Länge-1];
Lassen Sie str = auswählen + "{";
für (var prop in Stilen) {
str+=prop.replace(/[AZ]/g,function(item){
return "-"+item.toLocaleLowerCase();
})+":"+Stile[Eigenschaft]+";";
}
str+="}"
styleSheet.insertRule(str,styleSheet.cssRules.length);
}
statisch getIdElem(elem,obj){
wenn(elem.id) obj[elem.id]=elem;
wenn (elem.children.length===0) returniere obj;
für (lass i = 0; i < Element. Kinder. Länge; i ++) {
Utils.getIdElem(elem.children[i],obj);
}
}
statische AddClass(Element,Klassenname){
let arr=(elem.className+" "+className).match(/\S+/g);
arr = arr.filter((Element,Index)=>arr.indexOf(Element,Index+1)<0)
elem.className=arr.join(" ");
}
statische removeClass(Element,Klassenname){
wenn(!elem.klassenname) return;
lass arr = elem.className.match(/\S+/g);
Lassen Sie arr1 = Klassenname.match(/\S+/g);
arr1.fürJeden(item=>{
arr = arr.filter(t=>t!==Element)
})
elem.className=arr.join(" ");
}
static hatKlasse(Element,Klassenname){
wenn(!elem.className) false zurückgibt;
lass arr = elem.className.match(/\S+/g);
Lassen Sie arr1 = Klassenname.match(/\S+/g);
lass res;
arr1.fürJeden(item=>{
res = arr.ein(es=>es===Element)
})
Rückgabewert;
}
} 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:
|
>>: Ausführliche Erklärung der Sonderberechtigungen SUID, SGID und SBIT in Linux
Artikel empfehlen
Detaillierte Erklärung der Set-Datenstruktur von JavaScript
Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
js um das Schlangenspiel mit Kommentaren zu implementieren
In diesem Artikelbeispiel wird der spezifische Co...
Tutorial zur MySQL-Infrastruktur: Detaillierte Erläuterung des Ausführungsprozesses von Abfrageanweisungen
Vorwort Ich wollte schon immer wissen, wie eine S...
Die Verwendung eines eindeutigen MySQL-Schlüssels in Abfragen und damit verbundene Probleme
1. Tabellenanweisung erstellen: CREATE TABLE `Mit...
Linux-Tutorial zum Ersetzen von Zeichenfolgen mit dem Befehl sed
Um eine Zeichenfolge zu ersetzen, müssen wir das ...
Installieren Sie MySQL 5.7 unter Ubuntu 18.04
Dieser Artikel wurde unter Bezugnahme auf die off...
Die benutzerdefinierte Vue-Komponente implementiert eine bidirektionale Bindung
Szenario: Die von uns häufig verwendeten Interakt...
MySQL-Optimierungslösung: Aktivieren Sie das Protokoll für langsame Abfragen
Inhaltsverzeichnis Vorwort Einrichten der Protoko...
So implementieren Sie einen variablen Ausdrucksselektor in Vue
Inhaltsverzeichnis Definieren der HTML-Struktur E...
Implementierung eines schwebenden Werbestreifens in HTML und CSS
1.html Teil Code kopieren Der Code lautet wie folg...
Vue implementiert das Umschalten des Anmeldetyps
In diesem Artikelbeispiel wird der spezifische Co...
So konfigurieren Sie gängige Software unter Linux
Wenn Sie einen neuen Linux-Server bekommen, müsse...
Einführung in die Verwendung von Ankern (benannte Anker) in HTML-Webseiten
Die folgenden Informationen sind aus dem Internet ...
Detaillierte Erklärung zum Remotezugriff auf die MySQL-Datenbank über Workbench
Vorwort Workbench ist auf einem Computer installi...