recherche

Maison  >  Article  >  interface Web  >  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
WBOYoriginal
2016-05-16 15:31:441249parcourir

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>

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);

(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);



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(); 
    }); 
  } 
});

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>

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(); 
      } 
    }); 
  } 
});

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>

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);

//加上隐藏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);

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

Déclaration：
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
Article précédent：Exemple de démonstration simple de la façon d'utiliser la case à cocher dans les compétences javascript_javascriptArticle suivant：Exemple de démonstration simple de la façon d'utiliser la case à cocher dans les compétences javascript_javascript

Articles Liés

Voir plus