communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Utilisez JavaScript pour embellir l'effet de liste déroulante des compétences HTML select tag_javascript

Utilisez JavaScript pour embellir l'effet de liste déroulante des compétences HTML select tag_javascript

WBOY
Libérer： 2016-05-16 15:31:44
original
1266 Les gens l'ont consulté

Tout d’abord, passons en revue l’utilisation de la balise select à travers un exemple : 

<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>
Copier après la connexion

Alors l'effet normal est comme ceci :

20151117144635327.png (119×118)

Laissons de côté la beauté et la laideur pour le moment...select est l'un des éléments les plus trompeurs parmi tous les éléments html. Les principales choses qui le rendent fou sont :

Les listes déroulantes par défaut affichées par les différents navigateurs ne sont pas exactement les mêmes
Vous ne pouvez pas définir manuellement la hauteur de la sélection sous IE (c'est la chose la plus ennuyeuse !), vous ne pouvez compter que sur la taille de la police pour la prendre en charge
La flèche déroulante sur le côté droit de la sélection ne peut pas être supprimée en arrière-plan, ce qui rend impossible l'utilisation de CSS pour l'embellissement
Pour résumer, les principales solutions sont :

Masquer la sélection et utiliser div pour la simuler
Définissez la transparence de sélection sur 0, puis utilisez le positionnement relatif pour ajouter un div qui ressemble à select et est embelli ci-dessous

Le principe général du schéma de masquage est le suivant :
Recherchez la sélection à traiter sur la page et masquez-la
Selon l'option sélectionnée, créez une liste li (bien sûr, cela peut aussi être un div) et masquez-la.
Créez un div à la position de sélection pour afficher la valeur sélectionnée (option sélectionnée). et embellissez-le en utilisant CSS pour le faire ressembler à une sélection
Ajoutez un événement pour afficher la liste li lorsque vous cliquez sur "sélectionner". Et utilisez le positionnement relatif pour faire apparaître cette liste sous "select"
Ajoutez des événements à la liste li pour simuler le processus de sélection de valeur de la liste déroulante (les événements de clic et les événements de clavier ↑↓ doivent être simulés)
Une fois la sélection de la valeur terminée, la valeur sélectionnée doit être affichée dans la "sélection" ci-dessus et la valeur réelle de sélection doit être définie
Bien sûr, si vous souhaitez compliquer les choses, vous pouvez également ajouter une recherche d'options, une sélection multiple, une suppression d'option après une sélection multiple, etc. A cette époque, les principes généraux étaient similaires à ceux évoqués ci-dessus. Il existe de nombreux plug-ins de ce type sur Internet. Mais lorsque vous utilisez des plug-ins en ligne, vous devez faire attention à tester la compatibilité du navigateur. Plus la fonction de simulation de sélection est complexe, plus il est difficile d'obtenir la compatibilité
.
Si votre programme ne nécessite pas de sélections aussi complexes, la deuxième option de définition de la transparence peut vous convenir. Ce que je veux partager avec vous aujourd’hui, c’est aussi ce plan.
Son principe est le suivant :


Recherchez la sélection de la page actuelle et définissez sa transparence sur 0. Rendez-la invisible, mais vous pouvez cliquer et sélectionner la valeur
Créez un div, utilisez le positionnement relatif, placez-le sous la sélection et contrôlez-le avec CSS pour le faire ressembler à une sélection. Pourquoi faut-il le placer en dessous ? Pour cette raison, nous pouvons cliquer sur la sélection réelle et il semblera que l'utilisateur a cliqué sur la sélection simulée car la sélection réelle est complètement transparente. S'il est placé au-dessus, l'utilisateur clique sur cette sélection simulée, et la sélection réelle ne s'étendra pas ! ! !
Définissez le texte du div sur la valeur de select
Ajoutez un événement pour qu'après que la sélection réelle ait sélectionné la valeur, la valeur soit affichée sur le div simulé


Commençons par le code : 

( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity" :0
});
//找到select的选项
var sOptions= this .get(0).options;
//设置模拟select的值
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
//模拟的select
//初始化时要将select的值传入
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var left=$(select).offset().left;
var top=$(select).offset().top-1; //因为一般select都有1px的边框，所以这里往上拉1px
$(selectFixDiv).css({
"top" : top,
"left" : left
});
//select选值时，将值显示到模拟的select上
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
};
$.fn.selectFix=selectFix;
})(jQuery);
Copier après la connexion
(function($){ 
  var selectFix=function(){ 
    var select=$(this); 
    //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 
    $(select).css({ 
      "opacity":0 
    }); 
    //找到select的选项 
    var sOptions=this.get(0).options; 
    //设置模拟select的值 
    var setFixDivText=function(selectValue){ 
      var text=""; 
      for(var i=0;i<sOptions.length;i++){ 
        var option=sOptions[i]; 
        if(option.value==selectValue){ 
          text=$(option).text(); 
          break; 
        } 
      } 
      return text; 
    }; 
 
    //模拟的select 
    //初始化时要将select的值传入 
    var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix">'+setFixDivText($(select).val())+'</div>'); 
    select.after(selectFixDiv); 
 
    var left=$(select).offset().left; 
    var top=$(select).offset().top-1;//因为一般select都有1px的边框，所以这里往上拉1px 
    $(selectFixDiv).css({ 
      "top" : top, 
      "left" : left 
    }); 
     
    //select选值时，将值显示到模拟的select上 
    $(select).bind("change click",function(){ 
      $(selectFixDiv).text(setFixDivText($(this).val())); 
    }); 
  }; 
  $.fn.selectFix=selectFix; 
})(jQuery);
Copier après la connexion



Code du plug-in en cours d'exécution : 

jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
$( this ).selectFix();
});
}
});

jQuery(document).ready(function() { 
  var selects=$("select.selectInput"); 
  if(selects.length){ 
    selects.each(function(){ 
      $(this).selectFix(); 
    }); 
  } 
});
Copier après la connexion

Voici le code html : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME = "Generator" CONTENT = "EditPlus" >
< META NAME = "Author" CONTENT = "" >
< META NAME = "Keywords" CONTENT = "" >
< META NAME = "Description" CONTENT = "" >
< script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script >
< script type = text /javascript src = "temp.js" > </ script >
< style >
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
</ style >
</ HEAD >
< BODY >
< div id = "main" >
< select id = "sex" class = "selectInput" name = "sex" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >
</ div >
</ BODY >
</ HTML >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
 <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
 <script type=text/javascript src="temp.js"></script> 
 
 <style> 
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;} 
.dn {display: none;} 
select{cursor: pointer;} 
input, 
select, 
textarea, 
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;} 
.formText, 
.selectInput, 
.text, 
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;} 
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;} 
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;} 
 </style> 
</HEAD> 
 
<BODY> 
<div id="main"> 
  <select id="sex" class="selectInput" name="sex"> 
    <option value="0">男</option> 
    <option value="1">女</option> 
  </select> 
</div> 
</BODY> 
</HTML>
Copier après la connexion

Compatible avec les principaux navigateurs.


Mais il existe toujours un défaut majeur. Dans l’ancienne version d’IE, la hauteur de la sélection réelle ne peut toujours pas être étendue. Par conséquent, si l’utilisateur clique sur la position inférieure de la sélection simulée, il constatera que la sélection ne peut pas être étendue ! !
Mais l’art du design est l’équilibre, et si vous ne supportez pas ce défaut, vous pouvez utiliser la première solution.


De plus, après tests, il a été constaté que si la sélection se trouve dans un conteneur caché, alors après affichage, la position de la sélection sera vide ! !
Que se passe-t-il? !
Il s'avère que les coordonnées d'écran d'un élément html ne peuvent pas être obtenues une fois celui-ci masqué ! ! ! Ainsi, lorsqu'elle est affichée, la sélection réelle est complètement transparente, tandis que la sélection simulée s'exécute dans le coin supérieur gauche de l'écran. Parce que les coordonnées de la sélection qu'il a obtenue sont (0,0)


Ne vous inquiétez pas, il existe des solutions à ce problème :
1. Écrivez le code seul pour déclencher le programme d'embellissement de select
Tout d’abord, vous devez apporter les modifications suivantes au code exécutant le programme d’embellissement ci-dessus : 

jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
if (!($( this ).attr( "autoFix" )== "false" )){
$( this ).selectFix();
}
});
}
});

jQuery(document).ready(function() { 
  var selects=$("select.selectInput"); 
  if(selects.length){ 
    selects.each(function(){ 
      if(!($(this).attr("autoFix")=="false")){ 
        $(this).selectFix(); 
      } 
    }); 
  } 
});
Copier après la connexion

Ensuite, ajoutez l'attribut autoFix="false" à la sélection masquée : 

< select id = "sex" class = "selectInput" name = "sex" autoFix = "false" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >

<select id="sex" class="selectInput" name="sex" autoFix="false"> 
    <option value="0">男</option> 
    <option value="1">女</option> 
  </select>
Copier après la connexion

Ensuite, lorsque le conteneur externe est affiché, appelez manuellement $("#sex").selectFix()

2. Si l'affichage ou le masquage du conteneur est contrôlé par un plug-in tiers et qu'il n'est pas pratique de le modifier, vous pouvez envisager la solution suivante :
Dans le programme d'embellissement, déterminez d'abord si la sélection est masquée. Sinon, la logique reste inchangée, si elle est masquée, ajoutez une minuterie, faites une boucle pour déterminer si l'élément est affiché, appelez automatiquement fix lorsqu'il est affiché, puis supprimez-le. le minuteur
Le code est le suivant : 

//加上隐藏select的操作
( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity" :0
});
if (!select.is( ":hidden" )){
var sOptions= this .get(0).options;
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var selectWidth=$(select).innerWidth();
var selectFixDivWidth=$(selectFixDiv).innerWidth();
var left=$(select).offset().left;
var top=$(select).offset().top-1;
$(selectFixDiv).css({
"top" : top,
"left" : left,
"margin" : 0
});
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
} else {
var tasks = function (){
if (!$(select).is( ":hidden" )){
$(select).selectFix();
clearInterval(timer);
}
};
var timer=setInterval(tasks,500)
}
};
$.fn.selectFix=selectFix;
})(jQuery);
Copier après la connexion
//加上隐藏select的操作 
(function($){ 
  var selectFix=function(){ 
    var select=$(this); 
    //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 
    $(select).css({ 
      "opacity":0 
    }); 
 
    if(!select.is(":hidden")){ 
      var sOptions=this.get(0).options; 
 
      var setFixDivText=function(selectValue){ 
        var text=""; 
        for(var i=0;i<sOptions.length;i++){ 
          var option=sOptions[i]; 
          if(option.value==selectValue){ 
            text=$(option).text(); 
            break; 
          } 
        } 
        return text; 
      }; 
 
      var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix" status="close">'+setFixDivText($(select).val())+'</div>'); 
      select.after(selectFixDiv); 
 
      var selectWidth=$(select).innerWidth(); 
      var selectFixDivWidth=$(selectFixDiv).innerWidth(); 
      var left=$(select).offset().left; 
 
      var top=$(select).offset().top-1; 
      $(selectFixDiv).css({ 
        "top" : top, 
        "left" : left, 
        "margin" : 0 
      }); 
 
      $(select).bind("change click",function(){ 
        $(selectFixDiv).text(setFixDivText($(this).val())); 
      }); 
    }else{ 
      var tasks = function(){ 
        if(!$(select).is(":hidden")){ 
          $(select).selectFix(); 
          clearInterval(timer); 
        } 
      }; 
      var timer=setInterval(tasks,500) 
    } 
  }; 
  $.fn.selectFix=selectFix; 
})(jQuery);
Copier après la connexion

Le code en cours d'exécution reste inchangé par rapport à celui d'origine.

Étiquettes associées：
html javascript select
source：php.cn
Article précédent：Exemple de démonstration simple de la façon d'utiliser la case à cocher dans les compétences javascript_javascript Article suivant：Méthode d'implémentation de l'affichage du menu arborescent dans la liste déroulante javascript list_javascript skills
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal