Funktionale Anforderungen
1. Der Aufruf sollte bequem sein. Anschließend sollte er wie folgt aussehen:
function loadSelect(selectobj){
//Übergeben Sie ein ausgewähltes Objekt, um seinen Stil zu verschönern
}
2. Ändern Sie nicht die ursprünglichen Formularelemente und zerstören Sie nicht den Code der Formularseite:
<form name="f" onsubmit="getResult();">
<fieldset>
<legend>Benutzerregistrierung</legend>
<div>
<label for="username">Konto</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="pwd">Passwort</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">Provinz</label>
<select id="province" name="province">
<option value="10">Jiangxi</option>
<option value="11">Fujian</option>
<option value="12">Guangdong</option>
<option value="13">Zhejiang</option>
</select>
</div>
</fieldset>
<input type="submit" value="Submit" name="btnSub" />
</form>
zur Umsetzung der Idee
: Ausblenden der Auswahl im Formular.
Warum? Es ist ganz einfach, denn dieser Typ ist zu stur und kann mit CSS nicht das bekommen, was Sie wollen. Also töte es.
Schritt 2: Verwenden Sie ein Skript, um die absolute Position des Select-Tags auf der Webseite zu ermitteln.
Wir verwenden DIV-Tags, um an dieser Position ein gefälschtes und besser aussehendes Tag zu erstellen, das als sein Stellvertreter dient.
Schritt 3: Verwenden Sie ein Skript, um den Wert im Select-Tag zu lesen.
Obwohl es ausgeblendet ist, können wir die darin enthaltenen Optionen dennoch verwenden, sodass wir sie alle nutzen können.
Schritt 4: Wenn der Benutzer auf den Avatar des ausgewählten Tags klickt, bei dem es sich um das div handelt. Wir verwenden ein weiteres Div, um unter dem vorherigen Div zu schweben. Dies ist der Ersatz für Optionen.
Das ist es in etwa, lasst es uns Schritt für Schritt umsetzen!
Vorbereitung
1. Überlegen Sie, wie Sie die Auswahl verschönern möchten und bereiten Sie die entsprechenden Bilder vor. Ich habe zwei kleine Bilder vorbereitet, nämlich Dropdown-Pfeil 1 und Dropdown-Pfeil 2. 1 ist der Standardstil und 2 der Stil, wenn die Maus darüber bewegt wird.
2. Schreiben Sie eine allgemeine Formulareinreichungsseite, wie die folgende. Beachten Sie, dass ich den grundlegenden CSS-Stil für die Auswahl definiert, den Code zum Aufrufen der js-Datei im Head und das Skript zum Aufrufen der Funktion im Body hinzugefügt habe.
Schreiben Sie Javascript
<script type="text/javascript" src="select.js"></script>
Erstellen Sie eine neue JS-Datei und speichern Sie sie als select.js. Den Rest der Arbeit erledigen wir in diesem JS.
Funktionsname: loadSelect(obj);
Objektbezogene Funktionen
auswählen
://Ermitteln Sie die absolute Position der Beschriftung
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
zurückkehren {
oben :t,
links: l,
Breite: B,
Höhe: h
}
}
Schritt eins: Notieren Sie die absolute Position der Auswahl. Nach einer Weile kam der Ersatzspieler und ich wusste, wo ich stehen sollte.
var offset=Offset(obj);
//Erklären Sie hier, dass Offset eine Funktion ist, mit der die absolute Position eines Objekts ermittelt wird. Außerhalb der Funktion „loadSelect()“ geschrieben. Es hat vier Attribute: oben/links/Breite/Höhe.
Schritt 2: Auswahl ausblenden.
obj.style.display="none";
Schritt 3: Verwenden Sie ein virtuelles Div, um select
var iDiv = document.createElement("div"); zu ersetzen.
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolute";
iDiv.style.width=offset.width + „px“;
iDiv.style.height=offset.height + „px“;
iDiv.style.top=offset.top + „px“;
iDiv.style.left=offset.left + „px“;
iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
iDiv.style.border="1px solide #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + „px“;
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
Schritt 4: Geben Sie ihm den nicht ausgewählten Wert der ursprünglichen Auswahl.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
Schritt 5: Fügen Sie dem Avatar einen Mouseover-Stil hinzu.
iDiv.onmouseover=function(){//Mausbewegungen
iDiv.style.background="url(icon_select_focus.gif) no-repeat right 4px";
}
iDiv.onmouseout=function(){//mouse bewegt sich weg
iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
}
Schritt 6: Fügen Sie wichtige Mausklickereignisse hinzu.
iDiv.onclick=function(){//Mausklick
if (document.getElementById("selectchild" + obj.name)){
//Bestimmen Sie, ob das Div erstellt wurde
if (childCreate){
//Bestimmen Sie, ob das aktuelle Dropdown-Menü geöffnet ist. Wenn es geschlossen ist, öffnen Sie es.
document.getElementById("selectchild"+ obj.name).style.display="none";
childCreate=false;
}anders{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=true;
}
}anders{
// Platzieren Sie zunächst ein Div unter dem vorherigen Div als Ersatz für Optionen.
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "absolute";
cDiv.style.width=offset.width + „px“;
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.background="#f7f7f7";
cDiv.style.border="1px massives Silber";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="none";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
childCreate=true;
for (var i=0;i<obj.options.length;i++){
//Füge die Optionen im ursprünglichen Select-Tag zu li hinzu
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j++){
//Mausereignis für li-Tag hinzufügen
liObj[j].onmouseover=function(){
this.style.background="gray";
this.style.color="white";
}
liObj[j].onmouseout=function(){
this.style.background="white";
this.style.color="black";
}
liObj[j].onclick=function(){
//Tun Sie zwei Dinge. Eine davon besteht darin, die Auswahl des Benutzers im ursprünglichen Select-Tag zu speichern, egal wie schön sie ist, der Wert der Select wird nach dem Absenden des Formulars nicht erhalten.
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
//Gleichzeitig schließen wir das Dropdown.
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
Der letzte Punkt ist etwas komplizierter. Bevor wir diesen Schritt ausführen, wurde das Erscheinungsbild der Auswahl bereits erläutert. Der nächste Schritt besteht darin, ein Div hinzuzufügen, um die Dropdown-Option zu imitieren, die nach der Auswahl erscheint angeklickt wird. Wir können die Optionen des Select-Tags über Javascript extrahieren und es so schreiben:
<div>
<ul>
<li>Optionsname</li>
<li>Optionsname</li>
<li>Optionsname</li>
</ul>
</div>
Das ist es im Grunde. Es gibt noch einige Mängel, wenn Sie Zeit haben, können Sie diese zusammenzählen!