Exigences fonctionnelles
1. L'appel doit être pratique. Une fois terminé, il devrait ressembler à ceci :
function loadSelect(selectobj){.
// Passer un objet sélectionné pour embellir son style
}
2. Ne modifiez pas les éléments du formulaire d'origine et ne détruisez pas le code de la page du formulaire :
<form name="f" onsubmit="getResult();">
<ensemble de champs>
<legend>Inscription des utilisateurs</legend>
<div>
<label for="username">Compte</label>
<input type="text" id="nom d'utilisateur" name="nom d'utilisateur" />
</div>
<div>
<label for="pwd">Mot de passe</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">Province</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>
</sélectionner>
</div>
</fieldset>
<input type="submit" value="Submit" name="btnSub" />
</form>
pour mettre en œuvre l'idée
: masquer la sélection dans le formulaire.
Pourquoi? C'est simple, parce que ce type est trop têtu et ne peut pas obtenir ce que vous voulez en utilisant CSS. Alors tuez-le.
Étape 2 : Utilisez un script pour trouver la position absolue de la balise select sur la page Web.
Nous utilisons des balises DIV pour en créer une fausse et plus belle à cette position afin de lui servir de remplaçant.
Étape 3 : utilisez un script pour lire la valeur dans la balise select.
Bien qu'il soit caché, nous pouvons toujours utiliser les options qu'il contient, afin de pouvoir toutes les prendre.
Étape 4 : Lorsque l'utilisateur clique sur l'avatar de la balise select, qui est le div. Nous utilisons un autre div pour flotter en dessous du div précédent. Il s'agit du remplacement des options.
C'est à peu près tout, implémentons-le étape par étape !
Préparation
1. Réfléchissez à la manière dont vous souhaitez embellir la sélection et préparez les images correspondantes. J'ai préparé deux petites images, qui sont la flèche déroulante 1 et la flèche déroulante 2. 1 est le style par défaut et 2 est le style lorsque la souris est déplacée.
2. Rédigez une page de soumission de formulaire commune, comme celle ci-dessous. Notez que j'ai défini le style CSS de base pour la sélection, ajouté le code pour appeler le fichier js dans l'en-tête et ajouté le script pour appeler la fonction dans le corps.
Écrire du javascript
<script type="text/javascript" src="select.js"></script>
Créez un nouveau fichier js et enregistrez-le sous select.js. Nous terminerons le reste du travail dans ce js.
Nom de la fonction : loadSelect(obj);
Paramètres : Sélectionnez
les fonctions liées à l'objet :
//Obtenir la position absolue de l'étiquette
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
pendant que(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
retour {
haut :t,
à gauche : l,
largeur : w,
hauteur : h
}
}
Première étape : enregistrez la position absolue de la sélection. Au bout d'un moment, le remplaçant est arrivé et je savais où je devais me situer.
var offset=Décalage(obj);
//Expliquez ici que Offset est une fonction utilisée pour obtenir la position absolue d'un objet. Écrit en dehors de la fonction loadSelect(). Il possède quatre attributs : haut/gauche/largeur/hauteur.
Étape 2 : Masquer la sélection.
obj.style.display="aucun";
Étape 3 : utilisez un div virtuel pour remplacer select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "absolu" ;
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) pas de répétition à droite 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);
Étape 4 : Donnez-lui la valeur non sélectionnée de la sélection d'origine.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
Étape 5 : Ajoutez un style de survol de la souris à l'avatar.
iDiv.onmouseover=function(){//mouvements de la souris
iDiv.style.background="url(icon_select_focus.gif) pas de répétition à droite 4px";
}
iDiv.onmouseout=function(){//la souris s'éloigne
iDiv.style.background="url(icon_select.gif) pas de répétition à droite 4px";
}
Étape 6 : Ajoutez des événements de clic de souris.
iDiv.onclick=function(){//clic de souris
if (document.getElementById("selectchild" + obj.name)){
// Détermine si le div a été créé
si (enfantCréer){
// Déterminez si la liste déroulante actuelle est ouverte. Si elle est ouverte, fermez-la. S'il est fermé, ouvrez-le.
document.getElementById("selectchild"+ obj.name).style.display="none";
enfantCreate=false ;
}autre{
document.getElementById("selectchild" + obj.name).style.display="";
enfantCreate=true ;
}
}autre{
//Placez initialement un div sous le div précédent en remplacement des options.
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "absolu" ;
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 argent massif";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="aucun";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
enfantCreate=true ;
pour (var i=0;i<obj.options.length;i++){
//Ajoute les options de la balise select d'origine à li
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");
pour (var j=0;j<obj.options.length;j++){
//Ajouter un événement de souris pour la balise li
liObj[j].onmouseover=function(){
this.style.background="gris";
this.style.color="blanc";
}
liObj[j].onmouseout=function(){
this.style.background="blanc";
this.style.color="noir";
}
liObj[j].onclick=fonction(){
//Faites deux choses. La première consiste à enregistrer la sélection de l'utilisateur dans la balise select d'origine, sinon, aussi belle soit-elle, la valeur de la sélection ne sera pas obtenue une fois le formulaire soumis.
obj.options.length=0;
obj.options[0]=nouvelle option(this.innerHTML,this.id);
//En même temps, on ferme la liste déroulante.
document.getElementById("selectchild" + obj.name).style.display="none";
enfantCreate=false ;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
La dernière est un peu plus compliquée. Avant de procéder à cette étape, l'apparence de la sélection a déjà été révélée. L'étape suivante consiste à ajouter un div pour imiter l'option déroulante qui apparaît après la sélection. est cliqué. Nous pouvons extraire les options de la balise select via javascript et l'écrire comme ceci :
<div>
<ul>
<li>Nomoption</li>
<li>Nomoption</li>
<li>Nomoption</li>
</ul>
</div>
C'est essentiellement ça. Il y a encore quelques défauts si vous avez le temps, vous pouvez les additionner !