suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie JavaScript, um den Dropdown-Listeneffekt von HTML zu verschönern. Wählen Sie tag_javascript-Fähigkeiten aus

Verwenden Sie JavaScript, um den Dropdown-Listeneffekt von HTML zu verschönern. Wählen Sie tag_javascript-Fähigkeiten aus

WBOY
WBOYOriginal
2016-05-16 15:31:441267Durchsuche

Lassen Sie uns zunächst die Verwendung des Select-Tags anhand eines Beispiels überprüfen: 

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

Dann ist der normale Effekt so:

20151117144635327.png (119×118)

Lassen Sie Schönheit und Hässlichkeit für den Moment beiseite ... select ist eines der trügerischeren Elemente unter allen HTML-Elementen. Die wichtigsten Dinge, die ihn verrückt machen, sind:

Die von verschiedenen Browsern angezeigten Standard-Dropdown-Felder sind nicht genau gleich
Sie können die Höhe der Auswahl im IE nicht manuell festlegen (das ist das Ärgerlichste!), Sie können sich nur darauf verlassen, dass die Schriftgröße dies unterstützt
Der Dropdown-Pfeil auf der rechten Seite von „Auswählen“ kann nicht im Hintergrund entfernt werden, was es unmöglich macht, CSS zur Verschönerung zu verwenden
Zusammenfassend sind die wichtigsten Lösungen:

Auswahl ausblenden und mit div simulieren
Setzen Sie die Auswahltransparenz auf 0 und verwenden Sie dann die relative Positionierung, um ein Div hinzuzufügen, das wie „Auswählen“ aussieht und unten verschönert wird

Das allgemeine Prinzip des Versteckschemas ist wie folgt:
Suchen Sie auf der Seite nach der Auswahl, die verarbeitet werden muss, und blenden Sie sie aus
Erstellen Sie je nach ausgewählter Option eine Li-Liste (es kann natürlich auch ein Div sein) und blenden Sie diese aus.
Erstellen Sie an der ausgewählten Position ein Div, um den ausgewählten Wert anzuzeigen (ausgewählte Option). und verschönern Sie es mit CSS, damit es wie eine Auswahl aussieht
Fügen Sie ein Ereignis hinzu, um die LI-Liste anzuzeigen, wenn auf „Auswählen“ geklickt wird. Und verwenden Sie die relative Positionierung, um diese Liste unter „Auswählen“ anzuzeigen
Fügen Sie Ereignisse zur li-Liste hinzu, um den Wertauswahlprozess des Dropdown-Felds zu simulieren (Klickereignisse und Tastatur-Ereignisse ↑↓ müssen simuliert werden)
Nachdem die Wertauswahl abgeschlossen ist, sollte der ausgewählte Wert oben in der „Auswahl“ angezeigt werden und der tatsächliche Auswahlwert sollte festgelegt werden
Wenn Sie es komplizierter machen möchten, können Sie natürlich auch Optionssuche, Mehrfachauswahl, Optionslöschung nach Mehrfachauswahl usw. hinzufügen. Zu dieser Zeit waren die allgemeinen Grundsätze den oben genannten ähnlich. Es gibt viele solcher Plug-Ins im Internet. Bei der Verwendung von Online-Plugins sollte jedoch darauf geachtet werden, die Kompatibilität des Browsers zu testen. Je komplexer die Funktion zur Simulation der Auswahl ist, desto schwieriger ist es, die Kompatibilität zu erreichen

Wenn Ihr Programm keine derart komplexen Auswahlen erfordert, ist möglicherweise die zweite Option zum Einstellen der Transparenz für Sie geeignet. Was ich heute mit Ihnen teilen möchte, ist auch dieser Plan.
Sein Prinzip ist wie folgt:


Suchen Sie die Auswahl der aktuellen Seite und setzen Sie deren Transparenz auf 0. Machen Sie sie unsichtbar, aber Sie können auf den Wert
klicken und ihn auswählen Erstellen Sie ein Div, verwenden Sie die relative Positionierung, platzieren Sie es unter der Auswahl und steuern Sie es mit CSS, damit es wie eine Auswahl aussieht. Warum muss es unten platziert werden? Aus diesem Grund können wir auf die echte Auswahl klicken und es sieht so aus, als hätte der Benutzer auf die simulierte Auswahl geklickt, da die echte Auswahl völlig transparent ist. Wenn es darüber platziert wird, klickt der Benutzer auf diese simulierte Auswahl und die echte Auswahl wird nicht erweitert! ! !
Setzen Sie den Text des Div auf den Wert von select
Fügen Sie ein Ereignis hinzu, sodass der Wert auf dem simulierten Div
angezeigt wird, nachdem die echte Auswahl den Wert ausgewählt hat

Beginnen wir mit dem 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);



Plug-in-Code läuft: 

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

Das Folgende ist der HTML-Code: 

<!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>

Kompatibel mit den wichtigsten Browsern.


Es gibt jedoch immer noch einen großen Fehler in der alten Version des IE: Die Höhe der echten Auswahl kann immer noch nicht erweitert werden. Wenn der Benutzer daher auf die untere Position der simulierten Auswahl klickt, wird er feststellen, dass die Auswahl nicht erweitert werden kann! !
Aber die Kunst des Designs ist die Ausgewogenheit, und wenn Sie diesen Fehler nicht ertragen können, können Sie die erste Lösung verwenden.


Darüber hinaus wurde nach dem Testen festgestellt, dass die Position der Auswahl nach der Anzeige leer ist, wenn sich die Auswahl in einem versteckten Container befindet! !
Was ist los? !
Es stellt sich heraus, dass die Bildschirmkoordinaten eines HTML-Elements nicht abgerufen werden können, nachdem es ausgeblendet wurde! ! ! Bei der Anzeige ist die echte Auswahl also vollständig transparent, während die simulierte Auswahl in der oberen linken Ecke des Bildschirms verläuft. Weil die Koordinaten der Auswahl, die er erhalten hat, (0,0)
sind

Keine Sorge, es gibt Lösungen für dieses Problem:
1. Schreiben Sie nur Code, um das Verschönerungsprogramm von select
auszulösen Zuerst müssen Sie die folgenden Änderungen am Code des Verschönerungsprogramms oben vornehmen: 

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

Dann fügen Sie das Attribut autoFix="false" zur versteckten Auswahl hinzu: 

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

Wenn dann der externe Container angezeigt wird, rufen Sie manuell $("#sex").selectFix() auf

2. Wenn das Ein- oder Ausblenden des Containers durch ein Plug-In eines Drittanbieters gesteuert wird und es unpraktisch ist, es zu ändern, können Sie die folgende Lösung in Betracht ziehen:
Bestimmen Sie im Verschönerungsprogramm zunächst, ob die Auswahl ausgeblendet ist. Wenn nicht, bleibt die Logik unverändert. Fügen Sie einen Timer hinzu, führen Sie eine Schleife aus, um zu bestimmen, ob das Element angezeigt wird, und rufen Sie dann automatisch „Fix“ auf, wenn es angezeigt wird der Timer
Der Code lautet wie folgt: 

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

Der laufende Code bleibt gegenüber dem Original unverändert.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einfache Beispieldemonstration zur Verwendung von Kontrollkästchen in Javascript_Javascript-KenntnissenNächster Artikel：Einfache Beispieldemonstration zur Verwendung von Kontrollkästchen in Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen